搭建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';
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。