搭建react项目

时间 2019-11-09

标签搭建 react 项目栏目 React 繁體版

原文原文链接

从零开始搭建React项目

npm init

先安装

--save-dev开发环境(devDependencies)， --save是线上运行所须要的包(dependencies)；

npm i webpack webpack-cli html-webpack-plugin webpack-dev-server --save-dev

npm i react react-dom babel-core babel-loader@7 babel-preset-es2015 babel-preset-react --save

在项目的跟目录下面创建webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 指定入口文件，程序从这里开始，__dirname当前所在目录
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    // 输出路径
    path: path.resolve(__dirname,'./dist'),
    // 打包后文件
    filename: 'app/[name]_[hash:8].js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html")
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    contentBase: path.resolve(__dirname,  '/dist'),//本地服务器所加载的页面所在的目录
    port: 1313,
    inline: true,
    hot: true,
    historyApiFallback: true
  },
}
复制代码

4 .在项目的根目录创建文件.babelrcjavascript

{
  "presets": [
    "es2015",
    "react"
  ]
}
复制代码

5 . 在项目跟目录创建index.htmlcss

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
复制代码

6 . 在项目根目录创建src文件夹，src->index.jshtml

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>hello,react</div>,
  document.getElementById('root')
)
复制代码

pageckage.json中的scripts添加
"dev": "webpack-dev-server --open --mode development" 安装npm install --save-dev babel-cli babel-preset-env，支持es7@装饰器的用法，java

在.babelrc导入{ "presets": ["env"] }node

7 . 按需加载路由react

npm i react-router --savewebpack

在webpack.config.js文件中添加web

在src文件下创建routes路由文件夹，其中主入口文件为index.js,其余的路由文件也放在这里。

其中用到了es7@装饰器的用法：

先装插件：npm i babel-plugin-transform-decoratorors-legacy babel-preset-stage-2 babel-preset-react-native-stage-0 --save-dev

而后在.babelrc文件里加上

在routes里的主文件index.js里

export default {
  path: '/',
  indexRoute: {
    getComponent(nextState, cb) {
      require.ensure([], (require) => {
        console.log('进来了')
        cb(null, require('../pages/homepage').default);
      }, 'home');
    },
  },
  component: require('../App').default,
  childRoutes: [
    require('./HomePage/index').default,
    require('./BaiDu/index').default,
    require('./LianXin/index').default,
  ]
}
复制代码

其中，indexRoute为初始化时候，加载的页面，component引进来的App文件；childRoutes为须要用到时候加载的； routes文件下的相似homePage文件，里面写的则利用getComponent,require.ensure()引用到的时候加载。**

（注意：这种写法不适合react-router4及以上）;**

export default {
  path: 'home',
  getComponent(nextProps, cb) {
    require.ensure(
      [],
      require => {
        cb(null,require('../../pages/homepage').default)
      },
      'home'
    )
  }
}
复制代码

7.2 在src文件夹下创建App.js文件npm

import LeftContainer from './components/leftContainer';

// @LeftContainer中的WrappedComponent就是当前的这个App.js
// App = LeftContainer(App) || App;

@LeftContainer
 class App extends React.Component {
  render(){
    const { children }= this.props;
    console.log('children是',children)
    return(
      <div> {children} </div>
    )
  }
}
export default App;
复制代码

其中的components文件下创建leftContainer.js;json

import React, { Component } from 'react';
import { Link } from 'react-router';
import Home from '../pages/homepage';
import BaiDu from '../pages/baidu';
import Lianxin from '../pages/lianxin';


const Container = Inner => {
  return class LeftContainer extends Component {
    render(){
      const props = {...this.props}
      return(
        <div>
            <Link to={'/home'}>home页</Link>
            <Link to={'/baidu'}>badu页</Link>
            <Link to={'/lianxin'}>lianxin页</Link>
            <Inner {...props} />
        </div>
      )
    }
  }
}
export default Container;
复制代码

8 .安装less, 浏览器前缀

npm i less less-loader css-loader postcss-loader style-loader autoprefixer --save-dev

在webpack.config.js里的rules中添加上这一句

{
        test: /\.(css|less)$/,
        use: ["style-loader", "css-loader",
        // 添加浏览器自动加前缀配置
        {loader: 'postcss-loader',options:{plugins:[require("autoprefixer")("last 100 versions")]}},
        "less-loader"
        ]
      },
复制代码

9 . 引用antd样式库

npm i antd babel-plugin-import --save

.babelrc文件添加：

"plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
  ]
复制代码

在index.js文件引入

import { LocaleProvider } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';
复制代码