react学习笔记（一）

React的介绍：

React来自于Facebook公司的开源项目

React 可以开发单页面应用 spa（单页面应用）

react 组件化模块化 开发模式

React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互 （数据绑定）

react灵活 React可以与已知的库或框架很好地配合。

react 基于jsx的语法，JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面， html js混写模式

搭建React开发环境之前的准备工作。

1、必须安装nodejs 注意：安装nodejs稳定版本

2、安装cnpm用cnpm替代npm

地址：http://npm.taobao.org/

安装cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、用yarn替代npm

yarn的安装：

第一种方法：参考官方文档https://yarn.bootcss.com/

第二种方法：cnpm install -g yarn 或者 npm install -g yarn

搭建React开发环境的第一种方法（老-现在推荐）：

https://reactjs.org/docs/create-a-new-react-app.html

1、必须要安装nodejs 注意：安装nodejs稳定版本 教程中的nodejs版本:v8.11.2 教程中的npm版本:v5.6.0

2.安装脚手架工具 （单文件组件项目生成工具） 只需要安装一次

npm install -g create-react-app / cnpm install -g create-react-app

3.创建项目 （可能创建多次）

找到项目要创建的目录：

create-react-app reactdemo

4.cd 到项目里面

cd reactdemo

npm start yarn start运行项目

npm run build yarn build 生成项目

搭建React的开发环境的第二种方法（新-未来推荐）：

https://reactjs.org/docs/create-a-new-react-app.html

1、必须要安装nodejs 注意：安装nodejs稳定版本 教程中的nodejs版本:v8.11.2 教程中的npm版本:v5.6.0

2.安装脚手架工具并创建项目

找到项目要创建的目录执行：

npx create-react-app reactdemo

4.cd 到项目里面

cd reactdemo

npm start 运行项目（调试）

npm run build 生成项目（发布）

npx介绍：

npm v5.2.0引入的一条命令（npx），引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。

详情：
http://www.phonegap100.com/thread-4910-1-1.html

npx create-react-app reactdemo这条命令会临时安装 create-react-app 包，命令完成后create-react-app 会删掉，不会出现在 global 中。下次再执行，还是会重新临时安装。
npx 会帮你执行依赖包里的二进制文件。

再比如 npx http-server 可以一句话帮你开启一个静态服务器

React目录结构 React创建组件、 ReactJSX语法、 React绑定数据 React绑定对象 、React绑定属性( 绑定class 绑定style 图片)

manifest.json 文件简介：

https://lavas.baidu.com/mip/doc/engage-retain-users/add-to-home-screen/introduction

允许将站点添加至主屏幕，是 PWA 提供的一项重要功能，当前 manifest.json 的标准仍属于草案阶段，Chrome 和 Firefox 已经实现了这个功能，微软正努力在 Edge 浏览器上实现，Apple 目前仍在考虑中

super关键字：

参考：http://www.phonegap100.com/thread-4911-1-1.html

Es6中的super可以用在类的继承中，super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

class Person {
constructor (name) {
this.name = name;
}
}

class Student extends Person {
constructor (name, age) {
super(); // 用在构造函数中，必须在使用this之前调用
this.age = age;
}
}

为什么官方的列子里面写个super(props)：

只有一个理由需要传递props作为super()的参数，那就是你需要在构造函数内使用this.props

那官方提供学习的例子中都是写成super(props)，所以说写成super(props)是完全没问题的，也建议就直接这样写。

1、所有的模板要被一个根节点包含起来

2、模板元素不要加引号

3、{}绑定数据

4、绑定属性注意：

class 要变成 className

for 要变成 htmlFor

style属性和以前的写法有些不一样

<div style={{'color':'blue'}}>{this.state.title}</div>

<div style={{'color':this.state.color}}>{this.state.title}</div>

5、循环数据要加key

6、组件的构造函数中一定要注意 super

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象

constructor(props){
super(props); /*用于父子组件传值 固定写法*/

this.state={

userinfo:'张三'
}
}

7、组件名称首字母大写、组件类名称首字母大写

8.本地图片引入用模块引入

先 import xx from '....'  后<img src={xx} />

远程图片直接用url即可