D1 --- 初始项目和静态页面

DAY 1

• 前端项目创建
• 路由
• layout
• 静态页面

地址

• 主页
• 代码

项目创建

1 安装nodejs(npm)

直接从官网装就可以，对各种操作系统都很友好，在国内的话可以把源设置成淘宝镜像

2 安装react并创建app

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

现在我们在目录portfolio中已经有项目的骨架结构了，进入目录，启动项目开发服务器

npm start 

然后可以看到这样的初始界面

init

3 Layout

然后我们为自己的项目搭一个layout，这个layout会显示在所有的界面中，用于功能页面的跳转。这里推荐两个前端框架，bootstrap和mdl，mdl里面有现成的layout，比bootstrap方便一些，所以在项目中导入mdl。

npm install react-mdl

在index.html中添加如下一行

在mdl官网选择一个喜欢的layout复制到App.js

修改index.js

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

ReactDOM.render(
    
            
    , 
    document.getElementById('root'));
...

然后 ...

layout

然后给它加点颜色吧，从uigradients选一个喜欢的颜色，在App.css中创建一个新的样式附给App.js最外面的div

    

        
            

                ...
            
            ...
        
    
  

layout

4 路由

现在layout已经写好了，要管理组件于url之间的关系，需要新建一个路由组件，这个组件最外层为一个标签，内部由构成。

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

const Main = () => (

    
        
    

);

export default Main;

然后再App.js中Layout下方增加

组件，路由就搭建完了。

5 Landing Page

在src中新建components目录，在目录中创建LandingPage.js。页面代码可以源代码自取，大部分源自youtubu视频。

图标来自fontawesome，但官网找不到CDN链接，可以直接google搜索fontawesome cdn就可以找到了。

bug : 这里的两个icon在edge上显示不了，好奇怪

landing

6 Contact Page

同样的，就是用html和css写的静态页面，没有什么特别的，可以在源代码中得到相关的代码

contact

7 Resume Page

这一页是个大坑，有兴趣的可以到youtube上跟那个学习怎么用html写简历，但我因为有pdf版本的，所以就想用'react-pdf'来做，坑多到令人哭泣，直到现在，页面上的那两个按钮还不太认同他们自己的按钮身份，毫无反应。

Bug: 按钮无反应

所以推荐这一页不要像我这么做，自己用html写一个简历或者找一个更好的pdf轮子。

cv

8 build

在package.json里面配置自己的主页地址，运行npm run build，把build里面的内容复制到主页地址目录下，把html部署到服务器能看到的地方就ok了