Learning ReactJS Without Frustration

Learning ReactJS Without Frustration

Finding a great resource for ReactJS is not easy. There are too many old pre-EC6 tutorials all over the place, and what looked like zero authors willing to update their code. Eventually, I ran across a great book named SurviveJS, an open-source book dedicated to learning ReactJS, and Webpack. 

One of my biggest issues with learning ReactJS, was trying to figure out all of the options I had to choose from when it came laying out the framework, and modules needed to setup my React/Electron app. In the time I spent trying to learn, I felt like I was married to npm, and had installed so many different packaged. I tried Browserify, then moved to Gulp, then used Webpack on a whim. I fought with babel 6 for a couple days, and another couple days trying to get a hot-loading setup working for my react application. At the same time I observed many different framework file structures. This was not good at all. When learning something new, you need some structure, and a way to learn these things without using trial-and-error; that’s something to do when working with the language itself.

So, when I ran across SurviveJS, I first ran across the Free Version of the book, which at first, I have to be honest, I really didn’t think was a ReactJS book. After reading a few parts of the free portions, I was more than happy with what I saw, and instantly bought it. As of the time of writing this article, it’s been a whole 48 hours. So, what did I learn? Well, first off, I’m not finished yet, but what I have learned what what I needed in the first place, and if I had it 2 months ago, I would have been programming in ReactJS for at least 7 weeks already, and possibly getting ready to release my application.

This is how the book works. It starts out explaining the entire setup, letting you know more about ReactJS, and what it takes. It’s at that time that it starts introducing you to the different task-runners and bundlers, and why you even need them; Grunt, Gulp, Browserify, Webpack, and JSPM. Too cool! I could have saved myself a lot of trouble with this by itself. Not only that, it goes over how to set these up, how they work, and what mindset you need when setting them up. Of course, the book gives you all of the options, but focuses mainly on webpack for the rest of the book, which works for me. Webpack is pretty awesome.

After that, it starts going over the different elements of Webpack, so that you can use it to its full extent. Even more so, it goes over HMR (Hot Module Replacement), Source Maps, using Babel, using Loaders, and Hot-Loading, all in depth. So, if you are like me, and have trouble simply grasping the power of these task-runners/bundlers, then this is a gold mine in itself.

It’s at this point that the book starts diving into using React in tandem with the Webpack setup you just made. After covering these topics, you go on to creating a full-blown application with React, but in incremental steps, so that you learn various methods of creating each addition to the application the “stupid way”, and then learning how to create it the “smart way”. It’s a pretty great method, and the only other time I’ve seen this approach was in college when I learned C++. It’s a great way to learn.

It’s after creating that first application, that the book takes you into the world of React with Flux architecture. I have to be honest, I haven’t made it to this point just yet, but this is something I have read up on before, and something that definitely needs to be mentioned when talking about React. This is when the author shows what you can do to move the application into a Flux setup. Right after that, it’s time to change the application to make it better, as well as add some very cool addition to make it fairly advanced.

Once your are done working with the application, it’s time to start learning about Advanced Techniques, like testing, typing, linting, styling, and authoring your own packages. Needless to say, this is a perfect section for many of us that are not familiar with the concepts, including setting up a Linter, and even explaining what a Linter does. Like the task-runners, the book goes over various Linters, but the rest of the book focuses on ESLint, a great linter for React. The same goes for the Styling, and going over how to setup different styling setups for React, like CSS, SASS, LESS, Stylus, PostCSS, and or course more. Honestly, there is so much in this section that I have yet to understand, but anticipate going over.

Lastly, at the very end are the appendices, covering various topics like project structuring, troubleshooting, decorators, and the language features of ES6, which is something needed for a long time. Seeing different code from React 0.13 – 0.15 will confuse anyone, as one learns different ways to program with React, especially before ReactDOM, and even before EC6. Having this reference to know what is “right”, is something that will certainly become beneficial.

Overall, this book has not only proven to be very helpful in itself, that’s not all of the support you get. The author also offers a lot of ways to get support, a github repository filled with the content used with the book, constant updates to the book (not just errata), and a Twitter feed to let you know when these updates happen! In a nutshell, if you want to learn ReactJS, this is the way to do it, and for $20 USD, that’s a small price to pay for something as great as this.