一、在手动搭建webpack的情况下安装 react环境
①、先完成webpack安装
②、在文件夹路径下安装 cnpm i react react-dom
③、在新建的index.html中写dom元素 用于被index.js获取到对应
的dom元素进行渲染
index.html
<body>
<div id="root">hahah</div>
</body>
④、写index.js 这里模拟了 v-text v-html v-show v-if v-bind v-for
index.js
import React from "react"; //引入react框架
import ReactDom from "react-dom" //操作虚拟dom 操作jsx
//let name="张尚然" //这是模仿v-text
//let p = <p>这是一个p标签 在dom中也以p标签的形式显示出来</p> //这是模仿 v-html
//let dom = <h1>{name}{p}</h1> /*将变量中的值渲染到dom中*/
let flag = true;
let message = "这是一个被显示出来的元素"
//let dom = <h2 style={{display:flag?"block":"none"}}>{message}</h2> // 这是模仿 v-show {}用于解析数据 {{}}用于存放对象
let dom = flag?<h1>{message}</h1>:""; //这是模仿 v-if
//let message = "你好呀"
//let dom =<h2 title={message}>你好</h2> //这是模仿v-bind
//let arr=[<li>10</li>,<li>20</li>,<p>30</p>] //这是模仿v-for 可以在数组中写标签
//let dom = arr
//let arr=[10,20,30]
//let dom = arr.map((item,index)=>{
return <li key={index}>{item}</li> //key的作用是表示唯一性,不写会报错但不影响使用
})
//let dom = <h2 className="box">111</h2> //class类名需要写成className
let dom = <div htmlFor="haha">aaa</div> //标签中的for需要写成htmlFor
/*ReactDom.render含有三个参数：
第一个参数 ：需要渲染的虚拟dom结构，
第二个参数 ：这个虚拟dom将要被挂载到的指定位置，
第三个参数 ： 成功后执行的回调函数 （也可以不写）
*/
ReactDom.render(
dom,
document.querySelector("#root"),
()=>{
console.log("渲染成功")
}
)
二、react中组件的创建及使用
①在src文件夹中新建一个APP.js（这就是一个组件）
②利用es6的构造函数的继承方式写组件
App.js
import React,{Component} from "react" //这种写法是解构赋值
console.log(React)
class App extends Component{ //这是es6的构造函数的继承写法 App组件需要继承React.Component 其中Component是React对象上的一个方法，Component是react中所有组件的父类，如果我们要写一个组件的话必须从这个父类身上去继承他的属性
constructor(){ //用于初始化的
super(); //用于继承父类的属性和方法，必须要写，不写的话会报错，而且this的指向会发生错误
this.state={
message:"react",
inputVal:"123"
}
}
//渲染虚拟dom
render(){ //render中必须要有一个返回值 ，返回值是一个jsx的语法，其实也就是一个虚拟dom
return ( //return 只能return出一个根元素，也就是说其他的内容要写在最大的div中
<div>
<h1>{this.state.message}</h1>
<button onClick={this.handelClick.bind(this)}>点击</button> /* 第一个this指向App,第二个this是改变handelClick的this指向,让这个this指向App,bind改变的是当前函数的this指向*/
<input type="text" value={this.state.inputVal} onChange={this.handelChange.bind(this)}/>
<p>{this.state.inputVal}</p>
</div>
)
}
handelChange(e){
console.log(e) //e代表事件对象，其中有target属性
let val = e.target.value //双向数据绑定
this.setState({
inputVal:val
})
}
handelClick(){
//console.log(this) //这里的this在没有bind改变指向之前是undifined，因为render中的标签都是虚拟dom
this.setState({ //如果要修改数据则必须使用 this.setState
message:'33333'
},()=>{
console.log("这是正在执行一个回调函数，判断数据是否修改成功")
})
}
}
export default App
总结：
constructor 作用：
初始化
当前生命周期函数可以用来定义当前组件所需要的状态
通过this.state = {} 来进行定义当前组件所需要的状态(属性)
react当中如果需要修改数据则需要调用this.setState()进行数据的修改，它是一个异步的方法
this.setState方法有2个参数
第一个参数是对象(需要修改的值)
第二个参数是一个回调函数 作用是：可以查看数据是否修改成功 还可以在当前函数中获取到最新的DOM结构
render函数：
只要this.state发生改变了 那么render函数就会执行
三、todoList的写法
App.js
import React,{Component} from "react"
console.log(React)
class App extends Component{
constructor(){
super();
this.state={
inputVal:"111",
todoList:[]
}
this.handelChange=this.handelChange.bind(this) //放在全局中，防止render渲染的时候反复执行改变this的操作，如果bind需要传参则需要写在render中
this.handelAdd = this.handelAdd.bind(this)
}
render(){
let {inputVal,todoList} = this.state //解构赋值
return (
<div>
<input type="text" value={inputVal} onChange={this.handelChange}/>
<button onClick={this.handelAdd}>添加</button>
<ul>
{//{}是放表达式的
todoList.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
}
handelChange(e){
//e代表事件对象，其中有target属性
let val = e.target.value //双向数据绑定
this.setState({
inputVal:val
})
}
handelAdd(){
this.setState({
todoList:[...this.state.todoList,this.state.inputVal], //解构赋值，这里是实现拼接todoList和inputVal
inputVal:""
},()=>{
console.log(this.state.todoList)
})
}
}
export default App
四、知识点总结
（1）jsx的解释
JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。
（2）jsx的基本语法
①定义标签时，只允许被一个标签包裹。标签一定要闭合。 //也就是类似于vue的template模板中所有标签都被一个大的div包裹起来
②小写首字母对应 DOM 元素
大写首字母对应组件元素
注释使用js注释方法
③ class 属性改为 className
for 属性改为 htmlFor
Boolean 属性：省略 Boolean 属性值会导致 JSX 认为 bool 值设为了 true
④ JavaScript 属性表达式中的 属性值如果需要使用表达式，只要用 {} 替换 “” 即可
例如：<input type="text" value={val ? val : ""} />
⑤ HTML 转义
React 会将所有要显示到 DOM 的字符串转义，防止 XSS。
后台传过来的数据带页面标签的是不能直接转义的，具体转义的写法如下：
var content='<strong>content</strong>';
React.render(
<div dangerouslySetInnerHTML={{__html: content}}></div>,
document.body
);
（3）ReactDom.render 用于渲染dom元素
ReactDom.render含有三个参数：
第一个参数 ：需要渲染的虚拟dom结构，
第二个参数 ：这个虚拟dom将要被挂载到的指定位置，
第三个参数 ： 成功后执行的回调函数 （也可以不写）
（4）React.createClass 用于声明组件