DAY 1

• 前端項(xiàng)目創(chuàng)建
• 路由
• layout
• 靜態(tài)頁面

地址

• 主頁
• 代碼

項(xiàng)目創(chuàng)建

1 安裝nodejs(npm)

直接從官網(wǎng)裝就可以锌蓄，對各種操作系統(tǒng)都很友好，在國內(nèi)的話可以把源設(shè)置成淘寶鏡像

2 安裝react并創(chuàng)建app

npm install --save react 
npm init react-app portfolio
cd portfolio 
npm install react-router react-router-dom

現(xiàn)在我們在目錄portfolio中已經(jīng)有項(xiàng)目的骨架結(jié)構(gòu)了瘸爽，進(jìn)入目錄，啟動項(xiàng)目開發(fā)服務(wù)器

npm start 

然后可以看到這樣的初始界面

init

3 Layout

然后我們?yōu)樽约旱捻?xiàng)目搭一個layout铅忿，這個layout會顯示在所有的界面中剪决，用于功能頁面的跳轉(zhuǎn)。這里推薦兩個前端框架檀训，bootstrap和mdl昼捍，mdl里面有現(xiàn)成的layout，比bootstrap方便一些肢扯，所以在項(xiàng)目中導(dǎo)入mdl。

npm install react-mdl

在index.html中添加如下一行

<link rel="stylesheet" >

在mdl官網(wǎng)選擇一個喜歡的layout復(fù)制到App.js

修改index.js

...
import 'react-mdl/extra/material.css';
import 'react-mdl/extra/material.js';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App />    
    </BrowserRouter>, 
    document.getElementById('root'));
...

然后 ...

layout

然后給它加點(diǎn)顏色吧担锤，從uigradients選一個喜歡的顏色蔚晨，在App.css中創(chuàng)建一個新的樣式附給App.js最外面的div

    <div>
        <Layout>
            <Header className="header-color">
                ...
            </Header>
            ...
        </Layout>
    </div>  

layout

4 路由

現(xiàn)在layout已經(jīng)寫好了，要管理組件于url之間的關(guān)系肛循，需要新建一個路由組件铭腕，這個組件最外層為一個<Switch>標(biāo)簽，內(nèi)部由<Route>構(gòu)成多糠。

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import LandingPage from './LandingPage';

const Main = () => (

    <Switch>
        <Route exact path="/" component={LandingPage} />
    </Switch>

);

export default Main;

然后再App.js中Layout下方增加<Main />組件累舷，路由就搭建完了。

5 Landing Page

在src中新建components目錄夹孔，在目錄中創(chuàng)建LandingPage.js被盈。頁面代碼可以源代碼自取，大部分源自youtubu視頻搭伤。

圖標(biāo)來自fontawesome只怎，但官網(wǎng)找不到CDN鏈接，可以直接google搜索fontawesome cdn就可以找到了怜俐。

bug : 這里的兩個icon在edge上顯示不了身堡，好奇怪

landing

6 Contact Page

同樣的，就是用html和css寫的靜態(tài)頁面拍鲤，沒有什么特別的贴谎，可以在源代碼中得到相關(guān)的代碼

contact

7 Resume Page

這一頁是個大坑汞扎，有興趣的可以到y(tǒng)outube上跟那個學(xué)習(xí)怎么用html寫簡歷，但我因?yàn)橛衟df版本的擅这，所以就想用'react-pdf'來做澈魄，坑多到令人哭泣，直到現(xiàn)在蕾哟，頁面上的那兩個按鈕還不太認(rèn)同他們自己的按鈕身份一忱，毫無反應(yīng)。

Bug: 按鈕無反應(yīng)

所以推薦這一頁不要像我這么做谭确，自己用html寫一個簡歷或者找一個更好的pdf輪子帘营。

cv

8 build

在package.json里面配置自己的主頁地址，運(yùn)行npm run build逐哈，把build里面的內(nèi)容復(fù)制到主頁地址目錄下芬迄，把html部署到服務(wù)器能看到的地方就ok了