react 結合gitte 建立專案(詳情步驟)

阿新 • • 發佈：2021-07-07


建立專案第一步 基本搭建
在建立之前，需要有一個git 倉庫，我們要把專案搭建到git 中
目錄介紹

    cd 到某個盤
    mkdir workspace 建立workspace資料夾
    cd workspace 進入workspace資料夾
    workspace一般為我們倉庫和專案總目錄
        git@1 倉庫一（前端自己專案，如果自己是前端leader）
            www.bdplus.cn 為上線資料夾
                pc或w 為 pc 電腦端專案
                h5或m  為h5 網頁或app 中網頁或公眾號
                minstore 小程式(如果分微信和支付寶可wminstore tminstore)
                app 前端app 使用者開發
                mkdown (一些備註檔案)
            以下為正常開發專案，以上為對應上線打包後文件
            w
            h5
            minstore
            app
            mkdown
            如果有其他方式可自己組織

        git@2 倉庫二 （其他專案比如後端等）
        git@3 倉庫三

Cmd

Copy

檢視node 版本
node -v
或
使用nvm 進行node 版本安裝與切換

1、node 版本
nvm use v14
    Now using node v14.15.3 (npm v6.14.9)
node -v
    v14.15.3
為了保證同步，選擇node 版本14
2、開始建立專案
npx create-react-app my-app
    官方標準命令，my-app 為專案名稱
    npx create-react-app scss-route-mobx
....
3、git倉庫提交
這塊你要進行git 提交  主要在企業做專案就應該放到倉庫中，如果企業沒有，那自己也要弄個倉庫，哪天在家改個東西，或像今年的疫情在家辦公所以，只要遠端倉庫有程式碼，電腦就是另一個事了。
4、cd scss-route-mobx  進入專案目錄
    先進入到這個專案目錄
5、yarn eject  開啟配置檔案
    這時候先不著急啟專案，先把配置檔案開啟就是webpack 這些基礎配置開啟
6、yarn start   啟動專案
    這時候你再起專案。 算是勉強建立了一個專案


Cmd

Copy

建立專案第二步 sass安裝

1、sass 安裝
yarn add node-sass-chokidar
yarn add npm-run-all
2、修改package.json
"scripts": {
        "build-css": "node-sass-chokidar src/ -o src/",
        "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive  --use-polling --polling-interval 1000",
        "start-js": "node scripts/start.js",
        "start": "npm-run-all -p watch-css start-js",
        "build-js": "node scripts/build.js",
        "build": "npm-run-all build-css build-js",
        "test": "node scripts/test.js --env=jsdom"
},

Cmd

Copy

建立專案第三步 yarn build 打包注意事項

新建一個.env檔案與package.json 同在根目錄下
GENERATE_SOURCEMAP=false
以下三種路徑
PUBLIC_URL=https://www.a.com/
PUBLIC_URL=./
PUBLIC_URL=/

JSON

Copy

啟動成功並編譯成功表示react專案建立成功
至此 一個基本的react 專案算是建立成功了

建立專案第四步 設定代理、nginx 路由配置、跨域處理

src/setupProxy.js 建立檔案
yarn add http-proxy-middleware axios
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(
      '/home',createProxyMiddleware({
        target: 'https://#####.com/',
        changeOrigin: true,
      })
    );
    app.use(
      '/wp-json',createProxyMiddleware({
        target: 'https://#####.cn/',
        changeOrigin: true,
      })
    );
};


以下是具體某個頁面中使用
obj = {
mediareports:{
                page_number:'2',
                page_size:'10'
            }
}
const cfg = this.state.mediareports;
this.getApi('/home/mediareports',cfg,{}).then((res)=>{
    console.log(res.data)
})
this.getApi('/wp-json/wp/v2/posts',{},{}).then((res)=>{
    console.log(res.data)
})

async getApi(url,cfg,headers){
    let data = await axios.get(url,{params:cfg},
                               {
        headers: headers
    })
    return data;
}




React JSX

Copy

建立專案第五步 react react-router 路由

react 的檔案目錄是怎麼樣
1、pubilc
    - index.html
    - favicon.ico
    - manifest.json
        移動App的配置檔案,用於指定應用的顯示名稱、圖示、入口頁面等資訊.
2、src
    - components
        - alert
            index.jsx
        - footer
            index.jsx
        - nav
            index.jsx
        比如：
        導航、彈出層、loading載入動畫、分頁器等
    - images
        凡事頁面中<img src>標籤使用的圖片
    - js
        頁面中編寫的js功能及開發檔案
    - store
        mobx
        context
    - styles
        img/
        css、less、scss
    - unit
        js一些元件
        比如，
            如果不用jq,自己封裝一些js 的方法
            如果手機端有活動頁面都需要下載app,同的app 的判斷
            如果有彈出去js等
    - view
        home
            index.jsx
        about
            index.jsx
        joined
            index.jsx
            list.jsx
            other.jsx
    - other

HTML

Copy

1、匯入包
yarn add react-router-dom;

PS:
react-router 和 react-router-dom

react-router: 實現了路由的核心功能。
react-router-dom: 基於react-router，加入了在瀏覽器執行環境下的一些功能。

react-router-dom 是 react-router 的加強版唄

因為 React Native 也要路由系統呀。所以還有一個庫叫 react-router-native，這個庫也是基於 react-router 的，它類似 react-router-dom，加入了 React Native 執行環境下的一些功能。


