ReactJS Beginner Crash Course [programming with Mosh]

What is it?

“Learn React – React Crash Course 2018 – React Tutorial with Examples” is a two-and-a-half hours beginners ReactJS tutorial available for free on YouTube. This tutorial is a part of the full 11-hours tutorial (that is not free) but it works nicely as a standalone unit.

Mosh is a great instructor and provides a good mix of explanations, coding examples, plugins and tips in this tutorial. You will also get to work on a little project – a counter app for an e-commerce store.

 

ReactJS counter app

Setting up the Development Environment

Mosh is a Mac user that uses Visual Studio code (yay!). The two plugins he shared and I really like:

  • Prettier – for formatting your code nicely (most importantly indentations). To get it to work on each save in VSCode, you need to add the following line to your setttings: “editor.formatOnSave”: true
  • Reactjs code snippets – the two snippets that I use a lot are:  “imrc tab” for import React, { Component } from ‘react’; and “cc tab” for the class component snippet.

I’ve installed Emmet before, but I’ve never set it up. Once I’ve seen Mosh using it and seeing how powerful it is, I took the time to get it working. You’ll need to add the following line to your settings: “emmet.triggerExpansionOnTab”: true.

The tutorial uses create-react-app.

VSCode shortcuts

  • “Cmd +d” for selecting all the instances (this is very useful when you want to change the name of a function, for example)
  • “shift + alt + down arrow” to duplicate a line – not explicitly mentioned in the tutorial

Bootstrap4

The tutorial uses Bootstrap4 for it’s UI and it is installed as a dependency with npm. I’ve only used Bootstrap3 before so this was a nice addition (also some really cool looking buttons).

ES6

ReactJS uses the newest Javascript syntax – ES6 – and as always it broke down to: arrow functions, array functions (map, reduce, filter), destructuring and the spread operator.

Lifecycle hooks

These are used to catch components at a specific point (when they’ve been rendered, mounted, updated…). There are many lifecycle methods available (only in class components), but luckily Mosh breaks it down to just a couple that are used all the time.

Reactjs lifecyle hooks

Other things

Some really good practice with functional vs class components, the difference between props and state, the idea of the “single source of truth”, lifting the state and stateless components and conditional rendering.

The Bottom line

A great tutorial, easy to follow along and I especially appreciated all the extra plugins and tips that made me a faster and more powerful coder in just a couple of minutes. Considering buying his full tutorial (will keep you posted!).

The Code

The code for the project can be found here.