Table Of Contents
Anyway, the Facebook company takes over this mission and developed the first version of React, which was already released in 2013.
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.
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.
Whatever, If you look at this image, you will see the following packages that would be installed in the node modules folder.
- React DOM
- React Scripts
- with many other 209 packages.
And displayed some commands to run your React app.
- 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.
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
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.