Learning ReactJS for Designers

JavaScript is simple, or at least it used to be. If you’ve done any programming, and you know how to use Google then you can program in JavaScript. Of course, to make it more powerful we have to complicate things.

We make extensions to JavaScript, like ES6, that then need to be ‘transpiled’ to turn them back into regular JavaScript that the browser can understand.

And we build libraries like React and Vue that make it ‘simpler’ to build complex applications. But they’re complicated to learn. They make working with JavaScript very different, you need to think about things in a different way.

For designers like myself this is a lot of new concepts to learn, the vast array of options can be overwhelming so you can do what I do and ignore it. I work for myself, on my own projects, so I don’t really need to learn it.

But then WordPress is moving heavily towards React, so maybe I should?

I keep saying I will learn React but I haven’t had a need so I haven’t done anything about it. With Gutenberg getting ever nearer I feel I should actually start learning, and so I’ve been collecting tutorials for learning React. Obviously I haven’t been following them, but I will do one day!

Free Javascript Tutorials

Before learning React we should probably get the fundamentals right – so here’s some awesome javascript tutorials to get you started!

• Javascript Fundamentals to Learn Before React – a comprehensive tutorial covering all the basics. Nice as a refresher before digging in to React itself.
• Eloquent Javascript – a digital book about the fundamentals of Javascript and writing nice code.
• You Don’t Know JS – a collection of ebooks teaching Javascript. There’s an awful lot here, but they are split up into different subjects so you can choose where you want to focus.

Free React Tutorials

• ReactJS Hello World – the official React docs.
• ReactJS Tutorial – make a simple TicTacToe game.
• React from Zero – A ‘simple’ React tutorial that doesn’t need compilation.
• The Beginners Guide to React – A complete video course that covers the basics of React.
• React.js Introduction For People Who Know Just Enough jQuery To Get By – A different approach to learning React that is great if you know already jQuery (this was updated in January 2019 to cover the latest best practices).
• Kirupa.com React for Beginners – There’s a matching JavaScript tutorial here as well.
• SurviveJS Guide to React – Build a kanban app to learn the basics. Free version online or you can buy the ebook.
• Learn React Crash Course – A free Youtube video (a little under 2 hours). It’s a promo for the Mastering React course mentioned in the paid section below; but there’s a lot to learn here.
• Beginners guide to React (pdf)
• Beginners ES6 and Babel – not strictly React, but ES6 is used in React, and Babel transpiles ES6 into classic javascript.
• React Starter Kit – Get started online with Glitch (Glitch is like Codepen but with a server).
• You got this – A web makers magazine, from Glitch. This edition focuses on React.
• Build a Chat app with Scrimba – A real time learning platform.

Paid React Tutorials

• React for Beginners – Wes Bos classic course (I’ve now done this one)
• WordPress (Gutenberg) Block Development with React – Zac Gordons WordPress specific course. I’ve seen Zac talk at WordCamp London and he knows his stuff! (I’ve done this one as well)
• Mastering React – the complete paid version of the Learn React Crash Course. This link currently offers 80% off the price, no idea how long the offer will last though.

If you know of any good, preferably free, resources then please do let me on Twitter.