React 101 is a workshop for those that want to learn React.js and its ecosystem, step by step.
react-101 by Mathieu ANCELIN and Sébastien PRUNIER is distributed under the terms of the Creative Commons - Attribution - NonCommercial - ShareAlike.
During the workshop you will create a webapp to manage your favorite wines* ! The main features of the app are
- List the wines by regions
- Display the details of a specific wine
- Like a wine
- Add comments on a wine
* Alcohol abuse is dangerous for health, consume with moderation ;-)
You can try the app here
The technical requirements are the following
- Node version LTS (currently 16.15.0) with NPM
- for more convenience use nvm: https://github.com/creationix/nvm
- Yarn (https://yarnpkg.com)
- Git
- A text editor (if you don't have one, just use Visual Studio Code)
- React Developer Tools
Node is the first requirement for the workshop. You can get it on the official website at https://nodejs.org/en/download/
You can verify your current version of node
and npm
by running the following commands :
$ node -v
v16.15.0
$ npm -v
8.5.5
$yarn -v
1.22.18
you can upgrade an existing version of npm by running the following command :
npm update -g npm
We strongly recommend to use node
>= 7 and yarn
for faster installation speed and better disk usage. You can use nvm
to easily switch Node versions between different projects.
Download and install the appropriate version of Git on your OS, follow the instructions available on the official website: https://git-scm.com/downloads
Verify the installation by running the following command in a terminal:
$ git --version
git version 2.35.1
If you don't have a favorite text editor to write Javascript application, we advise you to use Visual Studio Code.
In order to have specific tools to react in your web browser, install React Developer Tools :
If you want to pre-install the dependencies of the project to avoid any network issue, first clone the react-101
repo then run the npm install
command
git clone https://github.com/react-bootcamp/react-101 react-101
cd react-101
npm install
or if you want to use yarn
instead run
git clone https://github.com/react-bootcamp/react-101 react-101
cd react-101
yarn install
The app uses a REST API as a data source to display wines by regions, with their details, a photo of the bottle, etc ... This API is actually a small server written with NodeJS / Express, data are stored in memory.
You can use the online version of the API deployed on Heroku. You can find the documentation of the API here or even here. You can also use a graphql version of the API available here. We recommend that you read at least once on this documentation to get an overall idea of the data provided by the API to power your application.
If you don't want to/can't use the online version of the API, and want to run it on your machine, just use the following commands
git clone https://github.com/react-bootcamp/wines-api.git wines-api
cd wines-api
yarn install
yarn start
Then go to http://localhost:3000 to explore the documentation of the different routes available.
We provide a list of common React pattern to help you during your journey through React here
- Step 0 : create the app
- Step 1 : write your first React component
- Step 2 : write a first static version of the Open Wine Database app
- Step 3 : use the Open Wine API to feed the app
- Step 4 : add support for likes
- Step 5 : add support for comments
- Step 6 : integrates a third party JS library
- Bonus : split the app into 3 different pages with react-router