Awesome Open Source
Awesome Open Source

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:

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://awesomeopensource.com/project/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
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Reactjs (162,487