- Working Mode
- Environment
- Online Shop
- 0. HTML and CSS Basics
- 1. TypeScript
- 2. React Intro
- 3. Components
- 4. Hooks
- 5. SCSS
- 6. Routing
- 7. Fetch API
- 8. Basic Redux
- 9. Redux Saga
- OPT-1. Recompose
- OPT-2. Highcharts
The road-map consists of several steps. In each step, a set of theoretical concepts are explored, supported by reference documentation, book chapters, tutorials and videos. In parallel, a simple application will be built with the learned concepts: the Online Shop application.
After the learning material for a given step was sufficiently explored, either some new functionality will be added to this application or old functionality will be refactored.
All the code written must be published on GitHub. Access the this link to create your own repository. Commits must be pushed when each individual chapter is finished. In order to request a code review from the trainers, you must open a pull request from the develop to the master branch.
You can work using your local environment:
In the backend folder you can find a server-side implementation for the online shop. To run this server perform the following:
- Open the
backendfolder in your terminal npm ci(only needed the first time your run the server)npm start- Open http://localhost:4000 in your browser.
The application will simply browse through a catalog of products. It will support:
- Listing the products,
- Adding a new product,
- Updating an existing product,
- Deleting a product.
The online shop has a "shopping cart" functionality:
- The user may add items into the cart,
- He may increment and decrement the quantity of each product or even remove a product completely from the cart,
- Lastly, he may checkout the cart and place an order (resulting in the creation of an order in the backend).
Mockups describing the user interface structure can be found in the mockups folder. These mockups should be used as a guideline, but improvements or deviations from them is allowed.
Goal: refresh your knowledge about HTML and CSS basic concepts.
Required Reading:
Online Shop: nothing to do.
Further Resources:
Goal: learn a bit of TypeScript.
Required Reading:
- TypeScript in 5 minutes
- What is TypeScript and why would I use it in place of JavaScript? (read the top two answers)
Online Shop: nothing to do.
Further Resources:
- TypeScript Handbook
- Why TypeScript is the best way to write Front-end in 2019
- Why I no longer use TypeScript with React and why you shouldn’t either
Goal: become familiar with React.
Required Reading:
Online Shop:
Install Create React App with the help of the NodeJS package manager:
npm install -g create-react-app.Create a new project in the root of your git repository by using the CLI:
create-react-app online-shop --template typescript.Navigate inside the project folder, start the project and open its home page in your browser:
npm start.Install the React Dev Tools extension for Chrome. Inspect the application and view the components using this extension.
Further Resources:
Goal: get a grip on the basics of React Components.
Required Reading:
Online Shop:
For the moment, we will use mock data across all components. The data will be defined locally in the component's file.
Create a new React Component for displaying a single product's details.
Create an React component for displaying a list of products. Hint: use the
.mapcall on the array of products.Add some CSS to each of the components to make them look nicer.
Further Resources:
Goal: get used to working with Hooks.
Required Reading:
Online Shop:
Migrate your React component(s) from before from using class-based components to using hooks inside functional components.
Further Resources:
Goal: understand the usage of SCSS and integrate an existing CSS library - Bulma.
Required Reading:
Online Shop:
Install the Bulma library. Use the built-in CSS classes to style your existing components.
Change the theme of the Bulma classes by replacing the following:
- Primary color: #a01441
- Font: Open Sans
Further Resources:
Goal: understand the basics of React Router and add routing to your project
Required Reading:
- React Router: Quick Start
- React Router: Components
- A Simple React Router Tutorial
- React: Handling Events
Online Shop:
Add a button next to each product from the product list. You can use it to navigate to a specific product's detail page.
From the detail page of the product, the user may add it to his shopping cart (by pressing a button).
Add Routing to your project and implement a navigation between the list of all products and the product detail page.
Add a navigation which redirects users from the default path ('/') to the '/products' page and displays by default the list of all products.
Enhance your app with routing parameters, such that you can navigate to a specific product's detail page.
Further Resources:
Goal: communicate with the mock backend using the Fetch API.
Required Reading:
Online Shop:
Use the Fetch API to read the products from the backend to fill in the product list.
When navigating to the product detail page, read the product information from the backend.
Add a new "Delete" button on the detail page, which calls the backend to remove a product from the catalogue.
Add a new "Checkout" button on the shopping cart page, which creates a new order on the backend.
Further Resources:
Goal: use Redux to manage application state and understand the difference between container and presentational components.
Required Reading:
- Thinking in React
- Container vs Presentational Components in React
- Redux: Getting Started
- Redux: Basic Tutorial
Online Shop:
Add a new "Edit" button on the detail page. Pressing it should open a new view, it shouldupdate the properties of the product. The view should have two buttons: "Cancel" (which undos all the changes) and "Save" (which calls the backend to persist the changes).
Add some validation to your form (ex: check that the fields are not empty, that the price and weight inputs contain only numbers, etc.)
Also create a new "Add" button on the product list. Pressing this button should open a view for creating a new product (which the same structure and buttons as the edit view).
Store all application state in a Redux store.
Hints:
- Create a reducer for each page,
- Add actions for each user input handler, data load event, etc. For each API call, you should create three actions: one which is dispatched when you do the fetch call, one which is dispatched if the fetch call succeeds and one if it fails. Example:
READ_PRODUCTS,READ_PRODUCTS_SUCCESS,READ_PRODUCTS_ERROR.- Dispatch the actions and select the state only inside the container components.
- Make sure to also have a loading flag indicator in each page's state,
- Install the Redux DevTools Chrome plugin to be able to debug your store.
Further Resources:
Goal: trigger the Fetch API calls using actions
Required Reading:
Online Shop:
Move all the fetch API calls into dedicated Sagas.
Further Resources:
Goal: understand the concept of Higher Order Components (HOC)
Required Reading:
- Using Recompose to write clean higher-order components
- Building HOCs with Recompose
- Recompose Recipes
Online Shop:
Transform all your container components to recomposed components (created by just applying a series of HOCs on the presentational component).
Create a HOC for displaying a loading indicator if the loading property is set to
true. Use this HOC throughout the application.
Goal: become familiar with Highcharts basics and usage within React
Required Reading:
- Chart Concepts whole chapter
- React Wrapper
Online Shop:
Create a new page for displaying total sales figures per product type. This data should be displayed in two different charts: a bar chart and a pie chart. The data is available at the
/salesREST API (make sure to pull the latest version of the backend).
Further Resources: