In this tutorial, you will understand what react is, and you will create your first app. We can define React as a JavaScript library to build usable user interfaces.

React Introduction

The React library is an open-source designed by Jordan Walke who was working at Facebook as a software engineer. The basic idea for React was to create only HTML components for the UI by the JavaScript language.

Anyway, the Facebook company takes over this mission and developed the first version of React, which was already released in 2013.

Currently, React became the famous JavaScript library that can be used in the MVC (Model, View, and Controller). To build nice user interfaces.

In the next section, I am going to expose the features of React and how it does work. Let’s dive right in.

Understanding How React Works

Facebook was already designed by the PHP programming language, which is sending the final results into the web browser.

And that can be done by the Zend Engine interpreter. Once the browser is received the data, it is working with the browser DOM elements. But Facebook developers discovered a slow interaction during getting the data from the PHP server to the DOM elements.

Which represents the data structure according to the browser DOM elements. When they were tracking the data process. They found a big time was lost in representing a tree of DOM elements.

In 2011, Jordan Walke started his new software to solve this problem. And the idea was to do a virtual DOM instead of the browser DOM which is the React heart.

This virtual DOM is a tree to represent the HTML tree through the JavaScript code called React.js. And that can be done using a file ended by JSX extension. You can compile it using the command line interface.

Anyway, when the browser needs to read or update its DOM elements, React takes over. And its mission is to update these elements that already matched the virtual DOM elements in react.js.

React.js has many features such as:

  • It can be used to create a website.
  • Easily create a single web page.
  • It is a Virtual Document Object Model (Virtual DOM).
  • Works with a debugging mode.
  • It has many extensions like NodeJS modules. 
  • It works with data binding.
  • Model View Controller.

In the next section, I am going to write an application with react.js.

Write Your First App with React

Before getting started, you need to install a modern version of node.js on your local machine.

Whatever, to install it use the down below command. But before doing that, make sure that you have already installed node.js.

npx create-react-app [react folder name]

Once you run, the previous command line. You have to wait for moments while the folder is being downloaded.

Install React

Whatever, If you look at this image, you will see the following packages that would be installed in the node modules folder.

  • React
  • React DOM
  • React Scripts
  • with many other 209 packages.

And displayed some commands to run your React app.

So when you open the project folder, you will find 2 files (package-lock, package.json). And 3 folders else like the below list.

  • The “node_modules” folder.
  • The “src” folder contains jsx, CSS, and so many others
  • the “public” folder displays the compiled file in the public access.

All of these files are webpack that allow you to compile JavaScript, CSS, and so many others into the public folder.

Don’t worry about the contents of these files because we will explain the tasks of each one in the next tutorial, we just need to focus on how to create your first react app.

Anyway, before getting started, you have to learn more about Node NPM.

Let’s start the React application with the following command.

npm run start

Once you run this React app through the previous NPM command, it will open the browser with this URL http://localhost:3000/.

React on Localhost

In the next tutorial, we need to learn about each part inside the React files, according to this app.

Stay tuned for my next tutorials.