A10.从零开始前后端react+flask - HomPage

视频链接：https://www.bilibili.com/video/av77725321 

代码蓝本

本套教程是以https://github.com/xwh817/staff-manager （代码文件staff-manager.rar可见QQ群：952211102 ）为蓝本，肯定有比他写的更好的，但作为初学者，已经足够了 

现阶段，我们要做的项目，初期版本“卡片管理系统V0.1”，xiangfei-system_V0.1.rar，见QQ群 / https://github.com/JizhiXiang/Learn-react-flask-from-zero 
其中，`front-end`表示前端文件，`batck-end`表示后端（back打错了，汗，为了保持和之前一样防止报错，先不改了）。
 

要想运行，还是和A09后面介绍的一样，
一，`cd ./解压后的文件夹/front-end`  这一步进入前端目录。
二，`npm install`，安装所有依赖
三，`npm start`，启动前端
（以上，只是告诉你代码将长这样，下面才是开始项目）

 

 开始

我们就叫`from-zero-system`吧，新建文件夹`from-zero-system`，
进入该文件夹中，并且在cmd中输入`yarn create react-app front-end`，可参考[A08.从零开始前后端react+flask - 本地使用AntDesign] https://blog.csdn.net/GreatXiang888/article/details/103308619

新建项目成功。

再新建一个`back-end`文件夹，存放后端相应文件。
目录结构：
 

--from-zero-system
	|
	--back-end
	--front-end

App.js

将默认的front-end/src目录下 App.js内容修改为：

import React, {Component} from 'react';
import HomePage from './pages/HomePage'

import 'antd/dist/antd.css';
import './App.css';

class App extends Component{
  render() {
    return (
      <HomePage />
    );
  }
}

export default App;

HomePage.js

在front-end目录下新建文件夹pages，新建文件HomePage.js

至此，文件夹树形为：

同A09步骤二，输入：

npm install --save antd@3.15.1

（其实可以直接用前面新建的项目）

在HomePage.js中输入：

import React from 'react';
import { Layout} from 'antd';

const { Header, Content } = Layout;

class HomePage extends React.Component{
    render(){
        return (
            <Layout>
                <Header>
                    <div style={{lineHeight:'64px', fontSize:"20px", color:"white",textAlign:"center"}}> 
                        拉布拉卡 - 卡片管理系统
                    </div>
                </Header>

                <Content >
                    this is content.
                </Content>
            </Layout>
        );
    }
}

export default HomePage;

启动

Ctrl + `（在键盘左上角1的左边）

输入：

npm start

结果：