ReactJS, the library, is very simple to get started with. However there are a few other parts to learning React, I have tried to break it down here. I hope you will find it useful.

Part 1 - React

• React is just the view layer.
• What is JSX?
• React uses virtual dom
• Understanding Data flow in React

Once you are done with these, You can read the official getting started page and then their tutorial using starter kit.

The tutorial is good enough to give you a good sense of what React is all about and how it is actually used then you can look into best practices of React.

Part 2 - Tooling

Frontend tooling is not specific to React but its definitely a considerable part of building a real world project in React. so understanding dependency management and build systems are crucial. There are plenty of options out there and most of them are unstable which makes frontend tooling really complex and confusing.

This tiny book explains popular choices and a series of posts by Tyler McGinnis uses gulp and browserify while walking through building an app in React.

Don't get confused, pick one and work with it, you will learn more in the process.

Part 3 - Flux

React is just the UI layer. Facebook uses an architecture called 'Flux', it complements React's composable view components by utilizing a unidirectional data flow. You can follow roughly these steps to learn how to use React and Flux together.

• Understanding Uni-directional Flux data flow, very different if you are coming from Angular world.
• Hands on tutorial on flux
• Using APIs in Flux

At this point you would need a way to route things. React-router is the best option I know of.

Give this repo a read at the end. This puts together everything so far mentioned into one tiny working project, this will clarify a lot of your doubts.

As you explore, you will see tons of options again! Yes, this time about which Flux implementation to use - Reflux, Alt, Fluxxor, Flummox, Redux, Fluxible etc. But at this point, you will be good enough to decide which one suits your requirement.

At Hashnode, we are using Alt to build isomorphic web apps. Here's a tutorial by @sandeep on how to build isomorphic javascript web apps with Alt. Redux is also a pretty great option and is getting hotter every day, here's a nice article, a hands-on tutorial and a course by Dan Abramov (creator of Redux) explaining Redux.

I have two collections Learn React and Learn Flux, which I keep updating whenever I find something interesting in React and Flux world.

Happy Learning!

Thanks for inviting me Ayoola.

@prank7 has covered pretty much everything. Since you are coming from an Angular background, I'll just add couple of points to reinforce some concepts.

Angular is an MV* framework whereas React is just the 'V' in MVC. Many developers use React as the view layer and many others combine it with Flux architecture. I suggest you start with plain React and then combine it with Flux.

Angular relies on two way data binding while React promotes unidirectional data flow. You should remember this while making the transition from Angular to React.

Here is a very nice video tutorial by Ben Nadel that compares React with Angular. Do check it out.

Let us know if you have any questions!

I think this could he helpful: reactjsnews.com/an-angular-developers-first-react…

I didn't walked this path (from ng to react), but to get a solid understanding, the book by Juho Vepsäläinen survivejs.com helped me allot.

React itself is super easy, it has only a hand full of functions. It's just Javascript :-) The tricky parts are around React, namely the build systems, JSX and unlearning all the two-way-data-binding habits.

Build systems are confusing because they are complex in many ways. In SurviveJS Webpack webpack.github.io is described and used.

JSX is just HTML. The tricky part here is, to learn when and where to put repeating parts. How to code a list or table and how to compose components from other components. But with 'stateless components' it has gotten allot easier.

Unlearning two-way-data-binding habits are critical and depressing sometimes. But you are forced to unlearn it anyways (regardless of sticking to ng/Ember or whatever) because observables aka Object.observe() just got removed from ES7 :-)

In React a pattern called Flux is used to overcome limitations introduced with the unidirectional data flow. But Dan Abramov has created Redux and explained it in this fantastic video series egghead.io/series/getting-started-with-redux He also teaches​ you some more function Javascript :-) Flux will be replaced next year by Relay. And Relay already looks very much like Redux (from Dan Abromov).