React简单个人网站项目记录Part1 - 安装项目和依赖、首页

安装项目： 

1. npm install -g create-react-app
2. create-react-app my-app
3. cd my-app
4. yarn start
5. npm install react-router-dom
6. yarn add antd
7. yarn add sass-loader node-sass --save-dev

sass配置看这里->React的Sass配置

Ant Design配置看这里->Ant Design of React

1：项目页面目录 

2：App.js

import React from 'react'
import Home from '../src/pages/Home'
import User from '../src/pages/User'
import Blog from '../src/pages/Blog'
import About from '../src/pages/About'
import './App.scss'
import 'antd/dist/antd.css'
import { Tabs } from 'antd'
const { TabPane } = Tabs

function App() {
  return (
      <div className="app">
        <Tabs defaultActiveKey="1" centered tabPosition='right'>
          <TabPane tab="首页 *" key="1">
            <Home></Home>
          </TabPane>
          <TabPane tab="关于 *" key="2">
            <About></About>
          </TabPane>
          <TabPane tab="作品 *" key="3">
            <User></User>
          </TabPane>
          <TabPane tab="博客 *" key="4">
            <Blog></Blog>
          </TabPane>
        </Tabs>
      </div>
  )
}

export default App

 3:Home/index.js

import React from 'react'
import "../Home/index.scss"
import { Row, Col,Typography} from 'antd';
import flowerImg from '../../assets/image/flower.png';
const { Title } = Typography;
function Home() {
  return (
    <div className='home'>
       <Row className="row_l">
            <Col span={1}></Col>
            <Col span={10}>
                <img src={flowerImg} alt= "花朵图片" className="flowerImg"/>
            </Col>
            <Col span={10} className="col_r">
                <div>
                    <p className="title_slogan">你躲在角落 凭什么奢求世界给你万众瞩目</p>
                    <Title>
                        <span className="dark_blue_c">程序 · </span>
                        <span className="black_c">源于生活</span>
                    </Title>
                </div>
            </Col>
            <Col span={1}></Col>
        </Row>
    </div>
  );
}

export default Home;