Introduction to React Router 4 and Creating Your First Route

Single page applications (SPAs) have become the de facto standard for developing applications for the web. Many JavaScript libraries and frameworks have emerged that help frontend engineers in developing SPAs. These include React, Angular, Ember, and Backbone, to name a few. These libraries or frameworks abstract native APIs and provide services and components that can be used to build applications quicker. SPAs are an excellent choice for providing a fluid user experience; as the user traverses through the site, HTTP requests are triggered, and only certain sections of the page are updated, instead of requesting the server for the entire page.

React is an open source JavaScript library that helps you in building user interfaces and the view layer in web and mobile applications. It encourages developers to visualize the view layer as a collection of components that can be reused throughout the application. Most frontend frameworks include a routing package that enables you to update sections of the page when the user clicks through various links provided on the site. A router in a frontend framework listens to the changes in the URL and keeps the application in sync by rendering the corresponding view components. For example, when the user visits '/dashboard', the page would render various dashboard components, such as charts and tables, and when the user visits, say, '/user', the page would list various user attributes. In a React-based application, a Router library is required, since React does not ship with one. React-Router is one such popular routing library built completely with React. The library includes various components that can be used to render views as the user navigates through the application. Apart from matching the URL and rendering the view components, React-Router has several features that help you to configure the routes easily. 

In this chapter, the following topics are discussed:

• A brief look at React: This section introduces you to some of the core concepts in React, such as component-based architecture, creating components in React, and how data can be provided to child components in the application tree
• Introduction to React-Router: Here, we first create a React application using the create-react-app CLI and then add the React-Router library (the 'react-router-dom' package) as a dependency
• Creating your first route: After adding React-Router as a dependency, the application's first route is created using the <BrowserRouter> and <Route> components