React+webpack

webPack + React

步骤：

	1.	创建文件夹

		src 源代码目录
		  main.js 打包的入口文件

		  App.js 项目的根组件

			import React,{Component} from 'react'

			class App extends Component {
			    render(){
			        return <div>
			            <h1>hello ggg</h1>
			        </div>
			    }
			}

			export default App

		JSX是允许在js代码中写html标签
		但目前浏览器是不支持JSX，需要借助babel进行转换

	3.	main.js导入根组件	

			import React from 'react'
			import ReactDOM from 'react-dom'
			import App from './App.js'
			ReactDOM.render(<App />,document.getElementById('root'))

	4.	webpack.config.dev
		安装包
		配置loader
		在项目`根目录`创建.babelrc，写好预设(presets)

		yarn add babel-core babel-loader babel-preset-env babel-preset-react --dev

		plugins:html-webpack-plugin webpack webpack-dev-server
		github上面找怎么写

	代码:
		const HtmlWebpackPlugin = require('html-webpack-plugin');
		module.exports = {
		    entry: './src/main.js',
		    module: {
		        rules: [{
		            test: /\.js$/,
		            exclude: /node_modules/,
		            loader: "babel-loader"
		        }]
		    },
		    plugins: [
		        new HtmlWebpackPlugin({
		            template: './template.html',
		            filename: 'index.html'
		        })
		    ]
		}

脚手架

参考：https://doc.react-china.org/docs/installation.html

步骤:
1、安装全局包
	cnpm install -g create-react-app

2、生成项目并且会自动安装包(yarn安装)
	create-react-app my-app

3、运行项目
	npm start

热重载

参考:
https://github.com/gaearon/react-hot-loader

步骤:
1、安装
	yarn add react-hot-loader --dev

2、Add react-hot-loader/babel to your .babelrc

3、Enable Hot Module Replacement in Webpack
	参考:https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr

	webpack配置中：

	const webpack = require('webpack');

	entry: [
    'babel-polyfill', //装此包
    'react-hot-loader/patch',
    './src/main.js'
	],
	output: {
    	publicPath: '/'
	},
	devServer: {
        contentBase: './dist',
        hot: true
	},
             plugins: [
                new HtmlWebpackPlugin({
                template: './template.html',
                filename: 'index.html'
                }),
            new webpack.HotModuleReplacementPlugin()
    ]

	package.json的scripts里面--hotOnly

4、main.js

	import { AppContainer } from 'react-hot-loader'

	const render = Component => {
	    ReactDOM.render(
	      <AppContainer>
	        <Component />
	      </AppContainer>,
	      document.getElementById('root'),
	    )
	}

	  render(App)

	  // Webpack Hot Module Replacement API
	  if (module.hot) {
	    module.hot.accept('./App', () => { render(App) })
	  }

5、更改.babelrc中的内容
	{
	    "presets":[["env",{ "modules": false }],"react"],
	    "plugins": ["react-hot-loader/babel"]
	}

注意点:
	热重载只在开发阶段使用

	脚手架的热重载参考：https://github.com/gaearon/react-hot-loader

React对我们css、less、sass的处理

1、直接在标签里面通过style来写
	1.1 <h2 style={{color:'red'}}>Hello My Girl</h2>
	1.2、把样式单独放在一个对象中，在写style时候，就是用该样式对象即可
	注释：{/* xxxx */}
2、通过外部样式
import 'xxx.css/yyy.less/yyy.sass'
<h2 className="titleStyle">dwd</h2>

注意:要有对应的loader来加载

注意事项:
在JSX中，属性名称后面的值，就是两种情况，一种是字符串，一种`{}`

React核心之组件

状态：数据
	组件的数据来源于两部分
		其一来自父组件
		其二是自己内部拥有的数据

无状态组件

特点:自己内部不能拥有数据，数据来源于父组件，父组件给它传了什么数据，它就只能使用什么样的数据

语法:
只需要导入react，不用导入component
function 组件的函数名称(props){
	return jsx语法
}

export default 组件的函数名称

传值:
传值方(App.js) 在使用子组件的时候，通过属性名称=值的方式传递，跟Vue、Angular一模一样
	<NoStateComponent name="jack" age={18}></NoStateComponent>

