Course: Section

Get Started with Modern React: Intro, Setup, and ES6 Basics

Episode: Title

S01・V01: Introduction

Date Created: July 17th, 2019
Last Updated: 27 days ago

Objectives
  1. We will describe the goals of this video course.
  2. We will explain how the course is structured.
  3. We will indicate what prerequisite skills and knowledge you need to best be able to follow the course.
  4. We will explain why we are using React hooks instead of the class syntax during this course.
Watch Video
Duration: 3m 53s

Introduction

In this introduction video, we will cover the following four items, so that you get a quick understanding of why the course was made, how it is structured, who it is intended for, and its special feature of using React hooks rather than classes.

1. About the Course

The best source of information about React is the official documentation at https://reactjs.org, which is very well written, and should be the starting point for anyone learning React.

This video course is based on the official documentation, and is intended to be complementary to it.

The aim of this course is to make it easier for beginners to React to get started, especially those who enjoy learning with video screencasts.

Importantly, this video course uses React hooks instead of classes throughout, which further simplifies the material for beginners.

2. Course Structure

  • Section 1: Intro, Setup, and ES6. This section serves as an introduction to the course, with some very basic information regarding the course, what you need to set up for trying out React, and some JavaScript ES6 basics for those who need them. You can jump straight to Section 2 or 3 if you are comfortable with setting up your environment to run React and JavaScript’s ES6 syntax. If you prefer to learn by concepts in a step by step fashion, then go straight to Section 2. If you prefer to learn by doing, then jump to Section 3.
  • Section 2: Step by Step. This section takes a structured and gradual approach to the basic concepts of React, appealing to learners who prefer a more theoretical and thorough methodology.
  • Section 3: Learn by Doing. This section covers a practical tutorial, where we will make a game using React. This should appeal to learners who prefer a more practical approach.

3. Prerequisite Knowledge

You will only need some very basic knowledge of:

  • HTML,
  • CSS, and
  • JavaScript,

to follow along with this course.

This course uses JavaScript ES6, so if you only know ES5, we have added explanations for the ES6 language features used in this course, in the second half of Section 1.

4. React Hooks instead of Classes

This course uses React hooks in stateful function components instead of using class components.

There are four reasons why:

  1. Hooks are much easier to understand than classes. Classes cause a lot of confusion, especially to beginners.
  2. Hooks are the future of React, and they inspire developers to use a more functional coding style. In fact, the official React documentation encourages you to use hooks in your components. Hooks simplify and reduce the amount of code required.
  3. The code is more elegant and easy to read.
  4. Hooks make it easier to separate out stateful component logic, data, and functionality into an encapsulated structure, making it convenient to reuse and share.

Next Up…

In the next video, we will look at online playgrounds for trying out React.