1.安装脚手架工具
npm install -g create-react-app / cnpm install -g create-react-app
2.创建项目
create-react-app 项目名
切换到项目目录 npm run start 启动项目
JSX元素对象只可以有一个根节点 （类似VUE）
渲染过程 为 ReactDOM.render(模板,根节点)
优点：
1.JSX执行更快，编译为JS代码进行优化
２.类型更安全，编译过程如果出错不再编译，及时发现错误
3.JSX编写更加简单快捷(不和VUE比)
注意:
1.JSX 必须有根节点
2.正常的普通的HTML元素要小写，如果大写，默认为组件
1.由HTML元素构成
2.中间如果需要插入变量用 {}
3.{ }之间可以用表达式
4.{ }中间表达式可以混合使用JSX对象
5.属性和HTML内容一样用()来插入内容
1.class中不能合并多个class属性
l例：class =' abc' class ='active'
2.只能使用JSX对象的新形式 {} 添加样式 不能通过"样式"方式添加
3.style样式中，如存在多个单词的属性组合，第二个单词开始，首字母大写（驼峰命名法） 或 使用引号
例:backGroundColor borderBottom
4.多个类共存的操作
<h1 className= { "abc" + classStr(JSX对象，设置的类名样式) }> helloword </h1>
或使用拼接字符串的形式
let classStr = [ ' abc' , ' reg' ].join(" ")
<h1 className= { classStr }> helloword </h1>
1.函数式组件
function 组件名() {
return( //模板内容 )
}
2.类式组件
class 组件名 extends Recat.component {
consturtor( props ){
super( props) }
render() { // 要渲染的模块 }
}
//传递参数的过程为 渲染时 < 组件名 参数名 = ' 值 '>
3.混合型组件
可在渲染过程中渲染其他组件
函数式组件和类组件的区别：
函数式组件 比较简单，一般用于静态没有交互事件内容的组件页面
类组件 一般称为动态组件，一般用在有交互或者数据有修改的操作
class 组件名 extends Recat.component {
consturtor( props ){
super( props)
this.State={ 值名：值 }
this.交互方法名 = this.交互方法名.bind(this) //定义后方法必须更改this指向 才能使用
//或使用箭头函数的形式
}
//可声明一些交互方法 但注意声明后 要对定义后的交互方法 进行 this指向的更改
render() { // 要渲染的模块 }
交互方法 =() => { }
}
修改State中的数据
componentDidMount( ) { //生命周期函数 组件渲染完成时的函数
this.setState{ 值名 : 值}
}
使用State去控制子元素props的从而达到父元素数据传递给子元素
字传父的过程为
父组件定义方法 方法携带setState数据 通过渲染时传递方法
子组件通过this.props.方法名 接收方法 并将要传递的值 赋值给父组件传递过来的方法
特点：
1.React事件 绑定事件命名：采用驼峰命名法(第二个单词开始首字母大写) 原生写法:小写
2.{ this.函数名 }传入一个函数 原生写法: “ ” 事件方法通过字符串进行绑定
React事件对象
React返回的事件对象是代理的原生的事件对象，如果想查看事件对象的具体值，必须输出具体事件对象的属性
原生：阻止默认行为时，可以直接返回 return false
React中，阻止默认行为必须采用 e.preventDefault()
使用ES6箭头函数传递多个参数
< button onClick = { (e )=>{ this.函数名 ( ' 参数值' ,'参数值',事件对象e )}}>
//通过ES6箭头函数(外部this) 调用函数携带参数 接收时对应参数即可
使用匿名函数传递多个参数
< button onClick = { function(e){ this.函数名 ( ' 参数值' ,'参数值',事件对象e )}.bind(this)}>
//使用匿名函数 通过匿名函数声明 传递多个值并指定this指向
1.直接通过条件运算返回要渲染的JSX对象 (if..else,三元运算符)
2.通过条件运算得出JSX对象，再将JSX对象渲染到模板中
具体实现:
将列表内容拼装成数组放置到模板中
将数据拼装成JSX数组对象 例:[ <li>xx</li>, <li>xx</li>, <li>xx</li>]
1.可以使用数组 map方法 循环遍历数组，对每一项数据按照JSX的形式进行加工，最终得到1个每一项都是JSX对象的数组，在将数组渲染到模板中 key值需要放置到每一项中 即li中
例：
如 渲染过程复杂 ，可通过封装函数 进行调用 但是要记住 key键建立在函数中
2.可以根据for循环 遍历数组长度，将遍历好整理好的JSX对象进行新数组的组合，然后进行渲染