接收方(NoStateComponent.js)
	通过函数的props参数来接收，但是接收到的值是只读的
	props是一个对象

注意点：
父组件给子组件传递的值，子组件只能展示，不能直接修改

应用场景:
纯粹的展示父组件的值

有状态组件

特点:自己即可从父组件中获取数据，也可以自己内部拥有数据

语法:
需要导react和component
class 组件名称(首字母大写) extends Component{
	constructor(props){
		super(props)

		this.state = {
			name:"小芳"，
			sex:"女"，
			movieList:[props.name]
		}
	}
	//如果父组件不给传值，设置默认值,es7语法所以要改预设babel-preset-stage-0
	static defaultProps = {
		initCount :3000
	}
	render(){
		return jsx
	}
}

prop-types:
	可以用来检测父组件传递过来的值类型

//设置默认规则
import PropTypes from 'prop-types'
static propTypes = {
	initCount:PropTypes.number
}

注意点:
1、有状态组件中，如果要拥有自己内部的数据，在constructor(){}中，设置this.state = { 属性名称:值,xxx:yyy}

2、有状态组件使用父组件传递过来的值，通过 this.props.xxx的方式去获取

3、事件处理比较变态，在注册事件的时候，要这样写 onClick = {()=>{this.函数名称()}}
	注意：可能有坑 http://www.jianshu.com/p/ed325ed164d2

4、如果要更改我们自己state的值，得通过 this.setState({}) 这样的方式来改

生命周期钩子

参考:https://doc.react-china.org/docs/state-and-lifecycle.html

getDefaultProps - getInitialState - componentWillMount - render - componentDidMount - 运行 - 三部分（props,status,unmount）

Ant Desgin

IE9+

集成在项目中：

1.	安装

	yarn add antd --save

2.	用插件按需加载

	使用 babel-plugin-import（推荐）

	安装：
		yarn add babel-plugin-import --dev

	// .babelrc or babel-loader option
	{
	  "plugins": [
	    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
	  ]
	}

3.	使用

	使用哪个组件，就直接使用 import {组件} from 'antd'

React中如何集成路由

地址：https://reacttraining.com/react-router/

核心概念
Router：容器的作用，包裹需要导航的所有代码，Router整个项目中只需要写一次，一般写在App.js

Link：触发路由

Route：路由占位 + 设置路由规则，写在页面中动态变化的地方

步骤:
	集成:
		安装包 react-router-dom

	使用:
		App.js中使用

注意:

1、react-router-dom中，默认路由是模糊匹配的

包

1.	包名:react、react-dom
	应用场景:在搭建项目时，写App.js中的代码
	安装方式:yarn add react react-dom --save	

2.	包名：babel-core babel-loader babel-preset-env babel-preset-react
	应用场景:构建项目时，写webpack.config.dev.js的时候用到
安装方式:yarn add babel-core babel-loader babel-preset-env babel-preset-react --dev

注意:babel-preset-env 转换的是我们所写的es6代码
	babel-preset-react 转换的是react中jsx的语法

3.	包名：html-webpack-plugin webpack webpack-dev-server
	应用场景:开发阶段使用它，生成index.html
安装方式：yarn add html-webpack-plugin webpack webpack-dev-server --dev

4.	包名:react-hot-loader、babel-polyfill
	应用场景:在实现热重载的时候，使用
安装方式：yarn add react-hot-loader babel-polyfill --dev

5.	包名:style-loader css-loader less-loader less sass-loader node-sass
	应用场景:在加载样式的时候，使用
安装方式：yarn add style-loader css-loader less-loader less --dev

注意:
	node-sass 要是用cnpm

---

1.	包名:antd
应用场景:当我们项目需要集成antd
安装方式: yarn add antd --save

2.	包名:babel-plugin-import
应用场景:在按需导入ant design的插件的时候
安装方式:yarn add babel-plugin-import --dev

3.	包名:url-loader
应用场景:在根组件中，使用我们的logo的图像需要用到
安装方式:yarn add url-loader --save-dev

4.	包名:react-router-dom
应用场景:在我们项目中使用路由的时候
安装方式：yarn add react-router-dom --save