React开发

1、在react学习中，需要安装两个包react react-dom

• react这个包是专门用来创建React组件、组件生命周期等这些东西的
• react-dom 里面主要封装了和DOM操作相关的包，要把组件渲染到页面上

2、安装

      指令：cnpm i react react-dom -S

      注意：- react这个包是专门用来创建React组件、组件生命周期等这些东西的

                - react-dom 里面主要封装了和DOM操作相关的包，要把组件渲染到页面上

      

3、导入包

  import React from "react";

import ReactDOM from "react-dom";

4、创建DOM元素

• 在react中，如果要创建DOM元素，只能使用React提供的JS API来创建，不能【直接像vue那样手写html元素
• 注意：React.createElement()方法，用于创建虚拟DOM对象，它接受3个及以上的参数

        参数一：是个字符串类型的参数，表示要创建的元素类型

        参数二：是一个属性对象，表示创建的这个元素上有哪些属性，该参数不接收字符串，而是需要传递一个原生的DOM对象

        参数三：从第三个参数的位置开始，后面可以放好多的虚拟DOM 对象，这些参数表示当前元素的子节点

<!-- 这是一个容器，将来使用react渲染的虚拟DOM都会放到这里-->

<div id="app"></div>

 

var myh1 = React.createElement("h1", null, "这是一个h1元素");

var myDiv = React.createElement(

  "div",

  { title: "this is a div", id: "mydiv" },

  "这是一个div",

  myh1

);

5、渲染

    注意：ReactDOM.render('要渲染的虚拟的DOM元素','要渲染到页面上的哪个位置');

ReactDOM.render(myDiv, document.getElementById("app"));