This series of articles is about React. In recent years, single-page applications (SPA) have been popular in web development associated with loosely coupled modules. The major two SPA, Angular and React, are the most popular and almost used anywhere. I used to be an Angular Developer; while I learned Angular, I started by myself without any training. That made my learning curve quite long, and even at a senior level, I am still not familiar with something I have not met. While for react, there is a chance in a training course. I got the concepts and skills in every course. I will share here the major points that could be helpful for any new React developer.

A. Introduction

This article will discuss the basics of React, such as what React is, Environment setup, and Installation. The content of this article:

B. What is React?

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

In a SPA, a page refresh never occurs; instead, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.

The most popular SPAs are Angular and React, where

C. React Installation Prerequirements

There are only two requirements:

We will not discuss Node.js and VS Code in detail here. For Node.js, I have two previous articles to discuss:

For VS Code, the following Extensions are recommended.

ES7+React/Redux/React-Native Snippets

ESLint,

Bajel JavaScript

D. Installation and the First Project

Create App

After installing Node.js, run the application by command:

npx create-react-app my-app

Note

We use npx or npm to create the application, while

As said, if we use NPM, we need to install the required libraries one by one. While using NPX, we can just run without installing the required libraries. When needed, it will be installed automatically.

Start

NPM Install

End

Git Commit

Whole process

Windows Version

App Major Files

Major Files

package.json

Package

Including dependencies

Dependencies

index.js is the root file

Root files

Run the app

cd my-app
npm start

Compiling successfully

Compiling Application

App is on

App

E. Issues

React Default Language

You can write Angular applications in either TypeScript, ES6, or even ES5 JavaScript. However, Angular itself is written in TypeScript, most examples on the web are written in TypeScript, and most Angular jobs require you to write TypeScript. Therefore, for Angular, the default language is TypeScript.

On the other hand, more people like TypeScript more than JavaScript. The default language for React is JavaScript.

Loved vs Dreaded

React with TypeScript or JavaScript — Which Side are You on?🤔 | by DevJo | JavaScript in Plain English

Is React a Compiled Language?

Yes, because JavaScript is a compiled language (see Run JavaScript outside a Browser), React is.

References