react-router-dom
react-router-native

React BrowserRouter和HashRouter的區別

BrowserRouter：h5路由（history API）
HashRouter：雜湊路由

主要區別

BrowserRouter 和 HashRouter 都可以實現前端路由的功能

BrowserRouter 實現的是單頁面的路由切換
HashRouter 實現的是全域性路由切換

從原理上

HashRouter在路徑中包含了#，相當於HTML的錨點定位。（# 符號的英文叫hash，所以叫HashRouter，和雜湊沒關係哦））

而BrowserRouter使用的是HTML5的新特性History，沒有HashRouter(錨點定位)那樣通用，低版本瀏覽器可能不支援。

從用法上

BrowserRouter進行元件跳轉時可以傳遞任意引數實現元件間的通訊，而HashRouter不能(除非手動拼接URL字串)，因此一般配合Redux或mobx使用，實現元件間的資料通訊。



Cmd

Copy

2、新增加Router.js檔案

import React from 'react';

import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom';

import App from './App.js';

const Router = () => (
    <BrowserRouter>
        <App/>
    </BrowserRouter>
)
export default Router;
JavaScript

Copy

3、修改index.js

原App 換成

import Router from './Router';

<Router />
JavaScript

Copy

4、App.js(需增加程式碼分割)

import React , { Component, Suspense, lazy } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';

const Home = lazy(() => import('./views/Home'));
import Input from './view/input';
import Event from './view/event';

class App extends Component {
    render(){
        return (
            <Suspense fallback={<div>Loading...</div>}>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/input" component={Input} />
                <Route path="/event" component={Event} />
            </Switch>
            </Suspense>
        );
    }
}
export default App;
JavaScript

Copy

5、新增頁面

./view/home/index.jsx
./view/input/index.jsx
./view/event/index.jsx
內容自定義

import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';

<NavLink to="/">首頁</NavLink>
<NavLink to="/input">表單</NavLink>
<NavLink to="/event">事件</NavLink>
React JSX

Copy

import React , { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
class View extends Component {
    render(){
        return (
            <React.Fragment>
                <div className="mian">這是首頁面</div>
                <NavLink to="/">首頁</NavLink><br/>
                <NavLink to="/input">表單</NavLink><br/>
                <NavLink to="/event">事件</NavLink>
            </React.Fragment>
        )
    }
}
export default View;
React JSX

Copy

建立專案第六步 Redux

1、安裝yarn add react-redux redux
2、router store 注入

import {Provider} from 'react-redux';
<Provider stores={store}>
    <App/>
</Provider>

完整程式碼
import React from 'react';

import { BrowserRouter, HashRouter} from 'react-router-dom';

import App from './App.js';


import {Provider} from 'react-redux';
import Store from './store/store.js';

const Router = () => (
    <BrowserRouter>
        <Provider store={Store}>
            <App/>
        </Provider>
    </BrowserRouter>
)
export default Router;


React JSX

Copy

3、建立整個專案 store.js
src/store/store.js

import {createStore, combineReducers} from 'redux';

import {reducer as addReducer} from './views/action/_index.js';


const reducer = combineReducers({
    add:addReducer,
    // remove:removeReducer,
    // edit:editReducer,
})

export default createStore(reducer);


----
我需要建立 Store.js
引入 多個 reducer (store資料片段)

combineReducers 合併整合多個reducer

再進行 createStore()
第一引數 reducer (純函式，返回新的state)
第二個引數 state 初始化值 null
第三個 中介軟體

到這個位置
router 基本不需要再修改了
store 只需引入 所需 view下的頁面中的reducer

createStore

React JSX

Copy

第四步

關於每個view 頁面
views
home
每個頁面都需要一個state
state 如何生成 Reducer(返回新的state)

    action
        物件 return{}
        type 每個action 名稱
    ActionTypes
    reducer
        根據具體的action 名稱（type對應)
        來編寫或計算返回新的state
        [...new,..state]
        Object.assign()
    以上是具體當前view 頁面內部以外的redux
    jsx
about
    每個頁面都需要一個state
news
    每個頁面都需要一個state
usercenter
    每個頁面都需要一個state
React JSX

Copy

第五步

如何與頁面互動
匯入
import {connect} from ‘react-redux’;

匯出
export default connect(mapStateToProps,mapDispatchToProps)(View);

function mapStateToProps(state) {
return {
isList:state.add
}
}

state.add
add 是哪來的就是我們Store.js
自定義的reducer
const reducer = combineReducers({
add:addReducer,
// remove:removeReducer,
// edit:editReducer,
})

isList
當前元件 this.props 可以接受到
const {onAddFn,isList,onRemoveFn} = this.props;

輕鬆的拿到對應 reducer 返回的 State

怎麼操作 action

//是一個函式，會得到dispatch和ownProps（容器元件的props物件）兩個引數。
const mapDispatchToProps = (dispatch, ownProps) => {
// const {id} = ownProps;
return {
onAddFn: () => dispatch(AddTodo(‘add’))
}
};
onAddFn: () => dispatch(AddTodo(‘add’))

dispatch 操作action

onAddFn 通過this.props 來使用
onClick = {onAddFn}
onAddFn 為自定義在當前view 頁面使用

　　本章CSDN地址:https://mp.csdn.net/mp_blog/creation/editor/117437129

注:商業用途禁止轉載