一． 初识react [逆战(●’◡’●)]
React的官网：https://reactjs.org/
1. react的定义
react是用于构建用户界面的javascript库
相当于mvc的view层
但仍然是数据驱动，数据更新，视图也会改变
2. react的起源
（1） react是由facebook团队开发
（2） 在国际使用较广
（3） 文档地址:
中文文档：https://react.docschina.org/
GitHub地址：https://github.com/facebook/react/
1.
3. react的特点
（1） 声明式
（2） 组件化：
由组件构成复杂的界面，通过js编写的组件可以更好的传递数据，将应用状态和DOM拆分开来
（3） 一次学习，随处编写
二． React环境搭建
1．使用方式
（1） 第一种：使用script引入相关的js文件
（2） 第二种：使用react的脚手架
2．通过script引入相关js搭建react环境
第一步安装：
○1初始化：npm init –y
○2.安装核心包：npm I react或yarn add react
○3.安装react用于web开发的包：npm i react-dom或yarn add reeact-dom
○4.es5转es6，解析jsx的包：npm i babel-standalone
2. 第二步，引入其中所需要的js文件
○1.项目下建一个js文件夹
○2.找到node_modules下的三个js文件：
react文件夹下的umd下的react.development.js
react-dom文件夹下umd下的react-dom.development.js
babel-standalone文件夹下umd下的babel.js
○3.将这三个js文件复制进自己建立的js文件夹
○4.html引入这三个js文件，就搭建好react环境了
3. 第三步，script标签必须为 type=“text/babel”
<script type="text/babel"> </script>
4. 一个基本的react实例
<!DOCTYPE html>
2) <html lang="en">
3) <head>
4) <meta charset="UTF-8">
5) <meta name="viewport" content="width=device-width, initial-scale=1.0">
6) <meta http-equiv="X-UA-Compatible" content="ie=edge">
7) <title>Document</title>
8) <script src="./js/react.development.js"></script>
9) <script src="./js/react-dom.development.js"></script>
10) <script src="./js/babel.js"></script>
11) </head>
12)
13) <body>
14) <div id="box"></div>
15) <script type="text/babel">
16) console.log(ReactDOM);
17) var a = <h2>hello world</h2>
18) ReactDOM.render(a,
19) document.getElementById("box"))
20) </script>
21) </body>
22)
23) </html>
5. 实例分析说明：
○1 ReactDOM.render()方法用于将组件挂载到DOM节点上
○2. ReactDOM.render()接受两个参数
参数1：要挂载的内容（即template模板）
参数2：要挂载的节点
○3.对于挂载内容，同vue一样，最外层只能有一个标签
○4.html+js的写法，我们称之为jsx语法，前提是script标签的type值为text/babel
3．通过脚手架搭建react环境
使用的是webpack
- 第一步安装：
○1全局安装脚手架：npm i –g create-react-app
○2.查看版本号：create-react-app –version - 创建一个项目：
create-react-app 项目名 - 启动一个项目：
yarn start或者npm run start
三． React的jsx语法
记住jsx语法必须是script标签的type值为text/babel
1. 什么是jsx？
Html/xml+js混写的写法我们称之为jsx语法
是javascript的扩展
是一种语法糖
可以作为单独的js文件
2. Jsx语法
（1） Jsx中所有的js表达式写在{}中
可以写表达式，但是不能写语句和流程控制
不能同时写多个字段数据
○1可以直接渲染数字和字符串
○2.数组直接渲染，转成字符串拼接
○3.函数渲染的是其返回值，可以渲染函数调用后的结果{a()}
○4.不能直接渲染对象！但是可以渲染对象里的内容obj.key
（2） Jsx中写style样式
React推荐内联样式，是使用一个对象来设置内联样式
style={}
○1可以先在外设置一个样式对象，然后给style={styleobj}
○2.直接用键值对形式，记住键值对为js语句，需要用{}包裹style={{key:value,}}
（3） jsx的class要改为className
因为class是关键字
（4） 绑定事件，事件名需要首字母大写onXxx={}
（5） for属性需要写成htmlFor
（6） 遍历数组时，需要加key属性标识每一个元素标签
可以使用id标识
用index标识，性能会变差，可能引起组件状态的问题，因为数组的删除添加会导致index的变化
通常使用数组的map方法进行映射，返回需要的标签，记得return
（7） 遍历对象：先把对象转为数组，再进行遍历
因为jsx不能直接渲染对象
对象转数组的方法
○1Object.keys //返回对象所有的key值组成的数组
○2.Object.values //返回对象所有的value值组成的数组
○3.Object.entries //返回对象所有的键值对组成的数组
项目步骤
npx create-react-app react-app
cnpm run eject 抽离配置文件
依赖cnpm i react-router-dom -S
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
