react

React基本概念

用于构建用户界面的 JavaScript 库

官方文档：
	英文版:https://reactjs.org/
	中文版:https://doc.react-china.org/

使用脚手架快速创建React项目

 1. 全局安装一个react的脚手架(create-react-app)
   npm i create-react-app -g
   cnpm i create-react-app -g
 2. 使用create-react-app 脚手架来创建react项目
 	create-react-app my-app   
 				执行创建命令后会创建一个my-app的文件夹
 				my-app文件夹里面会初始化一些项目基本的文件
 				初始化一个package.json
 				会自动安装package.json里面的依赖包（由于网络原因npm可能有一些包下载不下来就报错）

React基本语法 核心的语法

1. 了解JSX的概念： javascript and XML  React中有特定的语法可以在React的代码里面写HTML等标签代码 jsx
2. React的页面渲染 React能够渲染所有html标签 使用React.render(要渲染的标签,渲染的位置html的页面容器id="root")
3. 组件和组件的属性  如何在React中使用组件 定义组件 给组件传入参数 接收参数
4. 组件的状态(组件的状态类似组件内部全局变量)已经生命周期函数（vue钩子函数）执行React代码的时候先后运行哪些运行
5. React的事件处理  添加事件 在事件的回调函数里面做事情
6. 条件渲染

JSX语法

1. 在JS中可以直接写标签代码 而不需要用双引号包起来
2. 但是标签里面的属性和以前有的区别
		1. 类名 给标签添加一个类名 className="类"  传统的html class="类名"
		   因为ES6里面class是关键字用来定义一个类

React的页面渲染

1. 得准备一个页面 静态模板页面 vue的 template.html是一样
2. 页面里面一定要有一个 容器有id = "root"
3. 是React渲染页面的方式来渲染页面
	第一个参数就是要渲染的结构 可以是一个变量 也可以是一个组件 也可以是一个标签
	第二个参数就是页面容器的的元素 可以通过id来获取该元素
	ReactDOM.render(<h1>Hello, world1111</h1>, document.getElementById('root'));
	如果使用HTML5获取元素的方式也可以但是要传入选择器
	ReactDOM.render(<h1>Hello, world1111</h1>, document.querySelector('#root'));
4. render方法只会渲染一次 如果要实现实时刷新的渲染要每次调用render实现实时刷新
5. 如果需要实时刷新的页面元素 不断更新内容 每次更新了都要重新渲染一次 重新调用render函数
		setInterval(function () {
			i++;
			element = <h1>{i}</h1>;	
			ReactDOM.render(element, document.querySelector('#root'));
		},1000);
6. 有于React的单向数据流 数据发生了变化 视图并不会变化 只有当你重复调用render函数才会刷新页面 如果要实现动态渲染页面 渲染视图声明周期的函数 在生命周期函数里面 帮你检查数据发生了变化 更新内容状态来实现页面渲染

react中的表达式

1. 在react的jsx的标签中 如果要展示一些非字符串类型的数据 使用表达式的方式来展示
	<h1>{i}</h1>
	<h1>{[1,2,3,4]}</h1>
	<h1>{obj.name}</h1>
	<h1>{1+1}</h1>
	<h1>{fun()}</h1>

2. 支持在页面中显示各种类型的数据 如果非字符串数据使用表达式 固定语法{} 		只能写一个大括号

React组件

1. 什么是组件: component  组合在一起的控件就叫组件 有很多元素组合在一起有一个特定的效果 轮播图组件 tab栏组件 导航栏组件 下拉菜单组件 
2. react中如何使用一个组件
		1. 在src文件夹里面创建一个components文件夹 这个文件夹就是用来存放react的组件
		2. 在components文件夹里面创建对应的组件的文件夹 tabs就是tab栏组件的文件夹
		3. 在tabs文件夹里面创建一个js文件 tabs.js tabs.js文件夹就是当前tab栏组件的文件（写组件代码的文件）
