一.了解
1.什么是React.js
React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
React 中，把一切东西都看成组件，而且所有组件有其状态。什么是状态？简单来说，一个组件有多种有限的状态，但同时只能是一种状态，不过条件处罚就会变成另一种状态。学术上叫有限状态机。React.js 是一个新兴的 JavaScript 库，有很多经典的思想值得我们学习。
2.什么是create-react-app
Facebook 官方推出Create-React-App脚手架，基本可以零配置搭建基于webpack的React开发环境，内置了热更新等功能。
详细文档可前往链接：Create-React-App文档
二.安装
(1).安装node环境
怎么搭建react的环境呢？要搭建react的环境需要借助node.js的npm的包管理器，所以先去看下NodeJS、NPM安装配置步骤。
(2).安装react项目
1.安装create-react-app
npm install -g create-react-app /* 安装create-react-app，建议使用cnpm */2.找到创建项目的目录 ：e盘 cd ylz_project
create-react-app myreact /* 使用命令创建应用，myreact为项目名称 */
注意：有可能遇到问题
npm 版本低 导致一些操作有问题，所以需要更新最新版本
①这时只要
使用 npm install -g npm@latest 更新下npm，之后使用管理运行npm 重新试下就ok了。如果npm install -g npm@latest报错的话，执行cnpm install -g npm@latest 更新下npm
②或是设置npm代理,执行命令
npm config set registry http://registry.cnpmjs.org
再从重新创建项目：
create-react-app myreact
3.找到项目：
cd myreact
4.启动项目：npm start
项目结构
三.谷歌--React开发者工具
安装React Developer Tools
四.项目部署
1.显示webpack配置
生成项目后，脚手架为了“优雅”... ...隐藏了所有的webpack相关的配置文件，此时查看myreact文件夹目录，会发现找不到任何webpack配置文件。执行以下命令：
npm run eject
再查看myreact文件夹，可以看到完整的项目结构：
2.安装scss的依赖
①找到项目：npm install sass-loader node-sass --save-dev
②在config文件中找到webpack-config-dev.js和webpack-config-prod.js文件
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
}
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.scss$/],
安装less-loader 和 less
npm install less-loader less --save-dev修改webpack配置
修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件
改动1：
/\.css$/ 改为 /\.(css|less)$/,, 修改后如下：
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.(css|less)$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],改动2：
test: /\.css$/ 改为 /\.(css|less)$/
test: /\.css$/ 的 use 数组配置增加 less-loader
修改后如下：
{
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
],
},3.安装 ant design和ant-mobile
①找到项目执行：npm install antd --save npm install antd-mobile@next --save
②然后在组件页面中引入
import { DatePicker } from 'antd';//这样引用直接就会有css
class App extends React.Component {
render() {
const user = '表单处理';
return (
<div>
<h1>{user}!</h1>
<DatePicker/>
</div>
);
}
}
export default App;注意
以下的操作是按需加载，ant design 需要以下操作 css才可以自动出来，而antd-mobile 需要引入css （import 'antd-mobile/dist/antd-mobile.css'）
就是在package.json里面直接添加这行代码。当然前提也是需要先安装依赖： cnpm install babel-plugin-import --save
"plugins": [
["import",{ "libraryName": "antd","style": "css"}]
]
4.安装 redux 和 react-redux、
①找到项目执行：npm install --save redux react-redux
npm install redux-thunk --save-dev
redux是本地数据库使用，react-redux帮助你完成数据订阅，redux-thunk可以放你实现异步action，redux-logger是redux的日志中间件。
②引用
import { createStore ,applyMiddleware} from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';//是中间件
import reducer from './reducer';//自己reducer文件里面的index.js 来计算state的值
//1.新建store
const store = createStore(reducer,applyMiddleware(thunk));
ReactDOM.render(
<Provider store={store}>
</Provider>
,
document.getElementById('root')
);
5.安装 React-router4
①找到项目执行：npm install react-router-dom --save
②引入
import {BrowserRouter,Route,Link} from 'react-router-dom' //需要什么组件就引用什么
6.引入css
require('./assets/css/App.css');
7.注销
{/*Switch只渲染第一路由 它的子路由是不渲染的*/}8.引入图片
import logos from '../../assets/images/logos.png';//src/assets
render() {
return (
<img alt="logo" src={logos} />
)
}9.组件属性类型检测 prop-types
(1).安装prop-types模块
npm install --save prop-types
(2).引用
import PropTypes from 'prop-types';
加上isRequired表示是必填的
static propTypes = {
name: PropTypes.string.isRequired,//检测字符串
age:PropTypes.number.isRequired,//检测数字
user:PropTypes.object.isRequired,//检测对象
num:PropTypes.array.isRequired,//检测数组类型
bool:PropTypes.bool.isRequired//检测布尔类型
fu: PropTypes.func.isRequired,//检测函数（Function类型）
Symbol: PropTypes.symbol.isRequired//ES6新增的symbol类型
}10.由于浏览器兼容问题---babel-polyfill
ie10以下有些es6函数不支持:语法兼容性问题
所以需要安装：babel-polyfill（Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码）
安装命令----cnpm install --save babel-polyfill
引用的时候：
import 'babel-polyfill';
// 或者
require('babel-polyfill');