Learn react

Prequisites

• knowledge of JavaScript & es6 : take the Quiz
• In case you get under 10/15, you will find some help here

Purpose

React is javascript library for building User Interfaces

-- Facebook

Since JQuery, web development has faced a lot of changes.

In 2010 Angular was released by Google. It introduced a new way of dealing with front-end development, organizing complex User Interfaces through MVC / MVVM architectures using two-way data-binding. And still today Angular 1.x is still one of the biggest front-end framework.

In 2013 React was released, mainly maintained by Facebook, Instagram and community. As a library, React only handles the view layer. Focusing on performance and scaling, it features a virtual DOM and one-way data flow. In order to make it more complete, facebook proposed to use it with Flux architecture.

In 2014, Google announced Angular2. The major changes it brings, would make the current version incompatible with Angular2.

This announce really shook the community. Developers began to seek for other solution. The timing was perfect for React to be the alternative.

This repo aims to help introducing React for developers.

Presentation

In markdown mode go here

In reveal mode you need Node Js, npm install and then :

npm start : opens a tab in the browser with a reveal. sourced by TechNight.md.md

Exercices

I wrote some exercices on Codepen.io

Here they are :

• First Component
• Define state
• Add controls
• Decoupling
• Wrap
• Button Delete
• Decoupling 2

Sources

For me videos worked very well.

I suggest you to begin with the learning reference.

Then watch the videos while coding with the speaker (Dan Abramov !). Keep this precious code with you as it covers a lot of react concepts and also how to think.

I hope you'll enjoy this :D

React

Official doc : https://facebook.github.io/react/

Main learning ref : 4 hours : https://developmentarc.gitbooks.io/react-indepth/content/

Videos :

• 66 min : https://egghead.io/courses/react-fundamentals

Useful articles (ordered):

• 5 min : http://buildwithreact.com/tutorial/jsx
• 5 min : https://medium.freecodecamp.com/react-aha-moments-4b92bd36cc4e#.m4r2w6czb
• 7 min : http://blog.andrewray.me/reactjs-for-stupid-people/
• 2 min : https://medium.com/@learnreact/container-components-c0e67432e005#.m5ln3mykh
• 5 min : https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.gv3g9xvuu
• 7 min : https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918#.xtw93rso7
• 4 min : https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.7ngk35ww6
• 9 min : https://medium.com/@tylermcginnis/react-interview-questions-c8a319ed02bd#.v8meuozg9
• 10 min: : https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3#.ilzqutmxn
• 10 min : https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3#.9nb1uifs5

Awesome list : https://github.com/enaqx/awesome-react

Redux (harder but valuable !)

Main learning ref : 10 hours : http://redux.js.org/

Videos :

• lvl 1 : 121 min : https://egghead.io/courses/getting-started-with-redux
• lvl 2 : 137 min : https://egghead.io/courses/building-react-applications-with-idiomatic-redux

Useful articles :

• 11 min : https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

Awesome list : https://github.com/brillout/awesome-redux