How I learned React from ground-up or How to get started with React development with care

React is getting a lot of attention and very popular nowadays, and that makes many developers want to get their hands wet on React. However, I’ve seen so many questions similar to these:

  • How to get started with React?
  • I follow the tutorial on React website and I have no idea what I have to do with React.
  • Googling returns a crazy number of React tutorials, guides, examples…but they are too long, look so complicated with many stuffs like Webpack, Babel, ES6/7, GraphQL, Relay, Flux, Redux… How come people say React is simple and easy to learn?
  • …etc

In my opinion, learning React requires some level of technical knowledge and programming skills. You cannot just dive in with assumption that others can learn React quickly, you can too. There is no such thing named “quick” in learning, or maybe I’m wrong.

Okay, so I’d like to share my story learning React.

Two years ago, when I was working with Angular, there was a problem of maintenance for sharing component between web and mobile. They were like:

  • Input gets so laggy as more characters added. (the $watch problem of AngularJS 1.x). It is even more laggy in mobile device.
  • Controllers are messy because I had to define controller for a template directive, and when using it in HTML, I need more different app controllers. Passing data and defining scopes are so complicated.
  • Bidirectional data flow created so many magical bugs. And, as you know, Angular’s console log is indeed so truly “descriptive”.

While finding solution to improve the Angular codebase bit-by-bit, I’d found React. After several hours playing with in-browser React, I was totally sold. So I decided to port the whole code base from Angular to React after three days thinking.

But it is not an easy task, because I don’t have much of React knowledge. Playing with React tutorials doesn’t count as knowing it. Then I dig more about React and its ecosystem. By ecosystem, I mean that any thing that related to React to be used as requirements for a good React application building block.

I drew a roadmap for learning after finding out what I really need to re-develop my app. Okay, so here they are:

I learned ECMAScript ES6

At the time, I can use the ES5 just enough but I found out ES6 is the future and React team is using it so learning ES6 (even some of ES7) is the right choice. Learning this part was easy for me because I’ve already been familiar with the language and the new syntax doesn’t look so hard. If you’re familiar with Javascript already, then you’ll have no problem learning ES6. But if you’re not, then spend more time.

Some sites are already built for learning ES6:

Some important features of ES6 that are commonly used in React nowadays, and I really suggest you should learn before diving into learning React from Internet sources:

  • ES6 classes.
  • Arrow function.
  • Constant
  • Scope (variables, functions).
  • map() function.
  • Destructuring assignment.
  • Template string. (optional, but it is good for string format)

I learned Webpack

React uses Webpack as the default build tool. So it is necessary to learn how to use Webpack for making apps. But at this time, Webpack was not so much popular as Grunt or Gulp, and it is hard to find any good and clear tutorial to explain Webpack functions.

I pushed myself so hard at Webpack, grab the tutorials and the docs, memorized them all. Created so much baby easy Webpack and changed various numbers of Webpack configuration to see the differences. I believe in “trial and error” methodology in learning. It took me a whole month!!! But it worths!.

However, at the current time of this post, Webpack has been popularized and there are many high quality and examples for Webpack. I do suggest the following pages if you’re new to Webpack and want to learn it.

You can dig deeper into loaders and plugins later if necessary.

I learned React

Afterward, I started right away with React in deep. It’s just got so easy because I’ve already familiar with ES6 syntax, and Webpack.

Some concepts should be learned with care if you’re totally new to React:

Don’t bypass learning them or you will regret it later!

I learned ReactRouter

It is important to navigate on front-end, so ReactRouter is required. This learning part took me quite a time. I keep creating and deleting projects to learn ReactRouter. Because my mind was so close to the ngRoute in Angular, so it is hard to think about routing in React through component.

At current time of this post, there are many tutorials for ReactRouter, so I don’t provide many links, just this one I think that it is good enough for beginner:

I learned Flux

Flux is a front-end architecture design by Facebook React team. It is better than whatever MV* like Angular. I started my Flux learning with Reflux. I had a hard time on learning first Flux implementation library. The concept was okay, but later on with the complicated data flow app, I missed my track on data management. Debug was hard…because it is event-based thing. Anyway, because of that hardship learning to use Reflux, I got the idea of Flux architecture. Then I needed to find some libraries that can help me manage data better. Luckily, Redux 200!

I learned Redux

I read the docs and learned Redux in no time. Easy and quick as mentioned by the author:

Don’t be fooled by all the fancy talk about reducers, middleware, store enhancers — Redux is incredibly simple. If you’ve ever built a Flux application, you will feel right at home. If you’re new to Flux, it’s easy too! — ReduxJS Documentation.

Just rewrite the TodoList app several times by yourself, you’ll learn it real quick. I promise you on this!

There are two things to remember when using Redux:

  • Data should be always immutable. It is a good and very good practice to make your data immutable if you don’t want to spend time to find the magicians hiding somewhere in your apps.
  • Handle async action with care. You don’t want to lose data somewhere in asynchronous operation, right?

I learned by practicing to create many apps from small to large

You won’t actually gain something if not using it. This is the most important part of fixing mind process to get close to React. Try to think of many small ideas and implement them in React.

I learned more..

At this point, you can just find anything else in React ecosystem that fits into your architecture, learn and use properly. Some other things you might consider:

It took me quite a hard time, 3.5 months digging into React and its neighborhood. But it saves me a lot of time, by rewriting the big old Angular apps that took me 3 months to develop in 5 weeks using React. Things just got easier, and React is great if you learn it the right way. For the app, I didn’t use React Native because it wasn’t there. I use Apache Cordova with React to build mobile apps in 2014. Somehow, it works, it just works!

If you really want to learn React, here my two cents: “Don’t rush, keep calm and learning React step-by-step!”.

Cheers and good luck on your React journey! :)