使用create-react-app搭建一個react項目

前言

由於這幾天空閒,因此抽空研究了一下主流的前端框架react,在研究期間由於從零開始, 遇到過挺多問題,幸虧不算艱難,到今天初步分析研究清楚了react的基本步驟和關於使用 redux操做數據源的理解. 本文主要介紹使用create-react-app腳手架來搭建一個 react項目的基礎步驟,後面會跟上對於在react項目中使用按需加載路由及redux管理 項目數據源的代碼操做和分析.

開始搭建項目

使用create-react-app搭建react項目的基本步驟網上都找獲得,也有說明,這裏就不贅述了,主要把步驟放在下面給初學的朋友.

1.安裝腳手架create-react-app

npm i  create-react-app -g      (-g安裝後,之後在相同文件夾下建立項目就能夠直接從2開始了)
複製代碼

2. 建立我的項目

create-react-app  my-test1     (項目名, 這裏取my-test)
複製代碼

3. 建立完成後進入my-test項目文件夾

cd my-test1
複製代碼

4.終端進入項目後, 安裝路由依賴

npm i react-router-dom     (用於操做react頁面路由跳轉)
複製代碼

5. 安裝完路由依賴以後,安裝按需加載路由的依賴(有不少種方式,做者在此處使用的時react-loadable, 以爲這種形式對於一些添加權限性質頁面更好操做,主要是看中維護性高,固然,我的看法)

npm i react-loadable     (此依賴用於按需加載路由,只有須要用到的路由會被加載)
複製代碼

以上做爲一個單純的實現按需加載路由的簡單的react項目須要的依賴就安裝完成了, redux我會放在下一篇文章中講, 分開對初學者更好分析和理解一些.

接下來就能夠開始實現一個簡單的按需跳轉的路由功能項目了

首先進入到項目文件下的src目錄中,找到index.js文件,如上圖.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router, Route } from 'react-router-dom'

