Author: Lu Wenzhe, Tencent Cloud UI engineer

Guide language | when the React first red, always feel JSX design is unique, belong to the revolutionary innovation, its performance is superior, code logic is very simple, so, the attention of many developers and use, that it may be the mainstream of future Web development tools.

React started as an internal project at Facebook, where the company was unhappy with the existing JavaScript MVC framework and decided to build its own for Instagram. Once it was developed, it worked so well that it opened source in May 2013.

So what’s the React advantage?


First of all: When the state of the DOM tree needs to change, the virtual DOM mechanism will compare the DOM tree before and after the same Event loop. If there are differences between the two DOM trees, React will only modify the DOM in response to these differences. To achieve the most efficient DOM manipulation and rendering.

For example, if we change the binding state of some nodes or UI components in the DOM tree, React will immediately mark it as “dirty”. At the end of an Event loop, React will calculate what needs to be changed in the DOM tree and its final state. And only re-render them once and for all.

The benefit is obvious. Instead of re-rendering the component every time the state of the component is changed, a calculation is performed after the Event loop ends to reduce redundant DOM operations. React also makes new renderers only where changes are needed, rather than re-rendering the entire DOM tree, which is naturally efficient.

Second: Components can be nested, and they can be stenciled — in React, “components” are typically UI modules that can be encapsulated and reused, which can be understood as “parts of the DOM with fine-grained UI functionality.” We can then nest these components together, with dependencies between them.

As for modularity, similar to EJS can be referenced as an independent module to the page reuse, it can directly use UI components as script modules, can cooperate with CommonJS, AMD, CMD and other specifications to require the required component modules, and deal with their dependencies.

React is naturally popular with some developers based on these two factors. But before we do that, two things need to be clear:

React is a pure View layer. It is not good at dealing with dynamic data, so it is different from and cannot replace conventional frameworks.

2. React is good at dealing with componentized pages. The form of building components on the page is a bit like building blocks, so project requirements using React are generally used for interface componentization.

To put it simply, the React component should have the following characteristics:


(1) Composeable: a component is easy to use with other components, or nested within another component. If a component creates another component internally, then the parent component owns the child component it creates. By this feature, a complex UI can be split into multiple simple UI components.

(2) Reusable: Each component is uniquely functional and can be used in multiple UI scenarios.

Maintainable: Each small component contains only its own logic and is easier to understand and maintain;

Componentization has always been a powerful tool in web development, and many developers want to maximize the reuse of components developed in the past and avoid reinventing the wheel. Components are everything in React, and front-end development can take a bit of a mind-set change, especially since we used to keep HTML, CSS, and JavaScript separate and now wrap them all together.

There are two main ways to write React Components:

1. Use the ES6 Class

Class MyComponent extends React.Component {// Class MyComponent extends React.Component {// Class MyComponent extends React.Component {// Class MyComponent extends React.Component {// Class MyComponent extends React.Component {//  <div>Hello, World! </div> ); Reactdom.render (<MyComponent/>, document.getelementById ('app')));Copy the code

2. Write in Functional Component

// Use arrow Function to design Functional Component for easier UI design, Const MyComponent = () => (<div>Hello, World! </div> ); Reactdom.render (<MyComponent/>, document.getelementById ('app')); // Insert <MyComponent/> into the DOM element with id app.Copy the code

React has its own JSX syntax. What is JSX?

JSX provides XML-like extensions based on ECMAScript. JSX is a bit like HTML, but there are some differences. For example, the class attribute in HTML is className in JSX. For other things, you can check out FB’s HTML Tags vs. React Components article.

But since browsers don’t support JSX natively, we need to compile it to JS, and there are many ways to do this, which we’ll cover later. In addition, Babel can also compile JSX to JS.

Some references:

  1. JSX in depth
  2. Online JSX compiler
  3. Babel: How to use the react transformer

In general, JSX is usually used in two ways:

1. Use CommonJS Bundler such as Browserify or WebPack and integrate Babel preprocessing

2. Parse on the browser

Please note the syntax of JSX:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React! </title> <! Add react.js to index.html React-dom.js and babel-core browser.min.js --> <script SRC = "https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js" > < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js" > < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" > < / script > < / head > < body > < div Id ="example"></div> <script type="text/ Babel "> ReactDOM.render( <h1>Hello, world! </h1>, document.getElementById('example') ); </script> </body> </html>Copy the code

The general loading mode of JSX is:

embedded

<script type="text/babel"> ReactDOM.render( <h1>Hello, world! </h1>, document.getElementById('example') ); </script>Copy the code

Bring in from outside

  <script type=”text/jsx” src=”main.jsx”></script>   

Summary: The above is my brief understanding of React, including the advantages of React, componentalization features, methods of React Component, why JSX is used in React, basic concepts and usage of JSX. In React, all things are based on components. Resources related to the same Component are usually grouped together. When writing React Components, we often use JSX to improve writing efficiency. JSX is an XML-like extension of the ECMAScript syntax that takes advantage of the power of JavaScript without the crappy template language. Of course, JSX is not mandatory, and you can choose not to, because eventually JSX content will be converted to JavaScript.

That’s how you get started with React.