前端中阶学习路线（二）React入门与实践（笔记）

本文是作为一个几乎不了解一系列框架工具的小白的入门笔记，也为与我一样面对框架工具迷茫不知道如何学起如何构建项目的同学们提供一条学习路线。
具体学习内容参考贴出的链接，本文更多的是笔记。
我认为较好的学习路线是先学习基础（第一、二部分贴出的教程），然后是一个项目的组建过程、思路（第三部分），然后是动手跟着教程做一遍框架的搭建与项目建立（第四部分）。
这之后将继续学习webpack和es6。

---

第一部分：react基础

参考React 入门实例教程
笔记：

• 最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
• ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
• JSX允许 HTML 与 JavaScript 的混写。 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。插入的变量是一个数组，则会展开这个数组的所有成员
• React.createClass 方法就用于生成一个组件类，然后插入网页中。然后用<xxx />生成组件实例。实例内可以放入属性。组件的属性可以在组件类的 this.props 对象上获取。
  组件类只能包含一个顶层标签，否则也会报错。组件类的第一个字母必须大写
• 添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
• this.props.children 属性。它表示组件的所有子节点。this.props.children的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children的时候要小心。React 提供一个工具方法 [React.Children] 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children的数据类型是 undefined 还是 object。
• 组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。getDefaultProps 方法可以用来设置组件属性的默认值。
• 用组件插入的都是虚拟的dom，无法获得用户输入，在需要真实dom的场景下，必须为组件的子节点添加ref属性然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。
• getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
• 文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况
• 组件生命周期分为3种：已插入、已移除、重新渲染。React 为每个状态都提供了两种处理函数will和did，一个是进入状态之前调用，一个是进入状态后进入状态之前调用。 还提供两种特殊状态的处理函数。
  componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
  shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
• 组件的style属性的设置方式也值得注意，不能写成style="opacity:{this.state.opacity};"而要写成style={{“opacity”: this.state.opacity}}

---

第二部分：创建react项目

参考：React 教程
笔记：

• 创建项目：

$ create-react-app my-app
$ cd my-app/
$ npm start```
- 元素添加自定义属性需要使用 data- 前缀
- 在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中
- 在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。
- React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。注释需要写在花括号中{/*注释...*/}
- 不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
- 一些组件api参考[React组件API](http://www.runoob.com/react/react-component-api.html)
这里有一个[3分钟创建一个hello world react程序](https://daveceddia.com/test-drive-react/)
---
###第三部分：实践
参考[十分详细的React入门实例](https://link.zhihu.com/?target=http%3A//blog.csdn.net/a153375250/article/details/52667739)
内含代码下载，以及详尽的代码解释。主要是理解一个项目的搭建思路。
笔记：
- 用`export default class StaffItem extends React.Component`来替代`React.createClass`
- 绑定函数用法类似于`onChange={this.handlerOrderChange.bind(this)}`
- 利用在组件中添加ref属性来抓住dom，调用时，使用`React.findDOMNode(this.refs.xxx);`获取下拉选项的值： `sel.options[sel.selectedIndex].value;`
- 写完源码后放入src文件夹中，写好webpack.config.js和package.json，运行npm install和npm start,在build中生成bundle.js，将其引入index.html中即可打开项目。
---
###第四部分：实战
参考[Learn React & Webpack by building the Hacker News front page](https://github.com/theJian/build-a-hn-front-page)

这篇文章感觉比较好，因为对于我个人来说一开始对于webpack等工具的使用都是一头雾水，很多实践教程一上来就默认初学者已经懂了实际不然，这个教程算是手把手教你如何创建一个项目并且跑起来。
流程：
- 先安装webpack和webpack服务器
```npm install webpack -g
npm install webpack-dev-server -g```
- 创建webpack配置文件
- 在根目录下运行`npm init -y`创建package.json文件，修改键值
```"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack"
}```
- 安装react和jquery、babel
```npm install react react-dom --save
npm install jquery --save
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev```
- 修改webpack配置文件：

var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'app/app.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
},
]
}
};

- 创建入口文件app.js放置于app的文件夹内，希望 webpack 将它打包输出为 build/ 目录下的 bundle.js。创建build文件夹，内部创建index.html文件，其中 script 引入了 bundle.js。
- 运行npm run build 和npm run start即可开启服务器，访问http://localhost:8080/build/index.html即可
- 开发一个项目，首先构思好树形结构，分别构建对应js文件，并且将总框架引入进app.js
- 对于图片和文件的引入，需要安装相应的loader：
`npm install url-loader file-loader --save-dev`
配置 webpack.config.js：

loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
},
{
test: /.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192' // 这里的 limit=8192 表示用 base64 编码 <= ８K 的图像
}
]```
然后像引入js文件一样引入图片，调用时：<img src={引入的图片名} />（注意此处img标签要自闭合）

• 对于用方法引入的内容，使用的时候用{this.xxx()}
• 添加样式，也要用模块化引入方法：
  npm install css-loader style-loader --save-dev
  （css-loader 处理 css 文件中的 url() 表达式.style-loader 将 css 代码插入页面中的 style 标签中.）
  并处理webpack配置文件
  { test: /\.css$/, loader: 'style-loader!css-loader' }
  引入则直接引入 ： import ‘./xxx.css’
• 对于父子组件间的通信, 可以使用属性传递. 子组件可以使用 this.props 访问到父组件传入的属性数据.如父组件使用<NewsItem item={data} />传入数据，子组件就可以使用this.props.item访问
• 对于地址的处理需要引入URL：import URL from 'url'; URL.parse()将一个URL字符串转换成对象并返回，