一.了解
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 --save
②然后在组件页面中引入
import { DatePicker } from 'antd';
import 'antd/dist/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');