What is React?

A JavaScript library for building user interfaces: react.docschina.org/

  • Unlike Vue, React is a JS library for building UI pages
  • The characteristics of

    1. Declarative design −React uses the declarative paradigm to describe applications.

    2. Componentized development

    3. JSX is an extension of JavaScript syntax. React development does not necessarily use JSX, but it is recommended to use JSX for more intuitive purposes.

React

throughscriptThe introduction of

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
Copy the code

  • React. js – Core code

  • React – dom.js-react is a part of dom manipulation that allows you to mount a component to a DOM node

  • render

render(Vnode,container[,callback])

  1. Vnode: Content to render, either a numeric string or a ReactNode
  2. Container: The content to hang on (which element to render the content into)
  3. Callback is the callback after rendering
<div id="div"></div>

ReactDom.render(
    "Hello React",
    document.querySelector("#div)
)    
Copy the code
  • ReactElement – Virtual Dom(representing a real Dom with an object)

createElement(type,props,chldren)

CreateElement ("div") console.dir(box) let header = react. createElement("header",{id:"header") }," header") <header id="header"> </header> let h1 = React. CreateElement ("h1",null," this is the header") let p = React.createElement("p",null," this is a paragraph ") let header = react. createElement("header",{id:"header"},h1,p React.createElement("header",{ id:"header" },[h1,p])Copy the code

JSX

Let header = <header> <h1> This is the title </h1> <p> this is the subtitle </p> </header>Copy the code