This project was generated using Nx.
It is meant to be a 3 days long course on React fundamentals, but especially on managing the state and dealing with hooks.
- Requirements
- Introduction
- Getting Started
- What you'll learn
- Workflow
- Index
- 1/ Fetching, persisting data locally and list rendering
- 2/ Using react-router-dom to create pages
- 3/ Wrapping pages, building layout with Material-UI
- 4/ Component composition, modules architecture, understanding responsibility
- 5/ Event Driven Design and shared store, the Redux philosophy within React Context
- 6/ Sharing state between providers and components
- 7/ Providers cold shower, a global state struggle
- 8/ Custom routing, good practices. Adding checkout
- 9/ Controlled Forms and re-renders
- 10/ Migrate to redux
- Index
- ResourcesDone in 0.49s.
Here is the tree architecture of the project.
.
├── README.md
├── apps
│ ├── exercise-1
│ ├── exercise-1-e2e
│ ├── exercise-2
│ ├── exercise-2-e2e
│ ├── exercise-3
│ ├── exercise-3-e2e
│ ├── exercise-4
│ ├── exercise-4-e2e
│ ├── exercise-5
│ ├── exercise-5-e2e
│ ├── exercise-6
│ ├── exercise-6-e2e
│ ├── exercise-7
│ ├── exercise-7-e2e
│ ├── exercise-8
│ ├── exercise-8-e2e
│ ├── exercise-9
│ ├── exercise-9-e2e
│ ├── react-course-demo
│ └── react-course-demo-e2e
├── babel.config.json
├── examples
│ ├── react
│ ├── redux
│ └── styling
├── jest.config.js
├── jest.preset.js
├── libs
│ ├── api
│ └── course-hints
├── nx.json
├── package.json
├── tools
│ ├── generators
│ └── tsconfig.tools.json
├── tsconfig.base.json
├── tslint.json
├── workspace.json
└── yarn.lockEach exercise-* directory is the solution of the previous one.
Validation of an exercise is made through passing the e2e tests, it is a BDD approach with the tests already written in Cypress.
-
Knowing the basics of React, having already done something basic like a to do list. See Documentation
-
Being familiar with JS Native Objects and their methods (Array, String, Object, Number, Boolean) See Documentation
-
Having notions of destructuring, spreading, currying, functional programming, immutability is a huge plus.
-
Read Kent C. Dodds articles Application state management and How to use Context effectively
In your terminal
- Install the project locally:
git clone https://github.com/generous-folks/react-course-v2.git - Install the dependencies:
cd react-course && yarn
Starting the app:
- For the demo:
yarn start react-course-demo - For an exercise:
yarn start exercise-$exerciseNumbere.g. :
yarn start exercise-1
Testing your exercise completion
yarn test exercise-$exerciseNumbere.g. :
yarn test exercise-1
Launching an exercise in another language than english:
NX_LANG='$myLocale' yarn start exercise-$exerciseNumbere.g. :
NX_LANG='fr' yarn start exercise-1ℹ️ The locale must exist inlibs/course-hints/src/lib/constants.tsand the exercises READMEs should be translated.
You will create a simple shopping app step by step. From the basic vanilla React example to a nicely featured one with routing, global state management, lazy loading and so on. It consists on a shared layout, a list of products, a product page, a shopping cart and a checkout form mostly.
We can't cover everything in this course, but we try to give a good overview of some common ways to build react apps.
* = optional
- Understanding of React principles
- Using Class* and Functional components
- Managing state and props
- PropTypes checking
- Understanding components life cycles
- Context API
- Using hooks
- Architecture and good practices
- Basic Routing
- Param Matching
- Dynamic Routing and Code splitting*
- CSS*
- CSS-in-JS
- Material-UI library
- Styled-Components*
- Global Theme usage*
- Configuration and Architecture
- Basic global state management usage
- Middleware
- Connected Router
The repository contains a bunch of folders like :
- examples : samples of everything you need to develop the app and to avoid spending time on google/stack overflow
- theory : some important concepts you should know to master this course
- final-version : a demo, or the actual final version of the app we're aiming to develop.
- exercise-X : All the exercises folders. We thought it was important to jump from an exercise to another having a corrected version of the previous exercise. It also makes more sense for group learning to always be on an equal state while going further.
See instructions
See instructions
See instructions
See instructions
See instructions
See instructions
See instructions
See instructions
See instructions
See instructions
- MDN
- React docs
- hooks lifecycles schema
- Kent C. Dodds articles Application state management and How to use Context effectively
Feel free to create an issue or fork this repository and submit a PR.
- if something is not correct or outdated in an exercise
- if you want to create more exercises with non-covered concepts
Using Nx allows to develop many apps into a single monorepo with a certain ease. If you want to create new exercises, be my guest. It could also be something totally different as long as it's related to react, hence the repository title.
This course contains some README files for exercises instructions and for theory parts in english. If you want to add translations to teach this course in your language of choice do the following:
-
Translate each exercises README file in the
assetsfolder and create a new file with your translation in the same folder:README-$myLocale.md -
Add your locale to the "SUPPORTED_LANGS" enum constant located here
libs/course-hints/src/lib/constants.ts💡 Follow this example Pull Request #22
- Test React Contexts with testing library
- Add article page $id navigation to all e2e past exercise 5
- Test hooks with testing library react hooks
- Add reset cart button
- Check index.html exercises versions
- Remove babel warnings
- Finalize instructions