React 102

React 102 is a workshop for those that want to learn React.js and its ecosystem, step by step.

react-102 by Mathieu ANCELIN and Sébastien PRUNIER is distributed under the terms of the Creative Commons - Attribution - NonCommercial - ShareAlike.

The Single Page Application version of the "Open Wine Database" app with React Router

During the workshop you will create a webapp to manage your favorite wines* !

The source code is based on the previous version of the app described in react-101.

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 ;-)

In this version, the app will be a Single Page Application based on React Router.

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-102 repo then run the npm install command

git clone https://github.com/react-bootcamp/react-102 react-102
cd react-102
npm install

or if you want to use yarn instead run

git clone https://github.com/react-bootcamp/react-102 react-102
cd react-102
yarn install

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.

Steps

• Step 0 : client-side routing
• Step 1 : react-router
• Step 2 : regions page
• Step 3 : wine list page
• Step 4 : wine details page