Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a pull request.

HackYourFuture - React

React is free an open-source frontend JavaScript library for building user interfaces based on UI components.

This course is divided in 2 modules, of 3 and 2+1 week.

Module goals:

React1 Module:

• Thinking the React way
• Building components
• Advanced React

React2 Module:

• Managing state
• Connecting to node

+ Individual Project (Meal Sharing App)

Read up before we get started

Watch this video from Facebook about why they started React:

https://youtu.be/nYkdrAPrdcw

Also be sure you're familiar with ES6-syntax. This is a handy reference of all features of ES6:

http://es6-features.org

Please do not worry about understanding all. However, do make sure you understand the following, as we'll be using them a lot:

• http://es6-features.org/#Constants
• http://es6-features.org/#ObjectMatchingShorthandNotation
• http://es6-features.org/#RestParameter
• http://es6-features.org/#SpreadOperator

Read about React here:

https://reactjs.org/

Real world example

Have a look at Exemplary real world application built with React + Redux:

https://github.com/gothinkster/react-redux-realworld-example-app

The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)

Beyond React

The following libraries are worth mentioning to use in conjunction with React:

• FlowType - a way to annotate ES6 with types, similar to TypeScript
• Redux - predictable (application) state container, a Flux implementation
• Webpack - a JS packager, used by create-react-app
• Babel - a ES6+ to JS transpiler, also used by create-react-app
• JSS - a way to write CSS-like styles inside your component files