Getting Started with React: What is React?

React is the most beloved and growing library of existing front-end frameworks and libraries. Developers are bound to be sensitive to the trends. Because the popularity of technology affects communities and life expectancy.

The picture below shows the current status of downloading Npm for about 2 years. It can see that React is a top trend.

by npm trends

In this article, I’ll find out what React is, what characteristics have and how to start to React.

What is React?

React is a JavaScript library created by Facebook that has been consistently popular since its launch in 2013. Facebook is built on React, and it is also used by many Fortune 500 companies such as Airbnb, Uber, Netflix, and Instagram. React is also called React JS, React, React.js.

React is a library that focuses on the VIEW layer among the MVC(model–view–controller) patterns commonly used to create web applications. In other words, it is designed to create a UI that is shown to users and responds to various events such as clicking on them.

Features of React

React has various characteristics and advantages, and among them, let’s take a look at three representative characteristics.

• Virtual DOM

The biggest characteristic of React is Virtual DOM. React maximized the performance of web applications with Virtual DOM.

First of all, DOM stands for ‘Document Object Model’ and is a model that considers each HTML unit we use as an object. In other words, HTML components such as ‘body’ and ‘div’ are considered objects. Because these DOMs are tree-structured, when a programmer creates and executes a function that modifies an element, the rendering tree must be recreated. If this process occurs frequently, unnecessary operations continue, resulting in poor performance of the overall web service.

The concept that emerged to solve this problem of DOM is Virtual DOM. React uses Virtual DOM to create the same DOM as the DOM in memory, perform operations on the changes in the virtual, and renew the actual DOM to render all changes at once. In addition, Virtual DOM automatically identifies what has changed and what has not changed so that only the required DOM trees can be updated. It optimizes performance and speed because it minimizes actual operations.

• JSX

JSX is a mixture of JavaScript grammar and HTML tags, which make it possible to use JavaScript variables in HTML. React can use HTML tags in JavaScript through a grammar called JSX, and JavaScript variables can be called directly through the tag. This is not essential but is used primarily together for the intuitive use of code. In the code below, it is JSX that is similar to HTML in return().

React code using JSX

JSX allows developers to easily create components using familiar grammar.

• Component-based

The component can be thought of as an independent view unit that constitutes the UI. React uses each of these components to construct the UI, just as a finished product is created through assemble multiple parts. At this time, the biggest feature is that one component can be reused.

For example, if a single button is needed on multiple pages, you can create a button component and use it where it is needed. These features complement each element’s change-sensitive and complex work processes, increasing productivity and maintenance.

React also uses declarative paradigms to increase productivity and has the flexibility and freedom to use with a variety of other libraries.

Getting Started with React

Let’s start the React and find out how to set it up!

This is a video containing all instructions for installing and starting to React.

1. Install Node.js.
   First, search Node.js. on Google and install the latest version for your computer. I recommend you to download a new version because the old version can cause many errors.
2. Install Visual Studio Code editor.
   It doesn’t matter which editor you use other than this. However, I will use Visual Studio Code which is easy to use the terminal.
3. Create a working folder.
4. Open the Editor and open the Tasks folder you created.
   In File - Open Folder. Then the name of the work folder appears at the top of the left sidebar. We’ll create a react project here.
5. Open the Terminal.
   You can create a window by pulling up the screen at the bottom, and you can open the window using New Terminal in the top menu. When youopen the terminal, you have to make sure that my location is correct.
6. Creating a project through the npx create-react-app [projectname] command.
   npx is a command that helps you install the library, which is available to anyone if NodeJS is installed. create-react-app is a library name that allows you to install a project at once. If you press Enter, checking the green Success word means that the installation is complete.
7. Re-open a new subfolder of the installed project name.
   At the end of the installation, the folder must have contained all the files needed for the project.
8. A preview window can be opened by typing npm start in the terminal.
   Where npm is a tool that automatically follows when Node.JS is installed.
   npm start connects open servers to show live servers in real-time. You can check my code in real-time through this Chrome browser.
9. You can start coding from now on.

VS Code running React and Real-Time Preview Window

Inside the React Project folder, there are…

• Node-Modules
  Collection of all user-installed libraries. A number of libraries are needed to run this create-react-app, which is a collection of those used.
• Public
  As an archive of static files on the website, which are not dynamically changed well.
• src
  As a source code locker. Practical coding is done here.
• Package.json file
  A file that shows all the library names and versions that I installed. Its contents are automatically added and recorded each time a library is installed in npm.