3. 如何去创建一个组件

	1. 在组件的代码文件里面去使用创建组件的方式
			1. 使用函数的方式创建一个组件 （创建出来的组件默认只能在当前文件里面使用）
				组件和普通的函数不一样 差别在返回值
				函数可以没有返回值 但是组件必须有返回值 返回值必须是一个标签（一个标签的形式返回）
				创建组件名称首字母必须大写
				在当前组件的文件去导入React
				function Tabs() {
					return <div>我是tab栏组件</div>;
				}
			2. 组件定义后只能在当前文件去使用 如果想要给别的文件使用 就要导出  并且使用的时候还要导入
					1. 给别的文件的组件去进行导出组件
					2. 在当前需要使用组件的文件去导入这个组件 指定组件文件路径
					3. 注意点 组件必须放到逻辑代码的前面去导入
	2. 组件创建的步骤
			1. 创建一个组件的文件 js文件 以组件名来命名文件一般会用大写
				./src/components/Tabs/Tabs.js文件
			2. 在组件里面导入React 和 React-DOM 
				import React from 'react';
				import ReactDOM from 'react-dom';
			3. 使用函数的方式创建一个组件
				function Tabs() {
					return <div>我是tab栏组件</div>;
				}
				函数必须要有返回值 而且函数必须大写 而且返回值必须DOM结构
			4. 组件创建成功后只能在当前页面使用不能在别的页面使用 如果需要在别的文件使用要把组件导出 export defalut Tabs;
			5. 在当前页面需要使用别的文件的里面的组件 使用导入
			 import 组件名(大写) from '组件的js文件相对路径(相对我当前使用组件的路径)'


	3. 使用类的方式创建一个组件 （重点）
			// 1. 导入React的默认组件  包名是小写的
			import React from 'react';
			import ReactDOM from 'react-dom';

			// 2. 使用class类关键字来创建一个组件
			// 关键字 组件名 继承自 React的公共组件类
			class Slide extends React.Component{
				// 3. 使用类的方式创建一个组件 必须实现一个render函数 用来渲染组件里面的内容
				render(){
					// 4. 而且render函数里面必须要有返回值 返回值也必须是DOM结构
					return <div>我是轮播图组件</div>;
				}
			}

			// 5. 使用类创建的组件 也是局部 如果需要给被人使用也要导出
			export default Slide;
			//6. 使用类的方式创建的组件也是要导入才能使用
			import Slide from './components/slide/slide.js';

React 中去添加事件

	1. 传统使用使用on的方式添加一个事件
			<button onclick="activateLasers()"></button>
	2. 和传统HTML添加事件的方式类似但是传统的方式onclick全部小写的
		   但是React添加事件 使用驼峰命名法
			<button onClick="activateLasers()"></button>
			回调函数的指定也不太一样
			<button onClick={回调函数名}></button>
	3. 回调函数 如果要使用function要在类的外面写
			function fun(e) {
				//e 也是当前事件事件对象
				console.log(e);
			}

yarn

	1. 如果你使用npm下载包下载不了 就使用yarn下载（专门针对react的下包工具）
	2. npm和yarn的对比 
     1. 都可以下载包 但是命令不一样
     		1. npm  npm install 包名 
     		2. yarn  yarn add 包名
     2. 下载包的速度不一样
     		1. npm 比较慢
     		2. yarn 下载包的速度比较快（特别react依赖包特别多推荐使用yarn来下载包）
     3. 其他命令也会差异 
     		1. npm 命令
	        1. npm i 包名 -g
	        2. npm i 包名 --save
					3. npm i 包名 --dev
				2. yarn 命令
					1. yarn add 包名 -g
					2. yarn add 包名 -S
					2. yarn add 包名 -D

yarn的使用步骤

	1. 全局安装yarn (类似于全局安装npm)
			npm i -g yarn
	2. 使用yarn 来安装一些依赖包
	   打开黑窗执行yarn add 包名 -S 或者 -D  -g
	3. 不管使用npm 还是yarn 安装的包配置文件都是在package.json文件里面
	4. 但是使用npm 和 yarn 安装来源的文件不一样
			npm 安装来源 package-lock.json 指定当前包的路径
			yarn 安装来 yarn.lock 指定当前安装的包的路径