# 基础语法 ## 安装 使用`npm`来安装。需要安装 `react`和`react-dom`。 `react `这个包，是专门用来创建React组件、组件生命周期等这些东西的； `react-dom` 里面主要封装了和 DOM 操作相关的包，比如，要把 组件渲染到页面上。 ## 使用JS的创建虚拟DOM节点 >在 react 中，如要要创建 DOM 元素了，只能使用 React 提供的 JS API 来创建，不能【直接】像 Vue 中那样，手写 HTML 元素 ### 语法 > React.createElement() 方法，用于创建 虚拟DOM 对象，它接收 3个及以上的参数 > 参数1： 是个字符串类型的参数，表示要创建的元素类型 > 参数2： 是一个属性对象，表示 创建的这个元素上，有哪些属性 > 参数3： 从第三个参数的位置开始，后面可以放好多的虚拟DOM对象，这写参数，表示当前元素的子节点 举例： 创建一个html结构` <div title="this is a div" id="mydiv">这是一个div</div> `通过 React.createElement()来创建 ```js var myH1 = React.createElement('h1', null, '这是一个大大的H1') var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '这是一个div', myH1) ``` ### 注意 创建完毕的元素并不会直接显示到html元素中。使用 ReactDOM 把元素渲染到页面指定的容器中. ## ReactDOM >里面主要封装了和 DOM 操作相关的包，比如，要把 组件渲染到页面上或者卸载组件等等 ## 语法 `ReactDOM.render(虚拟DOM或组件,显示的位置)` ### 注意： ReactDOM.render() 方法的第二个参数，和vue不一样，不接受 "#app" 这样的字符串，而是需要传递一个 原生的 DOM 对象 举例： ``` ReactDOM.render(myDiv, document.getElementById('app'))``` ## 相关代码 <iframe width="100%" height="300" src="//jsrun.net/LFyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ``` import React from 'react' import ReactDOM from 'react-dom' var myH1 = React.createElement('h1', null, '这是一个大大的H1') var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '这是一个div', myH1) ReactDOM.render(myDiv, document.getElementById('app')) ``` ## 总结 `React.createElement(参数1，参数2，参数3) ` > 参数1： 是个字符串类型的参数，表示要创建的元素类型 > 参数2： 是一个属性对象，表示 创建的这个元素上，有哪些属性 > 参数3： 从第三个参数的位置开始，后面可以放好多的虚拟DOM对象，这写参数，表示当前元素的子节点 `ReactDOM.render(虚拟DOM或组件,显示的位置,回调函数)`