前言
随着前端的发展,现在好多公司都会在招人简历上写着要熟悉 react vue angular 中的一种,好多朋友之前都是撸 jquery,但是面向工资编程,不会这些也不行啊?ok , 转向 react 好多朋友会直接拿着脚手架跑一个 todolist ,但是好多脚手架 和自己的需求不一样,并且依赖的插件框架不断更新,更新项目依赖又极可能导致项目崩溃,所以,还是建议直接自己从头搭建一个,用到什么新的功能随时往上面添加。我根据一年半react的使用经验,写了个简易的demo, 项目 github 地址 移步这里,不正确之处还望指出。
项目基本介绍
一 初始化项目,搭建目录结构
随便找个文件夹,创建个目录
mkdir react-first
cd react-first
npm init
复制代码
然后开始傻瓜式的回车,这时候会生成package.json 文件。
在项目根目录下创建 src 文件夹,我们的主体代码都会写在这个里面,在src 下面创建main.js 这个是我们的项目打包入口文件,和index.html。 同时,在根目录下创建webpack.config.js 用于配置webpack 打包。
二 安装项目依赖,配置打包说明
安装项目依赖(全部依赖移步 package.json 查看)
npm install react react-dom react-router-dom --save
复制代码
注意: react-router 升级到4 之后,需要安装的是 react-router-dom
安装 redux 相关包
npm install redux react-redux redux-thunk --save
复制代码
安装相关语法的解析包
npm install webpack babel-cord babel-loader babel-preset-env babel-preset-react --save
复制代码
配置 webpack 打包(完整代码移步 项目 查看)
//定义打包入口
webpack_conf.entry = {
app: './src/main.js',
};
//指定输出路径
webpack_conf.output = {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: debug? '[name].js':'[hash:8].[name].js',
chunkFilename: debug? '[name].js':'[name].[chunkhash].js',
};
// 需要引用的插件
webpack_conf.plugins = [
new webpack.DefinePlugin({
"process.env":{
NODE_ENV:JSON.stringify(env)
}
}),
new webpack.optimize.CommonsChunkPlugin({
names: ['vander', 'manifest'],
minChunks: Infinity
}),
new HtmlWebpackPlugin({
template: path.join(__dirname + `/src/index.html`),
hash: false,
favicon: path.join(__dirname,'/src/static/favicon.ico'),
filename: 'index.html',
minify: {
collapseWhitespace: true
}
}),
];
if(debug){
webpack_conf.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}else{
webpack_conf.plugins.push(
new webpack.optimize.UglifyJsPlugin()
)
}
// 解析
webpack_conf.module.rules = [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: [
path.resolve(__dirname, "src")
],
loader: "babel-loader",
},
];
module.exports = webpack_conf;
复制代码
在根目录创建.babelrc 配置babel规则
{
"presets": ["env","react","stage-0"],
"comments": false,// 忽略注释
"plugins": [
"syntax-dynamic-import",// 解析import 语法 ,用于懒加载
"transform-object-rest-spread",// 对象展开符
"transform-decorators-legacy",//装饰模式插件
[
"import", {"libraryName": "antd", "style": true} // 按需加载 antd
]
]
}
复制代码
三. 编写入口文件,引入路由
首先贴出一张项目目录结构图
是不是觉得有点跳,刚开始还是 一个index.html 一个main.js , 怎么突然搞出来这么多,(别打脸 主要是篇幅有限。大体介绍下每个目录,
dist:打包生成文件
componend: 项目的组件,比如 Header,Footer,Dialog等
pages : 包含每个页面
reduces/stores :redux 相关逻辑
tools: 工具库。static: 静态文件
)
下面贴下主要的文件
1 入口文件 main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router } from 'react-router-dom';// 引入router ,同步history 和 store
import createBrowserHistory from 'history/createBrowserHistory'
const history = createBrowserHistory();
import createStore from './stores/createStore.js';
const initialState = window.___INITIAL_STATE__ || {};
const store = createStore(initialState);
import routers from './pages/index'
const ROOT_NODE = document.getElementById('root');
import './assets/base.less';
const render = (routes) => {
ReactDOM.render((
<Provider store={store}>
<Router onUpdate={() => window.scrollTo(0, 0)} history={history} children={routers}/>
</Provider>
), ROOT_NODE);
};
render(routers);
复制代码
2. pages 下面的路由文件
import React from 'react'
import { Route,Switch, Redirect,
} from 'react-router-dom';
const NotFound = () => (
<div>not fount</div>
)
import Home from './Home/index';
import About from './About/index'
import Header from '../components/Header/index'
let routes = (
<div>
<Header/>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Redirect to="/" />
</Switch>
</div>
)
export default routes;
复制代码
3. 单个模块(以pages/Home 模块为例)
- assets 样式 文件
- components 主要逻辑 react代码
- container 高阶组件用connect接收redux中状态
- modules redux 中 action 和 reduces 逻辑