🙌 Special thanks go to easylearn schweiz ag. This is the company I currently work for. Our managers allowed me to create parts of this tutorial at working time.
The purpose of this tutorial is to serve for a better understanding of the concepts of React while getting familiar with some state-of-the-art libraries used with it in 2022.
To go through this tutorial without lots of pain, you should be familiar with Javascript ES6+, React and JSX. This tutorial is written in Typescript. I think most people who understand Javascript can arrange with TS by doing this tutorial. No need to panic: It is just javascript with type hints.
Together we are going to build a single page app with an index and a register user page.
The user registration form is going to be wired with a mocked api over http to also cover network traffic.
The output of this tutorial is a clean and reusable framework built on top of React.
We do not cover redux in this tutorial.
In my opinion and especially in this time (with React 16+) I think redux is an overkill for most cases.
The trade-off between redux's code-splitting and therefore its higher complexity overwhelms the benefits of
performance optimizations. I experienced that encapsulated components with its callbacks are a lot easier to understand and
less error prone than reducers, actions and components which are split into different parts in the code base.
For global and non steadily changed state I would suggest using the React's useContext hook.
Below you can see an overview of all steps of this tutorial.
- Setup from scratch - Installation: create-react-app, linting
- Authentication - Authentication context for the current user, import paths
- Routing - Preparing page layouts and the page's skeletons, mui, styled-components
- Internationalization - Translating contents, localization base, switching between two languages
- Toaster - Providing a way to trigger messages (toasts) to the website user
- Form - Providing basic form elements and the possibility of error enrichment
- Collections - Designing an interface for collection providers, implementation for arrays
- ApiV1 - Standardized http request handling, provide the first API version 1 endpoint
- Wiring - Wiring the registration form with the mocked http endpoint, form element error messages
💡 To compare the code changes between the tutorial steps, just go to https://github.com/inkognitro/react-app-tutorial-code/compare and choose the specific tutorial step branches to compare. Some steps are split into smaller branches. Every step is an accumulation of all the steps before plus the code changes of the tutorial step.
Feel free to use the code for your own project. It's available under the MIT license 😉