從零開始React項目架構(一)

時間 2019-11-16

標籤開始 react 項目架構欄目 React 简体版

原文原文鏈接

前言

零零散散也作過很多項目了，有基於jquery、bootstrap的，有基於jquery、easyui的，有基於react的。javascript

項目多了總會有一些本身感悟和經驗，因此分享出來，確定有不對和不合適的地方，歡迎批評指正。css

好了，廢話很少說了，讓咱們從零開始，一步一步的折騰吧。html

概述

我暫時分紅5各部分來介紹：java

開發環境建立
配置eslint，建立項目文件和目錄結構
mock本地數據模擬接口
發佈環境webpack配置
單元測試

開發

1、初始化項目

建立項目文件，就叫 react-architecture 吧。
初始化git git init
初始化npm npm init
固然不能一口氣的只講配置，so 咱們簡單的建立一些文件和目錄，跑起來看一看效果。目錄結構以下：

├── src                     
│   ├── index.html                
│   └── index.js                              
├── .gitignore
├── package-lock.json
├── package.json
└── webpack.config.js
複製代碼

咱們先來配置下webpack，暫時先無論其餘。node

2、webpack.config.js 的配置

安裝一些依賴: 爲了webpack運行，須要安裝（我用了webpack3+）

npm install -D webpack@3 webpack-dev-server@2 html-webpack-plugin
複製代碼

react，須要安裝react

npm install -S react react-dom react-router-dom
複製代碼

處理less，須要安裝jquery

npm install -D css-loader style-loader less less-loader
複製代碼

處理圖片和字體文件，須要安裝webpack

npm install -D url-loader file-loader
複製代碼

爲了支持高級語法-babel，須要安裝git

npm install -S babel-polyfill // 實際生產環境也會用到
    npm install -D babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-2 
複製代碼

webpack.config.js 配置

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

module.exports = {
    entry:{
        main:['babel-polyfill','./src/index.js'],
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {  
                test: /\.(woff|eot|ttf|svg|png|jpg)$/,  
                use: [  
                    {  
                        loader: 'url-loader',  
                        options: {  
                            limit: '1024'  
                        }  
                    },  
                ]  
            },
            {  
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                use: [  
                    {  
                        loader: 'url-loader',  
                        options: {  
                            limit: '1024'  
                        }  
                    },  
                ]  
            },
            {
                test: /\.(css|less)$/,
                use: [
                    'style-loader',
                    { 
                        loader: 'css-loader',
                        options: { importLoaders: 1 } 
                    },
                    'less-loader'
                ]
            },
            {
                test:/\.(js|jsx)$/,
                use:"babel-loader",
                exclude:/node_modules/
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({template:'./src/index.html'}),
    ],
    devServer:{
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9000,
        proxy: {
            "/api": {
              target: "http://127.0.0.1:3000/",
              pathRewrite: {"^/api" : ""}
            }
          }
    }
}
複製代碼

babel的配置
建立.babelrc文件

{
    "presets": [
        ["env",{
            "targets": {
                "browsers": ["IE >= 9"]
            },
            "useBuiltIns": true
        }],
        "react",
        "stage-2"
    ]
}
複製代碼

index.html

<!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>react-architecture</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
複製代碼

index.js
萬變不離 Hello World~

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <h1>Hello World!</h1>,
    document.getElementById('root')
)
複製代碼

在package.json的 scripts 添加啓動命令

"start": "webpack-dev-server --open"
複製代碼

命令行運行 npm start 就能夠看效果了

總結

本章主要作了3件事：github

建立簡單的項目文件
安裝所須要依賴
webpack、babel 開發環境的配置， Hello World 基本代碼的編寫

下篇文章將介紹配置eslint 目錄架構

系列文章

源碼

相關標籤/搜索

每日一句

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