React 103

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

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

The "Open Wine Database" app with Redux

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

In this version, the app will make heavy usage of Redux

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 5.x or 6.x) with NPM (at least version 3.x)
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
v6.6.0

$ npm -v
3.10.7

you can upgrade an existing version of npm by running the following command :

npm update -g npm

You’ll need to have Node >= 4 on your machine.

We strongly recommend to use node >= 6 and npm >= 3 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 :

Install dependencies

If you want to pre-install the dependencies of the project to avoid any network issue, first clone the react-103 repo then run the npm install command

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

or if you want to use yarn instead run

git clone https://github.com/react-bootcamp/react-103 react-103
cd react-103
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
npm install
npm 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 and Redux here

ybonnel/react-103