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

時間 2019-11-16

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

原文原文鏈接

前言

這篇文檔咱們來配置 eslint，建立項目文件、目錄架構javascript

開發

1、配置eslint

配置eslint我須要安裝一些依賴包：html

npm install -D eslint eslint-loader eslint-plugin-react babel-eslint
複製代碼

修改webpack.config.js文件java

{
    test:/\.(js|jsx)$/,
    use:["babel-loader", "eslint-loader"],
    exclude:/node_modules/
}
複製代碼

建立.eslintrc.js 文件node

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends":[
        "eslint:recommended",
        'plugin:react/recommended',
    ],
    "parser": 'babel-eslint',
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ],
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'no-console': 0
    }
};
複製代碼

固然，也能夠使用eslint --init來建立react

> eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Windows
? Do you require semicolons? No
? What format do you want your config file to be in? JavaScript
複製代碼

eslint 的配置規則有不少，能夠按照本身喜歡的方式來，網上也有不少很好的規則，這裏就不一一介紹了。webpack

2、完善項目文件、目錄結構

先來看下咱們上一篇時建立的簡單目錄結構git

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

很簡單，實際項目中的結構不會這麼簡單，讓我整體看下實際的目錄結構吧es6

├── mock                            # 本地模擬數據
├── public
├── src
|   ├── assets                      # 本地靜態資源
│   ├── common                      # 應用公用配置，如導航信息
│   ├── components                  # 項目通用通用組件
│   ├── routes                      # 業務頁面入口和經常使用模板
│   ├── utils                       # 工具庫
│   ├── index.html                  # HTML 入口模板
│   ├── index.js                    # 應用入口
│   ├── index.less                  # 全局樣式
│   └── router.js                   # 路由入口
├── tests                           # 測試工具
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── package-lock.json
├── package.json
└── webpack.config.js
複製代碼

個人目錄結構大概就是這樣，可能會有差異哦~web

好，下面讓咱們建立一些代碼,在routes文件夾下建立一個Home.jsxshell

import React, {PureComponent} from 'react'

export default class Home extends PureComponent{

    render(){
        return (
            <div>Hello World!</div>
        )
    }
}
複製代碼

router.js裏

import React from 'react'
import {Route,HashRouter} from 'react-router-dom'

import Home from './routes/Home.jsx'

const RouterConfig = ()=>{

    return (
        <HashRouter> <Route path="/" component={Home}/> </HashRouter> ) } export default RouterConfig 複製代碼

index.js裏

import React from 'react'
import ReactDOM from 'react-dom'
import Router from './router'

ReactDOM.render(
    <Router />, document.getElementById('root') ) 複製代碼