React study notes 1 hello React

This article is a study note I wrote when I was learning React. I will record and share it here. This is the first article, an introductory article, using React to write a hello React!

Getting started, use react to write a hello world

Use jsx to write hello world

First, we prepare the "container", a div with the ID test.

Then we use this to introduce the react library, which are the react core library, the react library that operates dom, and the babel library. The core library must be introduced before the library that operates dom, and the order cannot be reversed. The babel library is a library that converts jsx into js that the browser can understand.

Note that when writing the script double tag, change the type format to: "text/babel", which means it is written in babel format. We are writing jsx, otherwise it will be recognized as an ordinary js file, resulting in an error.

Then write an h1 double tag and write the content inside the tag. Be careful not to add quotes to make it a string. What we want to write is a DOM node.

Using ReactDOM.render (dom node name, container name), the dom node is the h1 double label we wrote before. We assigned it to the variable VDOM. We use the js native method document.getElementById('test') to get the container name. Fill in the two parameters to mount the dom node to the page.

code show as below:

<!-- 准备好容器 -->
<div id="test"></div>

<!-- 引入react库，以下依次为核心库，操作dom的库和babel（将jsx转为js的库），此顺序不可有错误 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">//写为babel格式，否则识别为普通js文件
        //1.创建虚拟dom
        const VDOM = <h1>Hello,Recat</h1>   //此处不可以写引号，此非字符串，而是虚拟dom
        //2.渲染dom到页面，就是根据虚拟dom生成真实dom
        ReactDOM.render(VDOM, document.getElementById('test'))//此api是将dom节点塞入容器中，所以第一个参数是dom名称，第二个是js原生方法拿取容器id
    </script>

The effect is as shown in the figure:

 

Use native js to copy the above code

 Use native js to write hello world. Because it is native js, we don't need to introduce the babel library, just the previous two libraries.

Write type="text/javascript" normally in the script double tag, indicating that the code is js.

Use React.createElement('label name', {label attribute'}, 'content'). This is react's own API to create dom nodes. The first parameter is the label name, such as h1, and the second parameter is the label attribute. It exists in the form of an object, such as {'id:title'}, and the third parameter is the label content.

Then use ReactDOM.render to mount the dom node to the page.

code show as below:

<!-- 准备好容器 -->
    <div id="test"></div>

<!-- 引入react库，以下依次为核心库，操作dom的库和babel（将jsx转为js的库），此顺序不可有错误 -->
    <!-- 在使用js创建虚拟dom的时候，我们不引入babel库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->

    <script type="text/javascript">
        //1.创建虚拟dom
        const VDOM = React.createElement('h1',{id:'title'},'Hello,Recat')   //此处是react自身的api，创建dom节点
        //2.渲染dom到页面，就是根据虚拟dom生成真实dom
        ReactDOM.render(VDOM, document.getElementById('test'))//此api是将dom节点塞入容器中，所以第一个参数是dom名称，第二个是js原生方法拿取容器id
    </script>

The effect is as follows:

 Label nesting situation

What will happen to Recat if we write a hello with an h1 tag nested in a span tag?

The same as the previous code, only the virtual dom part is changed. Let’s look at the jsx code first:

//1.创建虚拟dom
        const VDOM = <h1><span>Hello,Recat</span></h1>

The effect is as shown in the figure:

 What if we write like this in js native code?

//1.创建虚拟dom
        const VDOM = React.createElement('h1',{id:'title'},'<span>Hello,Recat</span>')

 The result is as follows, the span double tag will be rendered on the page as a string. Therefore, we still recommend using jsx to write code because it can better write DOM nodes.

 Therefore, a major feature of recat is that it is more convenient to create virtual dom. We can make some optimizations to the previous code and wrap the DOM node we created with parentheses to make it exactly the same as the DOM structure.

The code for jsx to create virtual dom is syntactic sugar for js to create virtual dom code.

code show as below:

const VDOM = (//此处不可以写引号，此非字符串，而是虚拟dom
     <h1>
         <span>Hello,Recat</span>
     </h1>
)