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:
- A - Introduction
- B - What is React
- C - React Installation Prerequirements
- Node.js
- Visual Studio Code
- D - Installation and the First Project
- Create App
- App Major Files
- Run App
- E - Issues
- React Default Language: Angular use TypeScript
- Is React a compiled language
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
- Angular is a SPA Framework developed by Google after AngularJS. It is several steps ahead of Angular, and there is a strong community of developers using this framework. The framework is updated twice every year. The current version is Angular 15 (As of March 2023), and new features and fixes are frequently added to this framework.
- React is a JavaScript library for building user interfaces. It is maintained by Facebook, Instagram, and a community of individual developers and corporations. React uses a syntax extension for JavaScript named JSX, which is a mix of JS and HTML (a subset of HTML). Several companies use React with Redux (JavaScript library), which adds state management capabilities (with several other libraries) and lets developers create complex applications.
C. React Installation Prerequirements
There are only two requirements:
- Node.js: Run-Time Engine
- VS Code: Editor
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 with 9 million users.
![ES7+React/Redux/React-Native Snippets]()
- ESLint, with 29 million users.
![ESLint,]()
- Bajel JavaScript, with 2.5 million users.
![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
- NPM is a package manager used to install, delete, and update Javascript packages on your machine.
- NPX is a package executer, and it is used to execute javascript packages directly, without installing them.
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