adnan832 / react

Specifications React Module

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

In this 5 week module we will learn React!

Planning

Week	Topic	Preparation	Lesson plan	Homework
1.	Thinking the react way Understanding the component model Props State	Preparation	Lesson plan	Homework
2.	Building components Create react app Component tree Stateful logic List keys Life cycle	Preparation	Lesson plan	Homework
3.	Advanced react Forms and events Using data fetching Children Prop types	Preparation	Lesson plan	Homework
4.	Managing state Context Render props	Preparation	Lesson plan	Homework
5.	Connecting to node React router Refs Node api project	Preparation	Lesson plan	Homework

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. See this video about ES6 (the video is in Node, but the syntax for React is the same):

https://www.lynda.com/Node-js-tutorials/Switching-ES6-Node-js/546100-2.html

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://facebook.github.io/react/

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