Skip to content

Latest commit

 

History

History
258 lines (183 loc) · 9.22 KB

README.md

File metadata and controls

258 lines (183 loc) · 9.22 KB
Raw

React Course

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.

Table of Contents

Requirements

Generic badge Generic badge

Introduction

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.lock

Each 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.

Knowledge Prerequisites

Getting Started

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-$exerciseNumber

    e.g. : yarn start exercise-1

Testing your exercise completion

  • yarn test exercise-$exerciseNumber

    e.g. : yarn test exercise-1

Launching an exercise in another language than english:

  • NX_LANG='$myLocale' yarn start exercise-$exerciseNumber

    e.g. : NX_LANG='fr' yarn start exercise-1 ℹ️ The locale must exist in libs/course-hints/src/lib/constants.ts and the exercises READMEs should be translated.

What you'll learn

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

react

  • 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

react-router

  • Basic Routing
  • Param Matching
  • Dynamic Routing and Code splitting*

styling

  • CSS*
  • CSS-in-JS
  • Material-UI library
  • Styled-Components*
  • Global Theme usage*

redux*

  • Configuration and Architecture
  • Basic global state management usage
  • Middleware
  • Connected Router

Workflow

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.

Index

1/ Fetching, persisting data locally and list rendering

See instructions

2/ Using react-router-dom to create pages

See instructions

3/ Wrapping pages, building layout with Material-UI

See instructions

4/ Component composition, modules architecture, understanding responsibility

See instructions

5/ Event Driven Design and shared store, the Redux philosophy within React Context

See instructions

6/ Sharing state between providers and components

See instructions

7/ Providers cold shower, a global state struggle

See instructions

8/ Custom routing, good practices. Adding checkout

See instructions

9/ Controlled Forms and re-renders

See instructions

10/ Migrate to redux*

See instructions

Resources

Contributions

Issues

Feel free to create an issue or fork this repository and submit a PR.

  • if something is not correct or outdated in an exercise

Adding exercises

  • 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.

Translations

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 assets folder 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

RoadMap (left todo)

  • 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