React Fundamentals

React.js is a component library, which expresses user interfaces in terms of components, properties passed into them, and state they manage internally. Through these encapsulated, expressive and composable building blocks, we can create complex and dynamic interfaces with code that is surprisingly simple and easy to manage.

React Fundamentals


With support for asynchronous component loading, dynamic routing, code-splitting and scroll-restoration, it is not surprising that React-Router is the most popular client-side routing library in the React ecosystem. We will get hands-on experience with React Router v4 in a variety of scenarios carefully designed to represent the use cases most developers face when building their own React apps.

  • React-RouterRouter, Route and Link

    At the heart of React-Router are three components: Router, Route, and Link. We’ll walk through a side-by-side comparison of the routers included with React-Router v4, and demonstrate how path expressions are used to render components based on URL.

  • React-RouterEXERCISE: Recipe as a resource

    Create routes for creating, listing and updating recipe resources. You must meet the following requirements:

    • Users should be able to refresh the browser at any of these pages and see no change in what’s rendered,
    • Hitting the back button should take you back to the previous application state.
  • React-RouterAdvanced Routing

    Now that we have some experience with the basics, we’ll address some more nuanced routing concerns like:

    • 404 Pages,
    • QueryParams,
    • Islands of URL-sensitive content,
    • Redirects.