Chapter 18. Project: Building a bookstore with React Router
This chapter covers
- Project structure and Webpack configuration
- The host HTML file
- Creating components
- Launching the project
The project in this chapter focuses mainly on demonstrating how to use React Router, some ES6 features, and Webpack. In this project, you’ll build a simple e-commerce storefront for a bookstore (figure 18.1).
You’ll learn how to create browser routing, as well as the following techniques for working with React Router:
- How to pass data to a route and access it
- How to access URL parameters
- How to create modal windows with changing URLs
- How to use layouts by nesting routes
- Home (/)—The storefront with a book list
- Product page (/product/:id)—A separate product page
- Cart (/cart)—A web page showing the quantities and titles selected by the user
- Checkout (/checkout)—A print-ready invoice with the list of books
The product information will come from an array of data set in one of the files (ch18/nile/jsx/app.js; refer to the project structure in the next section). The product page can act as a modal dialog or as a separate page. When you click a product image on the home page, a modal dialog will open; for example, figure 18.2 shows a modal dialog with the detailed view of React Quickly.
