react项目实战案例

1.项目介绍：主要将学习到的项目内容进行总结（有需要项目源码的可以私信我）

2.项目效果

1）登录页面

3.关于我的项目的配置如下，请注意下载的每个版本不一样，写的api也不一样

一、项目介绍
1.资料
1）短信接收&M端演示：
极客园
http://geek.itheima.net

2）PC端接口文档：
极客园PC
http://geek.itheima.net/api-pc.html

2.项目介绍
1）【极客园】对标CSDN、博客园等竞品，致力成为更加贴近年轻IT从业者（学员）的科技资讯类应用

2）产品关键词：IT、极客、活力、科技、技术分享、前沿动态、内容社交

3）产品用户特点：年轻有活力，对IT领域前沿科技信息充满探索欲和学习热情

4）极客园PC端项目：个人自媒体管理端

5）项目演示

6）项目功能

登录
首页
内容管理（文章列表、发布文章、修改文章）
3.技术栈
react v17.0.2 / react-dom v17.0.2
ajax请求库：axios
路由：react-router-dom以及history
富文本编辑器：react-quill
CSS预编译器：sass
UI组件库：antd v4
项目搭建：React官方脚手架 create-react-app
二、项目搭建
1.创建项目
使用React CLI搭建项目 npx create-react-app geek-pc
进入项目根目录：cd geek-pc
启动项目： yarn start
调整项目目录结构：

2.使用git管理项目
1）在git网站上添加自己的项目仓库

Gitee - 基于 Git 的代码托管和研发协作平台

2）点击新建仓库，添加自己的项目路径就可以

3.配置基础路由
​​​​​​​1）安装路由：yarn add react-router-dom

​​​​​​​

使用yarn add的时候可能会报上述错误，报的话可以使用npm install react-router-dom来进行安装

2）在pages目录中创建两个页面：Login（登录页面）、Layout（首页）

3）在App.js中配置路由

import React from 'react'
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'
import Login from './pages/Login'
import Layout from './pages/Layout'
function App() {
  return (
    <Router>
      <div className="App">
        {/* <Link to="/login">登录</Link>
        <Link to="/home">首页</Link> */}
        {/* 配置路由的规则 */}
        <Routes>
          <Route path="/home" element={<Layout />}></Route>
          {/* <Route path="/home" component={<Layout></Layout>}></Route> */}
          <Route path="/login" element={<Login></Login>}></Route>
        </Routes>
      </div>
    </Router>
  )
}
 
export default App