How To Become A React Developer

My latest obsession has been learning React to the point where I can build a single page application with server persistence, authentication, AJAX all built in an extensible, sensible way to the latest code conventions. And I want to build it to the latest Javascript ECMAScript 2016 standards. Here’s my guide on how to get to that point bypassing the false leads I made.

I started like everyone else…Googling. I read a few articles, also watched a few Pluralsight, YouTube and other videos but often found things didn’t quite work. The world of JavaScript changes fast. Real fast. And what was made 6 months ago could already be out of date. The pace of React development is moving like a bullet train traveling faster than the latest Elon Musk idea. Anyway, I digress.... I have found that the best sources of information are often the official documents themselves. Here's the order I recommended you do things in.

Do the React tutorial at https://reactjs.org/tutorial/tutorial.html I found this very strange when I first looked at it. It scared me – so many new ideas. But just persist until the end. Things will get easier. I promise. At the end of this, you may be a bit confused but you will have had a full tour of the basic React ecosphere.

Next, read the docs at https://reactjs.org/docs/hello-world.html and execute the little examples as you go. Make sure you do all the tutorials on this list. 'Thinking in React' right at the end is quite good.

On your own, build the functionality in the todos example here https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos This is from the Redux documentation at https://redux.js.org/docs/introduction/Examples.html Forget about Redux for now, just get this sample working.

Modify your todo list by adding todos with a dialog via http://www.material-ui.com/#/components/dialog This will introduce the idea of pre-built React UI libraries. They are a bit like jquery-ui and there are lots of competing libraries, see https://hackernoon.com/the-coolest-react-ui-frameworks-for-your-new-react-app-ad699fffd651 for a full list. Hooking in a dialog helped me quite a bit with understanding the framework.

Start reading a good book on JavaScript ECMA2016 (also known as ES6). At first I thought I could get by with a few internet examples but the way you need to think in ES6 is a quite different from earlier versions of JavaScript. A clear end to end guide on ES6 is worth it. This book is a little wordy but I often read a few sentences, look at an example and 'get it' before moving on. What's good about the book is it progresses right through the major ideas in simple English and by the end, there is nothing it hasn't touched. This is the sort of book you read a few pages a day of as you continue with your journey in React.

6. At this point, I wanted to learn Redux because it seems to be mentioned all the time in the React world. This has proved the most infuriating part of my learning to date. I wasted so much time on dead ends. I studied the official Redux examples for hours but they were more complicated than I liked. They use a lot of ES6 which, unless you are fully up to date with it, will confuse your learning of Redux. They also blur the line between what is Redux and what are React specific Redux integrations. Luckily I then came across this fa ntastic article that breaks Redux down in an example without any React. Combined with A Dummy’s Guide to Redux and Thunk in React I think I had made sense of React and Redux. Plus the examples in the official Redux examples then made sense. I also recommend this super simple React example which really lays the bones bare for React Redux tie ins.