Hello React

React is a JavaScript library for building a user interface that uses declarative programming to render processed data on the browser.

  • Use JSX to write react pages
    1. Need a real DOM as a ‘container’
    2. We need to introducereact.development.jsTo get the global objectReactAgain, the introduction ofreact-dom.development.jsTo get the global objectReactDOMTo manipulate the DOM
    3. Need to introducebabel.min.js, to explain JSX
    4. scriptthetypeNeed to go totext/babel
    5. Create the virtual DOM before using itrenderMethod renders it as a real DOM
<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello_react</title>
</head>
<body>
  <! -- Get the container ready -->
  <div id="test"></div>

  <! React core library -->
  <script src=".. /js/react.development.js"></script>
  <! React-dom is used to support the react operation.
  <script src=".. /js/react-dom.development.js"></script>
  <! -- Introduce Babel to convert JSX to JS -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">/* Be sure to write Babel */
    Create a virtual DOM
    const VDOM = <h1>Hello,  React</h1> /* Do not write quotes here, because it is not a string */

    // 2. Render the virtual DOM to the page
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>
</html>
Copy the code
  • Write the React page with pure JS
<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello_react</title>
</head>
<body>
  <! -- Get the container ready -->
  <div id="test"></div>

  <! React core library -->
  <script src=".. /js/react.development.js"></script>
  <! React-dom is used to support the react operation.
  <script src=".. /js/react-dom.development.js"></script>

  <script type="text/javascript">/* Be sure to write Babel */
    Create a virtual DOM
    const dom = React.createElement('h1', {
      id: 'title'
    }, React.createElement('span', {}, 'Hello, React'))

    // 2. Render the virtual DOM to the page
    ReactDOM.render(dom, document.getElementById('test'))
  </script>
</body>
</html>
Copy the code

Writing in JS is not parsed with Babel as compared to JSX, but creating a virtual DOM with createElement is more tedious, so JSX can simply be seen as a form of syntactic sugar

  • About the Virtual DOM

We can print both the virtual dom and the real DOM in the browser

console.log('virtual dom', dom)
console.log('real dom'.document.getElementById('test'))
Copy the code

It can be seen that the virtual DOM is a general object of object type in essence. The virtual DOM has fewer properties than the real DOM. Because the virtual DOM is used internally by React, there is no need to have too many properties.