来自一位react新手的react入门须知
所有的html，css都可以写在js中，这就是jsx的用法。
用于验证数据的类型是否是满足你的需要,不过我在现有的项目中没有特意的指定数据的propTyoe，因为这些都是前后端约定好的。
此用法如下图 ：
这个如同vue组件里面的props中的type：Array这个一样
这个与vue-router差不多，大家可以看文档。
react-router的中文官网 ： 中文官网
因为react与vue一样，都是使用vitural-dom，没有处理dom节点，从而大大提高了页面的渲染效率。
当你想要获取真实的dom节点的时候，可以使用ref，具体的使用，可以看阮一峰的react入门，我下面的todolist的demo里面也会涉及到。
不过在你使用无状态组件申明组件的时候，ref在这个组件中是不能使用的。
可以通过webpack安装各种依赖，我使用的最爽的一个就是react-hot-loader，就是热更新，非常好用。不过热更新其他的工具，比如 browser-sync ,下面是一些文档。
如vue的vue-cli脚手架， create-react-app ]( )，使用以上方法的话，与vue-cli脚手架工具类似
我自己的一些总结，单单学react是不难的，难的是要和一些工具混合来用，往往这个过程的成本最高。比如使用webpack构建，redux管理状态， redux-thunk 或者 redux-saga 来处理异步action。
还有一个很大的趋势就是前端变化很快，拿 react-router 来说，你做了一个项目， react-router@2.0.0 是能完美跑起来的，但是换成了当换成了 react-router@3.0.0 ，基本上就跑不起来了，更何况现在的 react-router 已经出到4.0，
相应的 webpack 也是这样，当时一些开发者基于 webpack1.0 开发的，当webpack升到2.0的时候， webpack.config,js 里面的文件要重新配置了。现在 webpack 已经更新到了3.0。
2， 阮一峰的文档： react的入门 ，webpack的入门， react-router
3，react的一些框架和一些轮子：
4，一个渐进的学react的demo。
里面基本上涉及到了，react入门的所有涵盖的知识，他都是自己搭的，没有使用脚手架工具。里面也涵盖了webpack的一些配置，对于新手学习蛮好的。
1，jquery、vue、react的todolist，最简单的
2，基于ant-dedign的一个react简单的demo
3,基于react写的一个简易大众点评的demo，里面用到了redux，mock，fetch，es6
react路由
一、React路由： 实现单页应用的核心技术（单页应用 简称SPA）
路由原理参考资料：
二、React路由实现有两个包：
官网：
官方github:
中文路由文档：
三、React-router-dom具体使用
Route:视图展示 区 相当于vue中的router-view
Link:要跳转的指令 相当于vue中的router-link
步骤：
1.引入所需的包：
2.用Link指令指令要跳转的路径
例如：
3.指定在哪个区域显示视图
例如：
4.如何指定高亮
例如：
可以通过activeClassName指定高亮类的样式，如果不指定activeClassName，可以直接使用active类名即可
5.路由传参
Reacr UI库 antd: 阿里
文档
react-infinite-scroll-component 中文文档
官网地址:
记得自己曾经弱弱的发问，为什么 上拉加载更多 会触发多次。
效果如图
只需要使用 height
效果
需要用到 scrollableTarget ，这时候 InfiniteScroll 就没必要指定 height
这个要在移动端看，PC端我在mac笔记本上用 三指下拉也看到过
效果如下
react中文官网为什么没有了
这节介绍一下React Native库中的ImageView封装原理以及大概步骤，在下一节，我们将都每一个步骤进行详细讲解。 首先着重介绍一下ViewManager和SimpleViewManager。SimpleViewManager是ViewManager的子类，它是比ViewManager更为简单的管理类
前端框架有哪些？
1、Bootstrap是最流行的前端开发框架，可以让不是前端工程师也能开发出优美的页面，更加快捷、方便的开发web页面和移动端应用。也能开发响应式web页面，上手也非常快。
中文官网：
2、React 是Facebook 开发的框架，用于构建页面、javascript库。主要功能是对DOM操作，声明式设计，更快的开发出web应用系统
官网地址：
3、Semantic UI是一个完全语义化的前端CSS界面开发框架，跟 Bootstrap 比起来更加丰富些，不那么单一，在用户体验、样式都很丰富
官网地址：
4、Foundation by ZURB是开发适应各种设备上的前端框架，主要开发响应式web应用框架，提供很丰富的DEMO实例，学起来也非常方便上手，也提供丰富的图标库。
官网地址：
5、Amaze UI是轻量级的前端应用框架，是国内比较流行的框架，比较适用于移动端响应式开发框架，可以按照项目要求生成专属的UI框架库进行使用，组件非常丰富，可以构建出漂亮的web页面。
官网地址：
6、Pure是雅虎公司开发的轻量级、响应式CSS框架，整个框架包也是非常的小，官网也提供许多实例进行学习，对于开发小型系统界面样式可以考虑使用Pure,因为小巧方便。
官网地址：
React基础
1、jsx语法
2、组件
3、 元素渲染
4、 props
5、生命周期和state
6、事件
React主要是用于构建用户界面的 JavaScript 库，实现单页面应用。
react中文网：
谷歌react调试工具：react develpoer tools，用于调试react
redux调试工具：redux devTools，用于调试redux
markdown文本，创建的文件后缀是.md结尾的，是在github，npm,码云等代码托管平台上使用一种文本格式，在这种网站上会自动展示.md文件的内容，主要是说明功能
npx create-react-app my-app
通过这个指令一键搭建react环境，基于webpack的
cd my-app 进入文件夹
npm start 启动
复制空白环境
复制已经下载好的空白环境到目标位置
cd my-app 进入文件夹
cnpm i 安装
npm start 启动
1、安装react环境
2、安装chrome插件
1、介绍：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX（JavaScript and XML） 的语法，JSX是一种 JavaScript 的语法扩展，它允许 HTML 与 JavaScript 的混写。 2、语法是： 1）
:遇到标签就按html解析
2）{str} : 遇到{}就按js解析，{}中的js代码不要直接出现{}
3、JSX 是一个表达式，可以在 if 语句和 map循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX
4、JSX属性
JSX const element = ;
2）使用大括号来定义以 JavaScript 表达式为值的属性
jsx const element = ;
3）style样式使用JSX，写法如下：
.map(function(ele,index){
return 返回值
})
数组的一个遍历方法,ele是数组元素项，index是下标，return后是返回值
元素描述了你在屏幕上想看到的内容，是构成 React 应用的最小砖块，与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
说明：1.参数1：element为要显示的元素。可以是双标签形式的，也可以是单标签形式的，如果是单标签必须有结束符号
2.参数2：parentNode为元素要显示在页面的哪个标签中。
3.渲染方法一般一个项目中只有一个。其他页面通过组件引入或者路由访问。
4.更新已渲染的元素:React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()
从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
1、函数形式
2、类形式
组件的导出使用es6模块的导出语法。可以使用 export default 组件名，也可以使用 export {组件名}
组件的引入实现es6模块的引入语法。可以使用 import 组件名 from ‘组件路径’
注意：
1、组件名称首字母必须大写
2、组件的页面结构只能有一个顶层标签,不能出现兄弟关系，页面如果比较复杂，需要使用小括号包裹起来
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。
父组件中：调用子组件时通过属性形式传递
子组件中：通过props接受
【示例1-5】props 父组件向子组件传递数据
1.练习创建组件，导出组件，引入组件
2.练习父级通过props向子集传递数据
2.react中的生命周期函数(7个)
componentWillMount ：组件将要被渲染
componentDidMount : 组件渲染完成(组件进入运行状态)
shouldComponentUpdate : 是否允许组件更新(这个函数中必须有返回值，如果返回true，表示允许更新；如果返回false，表示不允许更新)
componentWillUpdate : 组件将要开始更新
componentDidUpdate : 组件更新完成(重新进入运行状态)
componentWillReceiveProps : 组件接收props更新
componentWillUnMount : 组件将要卸载
组件有三个生命周期函数一生只触发一次：
componentWillMount
componentDidMount
componentWillUnMount
3.生命周期流程图
1.在react组件的生命周期函数中，this指向当前组件
2.在react class定义的组件中，constructor构造方法中需要通过调用super()方法生成this，这时this指向当前组件；否则不存在this，使用会报错。
3.在react 组件中，自定义function函数中this默认指向undefined
组件内部的状态，内部状态只能在组件内部使用
1.函数形式的组件如果不使用HOOK新语法，是不能使用state的
2.class定义的组件中使用：
this.state.属性名调用
1. 默写生命周期函数名
2. 初始化state状态
3. 在页面中使用state
1.在标签绑定,使用的属性方式
2.事件是以 “on+ 事件名称” 组成 ,使用驼峰命名法
3.事件的功能一般定义在外部，事件这里写this.事件函数名称
4.事件定义在组件中，和生命周期函数同级
实参是从bind()的第二个参数算的
在事件中添加参数 e 或event，放在形参最后。
同一个事件函数中出现多次state状态修改，react不会立即更新state，而是进行合并。
下面代码会先输出 222 ，后输出 111
方式1：
方式2：
1、 给元素绑定事件，让this指向当前组件，并修改state的值
2、 定义组件，在app.js中引入组件，把app.js的state值传递给子组件，并在子组件中显示