React Router v4 Tutorial - #1 Intro

Welcome to React Router v4 course! If you've built web apps with a framework, be it server-side (Node, Rails, Django, Laravel, etc.) or client-side (Angular, Vue, Ember, and a slew of others), then chances are, you're already a pro at static routing. Time and again, we'd first create a config file with our route definitions, and when the app bootstraps, it will then read the routes, match the current URL to one of the entries in the file, and only then render the UI back to the user. Sounds familiar? In fact, the workflow in React Router was (almost) no different up until v4.

Rather than work around React's component composition, the dev team over at React Training decided to embrace it. The fruits of their labor brought us a very unconventional component-based router, in which routing is now part of the rendering, and not the bootstrapping stage (hence the term, dynamic routing). The app itself is built up declaratively with navigational components that are now at the heart of the package. You can get to know more about its philosophy at https://reacttraining.com/react-router/web/guides/philosophy

For this series (and as always), we'll take a very practical and pragmatic approach to discovering this new tool. We'll build out a simple blog SPA (single page application) where visitors can learn about best writers and their works. For navigation, you guessed it, we'll utilize the full power of declarative routing in React Router v4. On top of that, we'll bring in bleeding-edge ES6+ features.

Who needs a backend with Firebase and GraphQL around these days? (Just kidding) We'll use the one and only json-server to mock the data store. Gloss over its awesome docs here https://github.com/typicode/json-server

Like my reading list? Grab the JSON structure that I used in the video at hastebin https://hastebin.com/ditumijade.json

See you next time!