React 101

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.

The "Open Wine Database" app

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

Technical requirements

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

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

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.

Git

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

Atom

If 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/

React Developer Tools

In order to have specific tools to react in your web browser, install React Developer Tools :

• React Developer Tools for Google Chrome
• React Developer Tools for Mozilla Firefox

Install dependencies

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-app

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
yarn global add create-react-app

Open Wine API

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.

Common React Patterns

We provide a list of commen React pattern to help you during your journey through React here

Steps

• 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