In a strict sense, React is Facebook's open front-end UI development framework, formed by React.js; ReactRenders: ReactDOM / ReactServer / ReactCanvas; Flux mode and its implementation (Redux, Fluxxor); React open source components; React Native and GraphQl + Relay.

Basic concepts in React

Let's first understand the basics in React. React.js is React's core library. The core library must be loaded into the application.

ReactDOM.js is React's DOM renderer. React detaches the core library from the renderer. To display the developed components on the web page, you must call the ReactDOM.render method. The first parameter is the React component, and the second parameter is For HTMLElement.
JSX is React's custom grammar, and eventually JSX will be converted to JS and run on the page.

Component is the central concept in React. All elements on the page are expressed through React components. Most of the React code we will write is doing React component development. The virtual DOM tree abstracted by React is the key to React's high performance. Also, it has one-way data flow: One-way reactive data flow makes the core design pattern of the React app, formed by a top-down data flow.
After understanding the basics, readers may start to have questions:

How is jsx syntax the same as HTML?

It looks the same, but the essential difference between jsx and HTML is that jsx writes xml tags directly to the function. Compared to other front-end frameworks, why is React unique and stands out?

First of all, because it has a Component Combination Mode, which is sometimes called part-whole mode. It hides the concepts of simple and complex elements in the tree structure. Client programs can handle complex elements in the same way as simple elements.

React is based on the composition model. Regardless of whether it is an application level, a form or a button, it is considered as a component, and then the entire application is built based on the combination of components. This structure has always been a web component that the front-end industry wants but doesn't get.

Another advantage is the unique combination of components in React. Based on the advantages of the combined model, it can create reusable components. This means that the Component development can form the company's component library, and individual business development can accumulate reusable components.

Also, React has no Barriers to Learning (view), as it naturally conforms to the HTML framework, and there are almost no barriers to learning for front-end developers.

It has a flexible architecture as the combined model is simple but effective, and can build simple pages and large front-end applications.

What does it mean to have a one-way data flow design?
We all know that Javascript is a scripting language. It cannot be compiled and positioned as a static language. If you want to clearly locate the error in your application, you must understand the business code in depth. For large front-end applications, the business code is large and complex and it is difficult to locate the error. However, React's one-way data flow design makes it easy to locate errors on the front end. The UI and page data are unique. We can locate the page display problem by locating the data changes.

The reason React can be designed this way is due to the Virtual DOM algorithm, which allows only the elements that need to be changed to be rendered again. Also, the current version of React.js has separated the source code into ReactDOM and React.js. This means that React can not only work on the web side, but also on the server side (nodejs) and the native side. At the same time, we can customize our own renderer to implement React rendering like Three.js, Pixi.js, and D3.js.

Web applications are the starting point for React. We can build applications from simple ones to large-scale e-commerce shopping websites through React. At the same time, in addition to being able to handle HTML, on the web side, we can also use React to perform data visualization, graphics visualization and even game development.

In addition to the web side, we can use the same jsx syntax to create IOS or Android applications, thanks to the open source React Native from Facebook. Based on React Native, we will be able to use jsx to implement a user interface with native application performance to run on iOS and Android. At the same time, we can also implement React-based desktop applications via NW.js or Electron.