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

最新推荐文章于 2024-08-31 07:05:14 发布

那是遇知吧

最新推荐文章于 2024-08-31 07:05:14 发布

阅读量256

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/weixin_41406727/article/details/109317872

版权

React 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何使用Create React App快速搭建React项目，并通过实际案例演示了React Router的基本用法，包括页面组件的组织与展示。同时，还涉及到了Ant Design组件库的配置与使用方法。

摘要由CSDN通过智能技术生成

路由：react路由介绍、React路由-基础篇、React路由-进阶篇

安装项目：

npm install -g create-react-app
create-react-app my-app
cd my-app
yarn start
npm install react-router-dom
yarn add antd
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;