Let’s Create a Web Application Using React JS in 20 Minutes. No Need for a 10 Hour Video — Part 1

React JS is a JavaScript library that can be used in creating Web Applications. Personally, I prefer using React to the HTML, CSS, and Javascript trio because it seems more straightforward. Talking about combining HTML and JavaScript in one file (also called JSX) is the best way to build a Web Application.

Okay, enough explanations. Let’s begin!

Prerequisites

Although it is not a must, it is realistic that you have knowledge or have already written codes using:

1. HTML
2. CSS
3. JavaScript

You also need to have installed the Node.Js (Version 16 at the time of this tutorial). If you haven’t, check here to be directed to the website where you can get it from.

Next, locate the Node.js Command prompt. It should look like the image below:

I usually advise my students to create a folder in their documents folder or on the desktop where their codes will be stored. So, you can do the same.

Create a folder, open the folder and copy its directory, and paste it to the node js for access.

Next, we would create our first app. As a case study, we would be creating a To-do list. The command to create a new react app is: npx create-react-app [name of app]

Next, we would be writing our first piece of code. But before we do so, we need to start our app from VS code terminal or node js, using the command: npm start

This will load the react app to your default browser (I would recommend you make Google Chrome your default browser). It should be as below:

We have created our first app in React JS. In the second part of this series, we will be creating a simple to-do form and list.

Stay with me! Winks!