Welcome toTencent Cloud + community, get more Tencent mass technology practice dry goods oh ~

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:

  1. React is a pure View layer that doesn’t work well with dynamic data, so it’s different from, and doesn’t replace, conventional frameworks;

  2. React is good at componentizing pages. Building components on pages is a bit like building blocks, so project requirements using React are routinely componentized.

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 {// Render is the only required method of a class based element.render() {
		return( <div>Hello, World! </div> ); Reactdom.render (<MyComponent/>, document.getelementbyId (<MyComponent/>, document.getelementById ('app'));
Copy the code

2. Write in Functional Component

/ / use the arrowfunctionConst MyComponent = () => (<div>Hello, World! </div> ); Reactdom.render (<MyComponent/>, document.getelementbyId (<MyComponent/>, document.getelementById ('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> <! -- Load index.html with browser.min.js, react-dom.js and babel-core --> <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"> // Write the code here! 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

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.

Question and answer

How to convert from jQuery to react.js?

reading

Introduction of front-end ReactJS technology

Drill down into the React component lifecycle

ReactNative layout style summary

Has been authorized by the author tencent cloud + community release, the original link: https://cloud.tencent.com/developer/article/1143281?fromSource=waitui

Welcome toTencent Cloud + communityOr pay attention to the wechat public account (QcloudCommunity), the first time to get more massive technical practice dry goods oh ~