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中添加如下一行

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

在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(
    <BrowserRouter>
        <App />    
    </BrowserRouter>, 
    document.getElementById('root'));
...

然后 ...

layout

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

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

layout

4 路由

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

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 />组件，路由就搭建完了。