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
浙公网安备 33010602011771号