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 7.x or 8.x) with NPM (at least version 3.x)
- 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 Atom)
- 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
v8.6.0
$ npm -v
4.2.0
$yarn -v
1.2.1you can upgrade an existing version of npm by running the following command :
npm update -g npmWe 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.8.4If you don't have a favorite text editor to write Javascript application, we advise you to use Atom.
Download and install Atom and install the following packages:
- language-javascript-jsx
- linter-eslint
To learn how to manage Atom packages: http://flight-manual.atom.io/using-atom/sections/atom-packages/
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
npm install -g create-react-appor if you want to use yarn instead run
git clone https://github.com/react-bootcamp/react-101 react-101
cd react-101
yarn install
yarn global add create-react-appThe 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 startThen go to http://localhost:3000 to explore the documentation of the different routes available.
We provide a list of commen React pattern to help you during your journey through React here
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent