在搭建后的react环境下进入src/index.js文件中写业务：

1.引入react & react-dom两个包

image.png

通过console.log我们发现reactdome自带了一个renderAPI，我们可以通过该api来传递并渲染：
语法：
ReactDom.render（jsx元素,注入点，回调）
eg:

image.png
效果如下：
image.png

添加多个元素语法（一定要有根元素包裹，不然报错）：

image.png

组件

react创建组件其实就是创建一个普通的类，但是必须要有继承。

语法：

class 组件名 extends React.Component{
constrctor(props){
super(props)
this.state={
本地状态}}
render(){
returen html/jsx
}
render -专门负责渲染render函数的UI，当别人试用这个组件的时候，render在虚拟dom中渲染
真实dom的渲染只有可能出现在reactdom,它是 浏览器主入口

tips:组件变量名和组件名首字母大写

eg:

tips:一定要有render和return

image.png

or

image.png

效果：

image.png

组件嵌套：

import React from 'react';
import ReactDom from 'react-dom';
let ele=<div>hello</div>;
class App extends React.Component{
render(){
return (<div>
<Header></Header>
<Wrap></Wrap>
<Footer></Footer>
</div>); }}
class Header extends React.Component{
render(){return (<div>这是header组件</div>)}}
class Wrap extends React.Component{
render(){return (<div>这是wrap组件</div>)}}
class Footer extends React.Component{
render() {return (<div>这是footer组件</div>); }}
ReactDom.render(
<App></App>,
document.querySelector('#root'));

效果：

image.png

props:

tips: json数据的传递

image.png

效果：

image.png

state:

es6

image.png

效果：

image.png

es7(不需要构造器)

image.png

state 特殊数据类型

tips：《转义输出》

<div dangerouslySetInnerHTML={{__html:this.state.strong}}> </div>

import React from 'react';
import ReactDom from 'react-dom';
class App extends React.Component{
state={
msg:"ok",
strong:'<strong>加粗</strong>' };
render(){
return (
<div>
<h3>{this.props.title}</h3>
<div dangerouslySetInnerHTML={{__html:this.state.strong}}>
</div>
</div>); }}
ReactDom.render(
<App/>,
document.querySelector('#root'));

效果：

image.png

定义实例方法：

image.png
image.png