ReactDOM.render(
    <Router>
        <Route component={App}></Route>
    </Router>
, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

複製代碼

而後導入Route, 爲App添加路由標籤

這裏解釋一下, 紅方塊和綠方塊分別是兩種路由模式:

• 紅圈表明的是BrowserRouter模式, 最直觀的體如今於網頁的地址欄路徑是沒有hash值的 (/#/)
• 綠圈表明的是HashRouter模式, 最直觀的體如今於網頁的地址欄路徑包含(/#/)

這裏我選擇的是第一種,不懂兩個模式區別的能夠搜搜看,大體就是請不請求服務器的區別,有過vue經驗的朋友應該很好理解, 這裏也附上一個連接,感興趣的朋友能夠看看 blog.csdn.net/gwdgwd123/a…

接下來咱們修改APP.JS文件

首先把導入的logo去掉,由於咱們不須要, 而後 從react-router-dom中導入 { Switch, Route, Redirect } . 而後去掉App函數返回部分app盒子下的header子盒子. 而後寫上咱們要的路由斷定

這裏說明一下 :

• Switch標籤包含在Route 和Redirect標籤外的意義在於,它會讓輸入的路由只匹配到搜索的路由, 有興趣的能夠等以後路由搭建完成後,去除Switch標籤,而後地址欄輸入路由進行跳轉, 其中'/'所指代的路由也是會被同時匹配到的,而加了Switch標籤就能夠解決這個問題.
• Redirect標籤用於頁面路由跳轉的重定向, exact表示精準匹配. from是輸入的路由路徑, to是當輸入from的路徑時,重定向到某個設定的路由路徑.
• Route用於建立各個頂層頁面的路由對象, 常規來說,會有 path和component屬性,分別指代路由和對應組件頁面.

這裏我就直接貼最終的app代碼了

import React, { Component } from 'react';
import './App.css';
import { Switch, Route, Redirect} from 'react-router-dom'
import routes from './router/router.js'

class App extends Component {
  render () {
    return (
      <div className="App">
        <Switch>
          {
            routes.map(route => {
              return (
                <Route
                  key = { route.path }
                  path = { route.path }
                  component = { route.component } />
               )
             })
           }
           <Redirect exact from = '/'  to = { routes[0].path } />
           <Redirect to = '/404' />
         </Switch>
      </div>
    );
  }
  
}

export default App;

複製代碼

作完上述內容以後,app.js能夠先暫時放一邊,能夠開始建立項目的頁面組件了.

首先是在src目錄下建立三個文件夾, 分別是 component, pages, router, 三者分別存放共用組部件, 頁面組件, 路由設置文件.

而後先在components裏建立一個header的共用頭部組件. 建立組件和共用組件的文件格式大體相同, 即先建立一個存儲組件的文件夾,而後在文件夾下建立一個index.js用於構建組件, 一個.css文件做爲樣式文件,(固然,也能夠所有寫到一個樣式文件中.)

import React, { Component } from 'react';
// NavLinK做爲跳轉路由標籤,如經常使用的側邊欄跳轉高亮效果就可使用這個標籤
import { NavLink } from 'react-router-dom';
import './Header.css'

// 聲明跳轉路由時,當前跳轉對象的背景色及顏色,以做高亮區分
const selectedStyle = {
    backgroundColor: 'red',
    color: 'slategray'
}

class Header extends Component {
    render () {
        return (
            <nav>
                <NavLink to = '/home' activeStyle = { selectedStyle }> 首頁 </NavLink>
                <NavLink to = '/Detail' activeStyle = { selectedStyle }> 詳情 </NavLink>
                <NavLink to = '/Login' activeStyle = { selectedStyle }> 登陸 </NavLink>
                <NavLink to = '/Collecte' activeStyle = { selectedStyle }> 收集 </NavLink>
            </nav>
        )
    }

}

// 最後要將Header暴露出來
export default Header
複製代碼

而後在components目錄下建立一個index.js 把Header組件暴露出來

export { default as Header } from './Header'
複製代碼

建立完共用組件後,能夠進行頁面級組件的構建,這裏我只作四個頁面級組件以做爲案例.分別爲Home, Collecte, Detail , Login, 建立方式同上

import React, { Component } from 'react';
import {Header} from '../../components'

// 這裏幾個頁面級組件的結構都同樣,改類名就行
class Detail extends Component {
    render () {
        return (
            <div>
                <Header/>
                詳情頁
            </div>
        )
    }
}

export default Detail
複製代碼

須要注意的是404頁面不能建立數字類404, 因此改成NotFound, 並且也不須要什麼共用組件.

import React, { Component } from 'react';

class NotFound extends Component {
    render () {
        return (
            <div>
                 找不到網頁
            </div>
        )
    }
}

export default NotFound
複製代碼

ps:這裏說一下,爲何建立index.js而不是在組件文件夾下建立Home.js之類的, 這個固然能夠, 只是index.js會被自動尋找識別,引入的時候能夠偷懶一下.

建立完頁面級組件以後,基本上完成一半了, 接下來能夠建立路由文件了, 首先,咱們要在pages目錄下建立一個index.js文件, 用於設置按需加載的頁面級組件.

import Loadable from 'react-loadable';

const Loading = () => null;

const Home = Loadable ({
    loader: () => import('./Home'),
    loading: Loading
});

const Collecte = Loadable ({
    loader: () => import('./Collecte'),
    loading: Loading
});

const Detail = Loadable ({
    loader: () => import('./Detail'),
    loading: Loading
});

const Login = Loadable ({
    loader: () => import('./Login'),
    loading: Loading
});

const NotFound = Loadable ({
    loader: () => import('./404'),
    loading: Loading
});

export { Home, Detail, NotFound, Login, Collecte }
複製代碼

這樣設置完成後,就能夠在用到哪一個路由時才加載哪個了.

而後最後兩步, 在router文件下定義路由. 能夠忽略掉那個store文件夾,後續講redux用的.在這裏面,routes集合裏的每一項你均可以添加一些其餘的屬性,諸如meta屬性用於區分權限,text屬性用於引用顯示手機端底欄選項名等等.

import { Home, Detail, NotFound, Login, Collecte } from '../pages/index';

const routes = [{
    path: '/home',
    component: Home
},{
    path: '/Collecte',
    component: Collecte
},{
    path: '/Detail',
    component: Detail
},{
    path: '/404',
    components: NotFound
},{
    path: '/Login',
    component: Login
}];

export default routes

複製代碼

定義完路由以後,就能夠補全app.js裏的內容了

到這時候,整個簡單的路由項目就完成了,能夠看實效,代碼我稍後看下上傳到git上.