Introduction, features, installation and basic usage process of React framework

1. Introduction to react

Official website: React (docschina.org)

react is a js framework developed and maintained by the facebook front-end development team

The implementation function of react is similar to VUE. However, due to foreign development styles, the steps of data rendering are not encapsulated in react. Developers need to use more es6 syntax to manually complete data rendering. Therefore, the code is more difficult than VUE. high.

2. Advantages and disadvantages of react

advantage:

1. Everything is a component: Almost all development in React is done using components. Benefits: Improve code reusability and maintainability.

2. Fast: virtual DOM mechanism (virtual DOM) is provided in react

3. Cross-browser compatibility: Using virtual DOM in react does not directly parse the real DOM, which solves the problem of cross-domain browser compatibility and can even be used in IE8.

4. Isomorphism, pure JavaScript: Almost all projects are developed using JavaScript

5. One-way data flow: React provides two architectures: flux and redux to build one-way data flow.

shortcoming:

1. Not a complete framework

2. React is at most considered the V layer (view layer) in MVC, and generally needs to be combined with reactRouter and redux to build a complete project.

3. Installation and use of react

cdn: Enter the official website and click in the order of the pictures

After that, an html document will appear, which is the basic usage document for react. You can right-click the mouse and select Save As to save to your desktop (or any folder).

The red box circled is the react online cdn link , which cannot be used without internet connection. You can also copy the content in the red box and open it on a new page, and save all the code locally.

Open this html file with vscode and you will see the following effect

The entire html code at this time is (annotations are for my personal understanding)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>     <!-- 声明需要渲染的区域  -->
    <script type="text/babel">
    
      function MyApp() {
        return <h1>Hello, world!</h1>;
      }

      const container = document.getElementById('root');  // 捕获渲染区域
      const root = ReactDOM.createRoot(container);  //创建DOM元素
      root.render(<MyApp />);  //将DOM元素渲染到渲染区域当中

    </script>
  </body>
</html>

npm

npm init -y //Initialize package.json

npm i react react-dom -S