ReactJS Basic

Introduction

Hi, it is the second week of your training program. Once you have at least understand the basic of KoaJS - an NodeJS framework for crafting an functional API. If you look back at our Development Stack from the Training program overall section, it will see that one application require both backend and frontend. You have learnt how to code your backend, it is time to learn the frontend - ReactJS.

Screencast channel

You can see all video playlist for Week 2 here: https://screenpal.com/channels/c0fvXrVYvj

Getting started

You can find the most detailed ReactJS Documentation at their official documentation at here.

In order to learn all the basic concepts of ReactJs, we wil walk you through a simple ReactJS Todo Application, with CRUD (Create-Read-Update-Delete) functions. But first you need to Hello world with ReactJs first.

Hello world

As a quick start with ReactJs, it is recommended that you use Create React App, you can follow this guide to set up an ReactJS app with Create React App quickly. As soon as you succeed, you should see you app up and running like this:

Here is the video for this Hello world program:

Folder Structure

After setting up your first Hello World program, let’s a dive into the CRA folder structure to understand how React manages all its code content:

Components: Props and Basic React State Hooks

We will continue with some more React foundation concepts. In this part, we will focus on the data for the Component, which focus on state and props

We will dive further into React state here:

React Lifecycle

Understanding the React Lifecycle is a crucial conception in React, which differentiate React from other frameworks.

Level up with React Hooks

In this section, you will learn how to pull the most out of React Hooks using Custom React Hooks, which help you refactor the code way better:

Introduction to React Context

Unlike using a dedicated state container like Redux, you can just use built-in React Context for managing states, passing states to child component deep down the DOM tree effortlessly.

Exercise:

In this exercise, you will do this basic todo application from the Digital Ocean guide here: https://www.digitalocean.com/community/tutorials/how-to-build-a-react-to-do-app-with-react-hooks

Note

This sample application disobey many React standard, you will need to implement all the knowledge you learn above to clean up and make this application follow the standard.

Note

In the video, I mention that you should implement the API from Part 1, KoaJS API to have a todos API to store persistent data for the this Todo app.