极客园PC-第1章 项目介绍与搭建
项目介绍
资料
- 短信接收&M端演示:http://geek.itheima.net/
- PC 端接口文档:http://geek.itheima.net/api-pc.html
项目介绍
「极客园」对标
CSDN
、博客园
等竞品,致力成为更加贴近年轻 IT 从业者(学员)的科技资讯类应用
产品关键词:IT、极客、活力、科技、技术分享、前沿动态、内容社交
用户特点:年轻有活力,对IT领域前言科技信息充满探索欲和学习热情
- 极客园 PC 端项目:个人自媒体管理端
- 项目演示
- 项目功能,包括
- 登录
- 首页
- 内容(文章)管理
- 文章列表
- 发布文章
- 修改文章
- 技术栈:
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
项目搭建
创建项目
- 使用 React CLI 搭建项目:
npx create-react-app geek-pc
- 进入项目根目录:`cd geek-pc
- 启动项目:
yarn start
- 调整项目目录结构:
/src
/assets 项目资源文件,比如,图片 等
/components 通用组件
/pages 页面
/utils 工具,比如,token、axios 的封装等、
/api 封装接口
App.js 根组件
index.css 全局样式
index.js 项目入口
配置基础路由
-
安装路由:
yarn add react-router-dom
-
在 pages 目录中创建两个页面:Login、Layout
src/pages/Layout/index.js
import { Component } from 'react'
class Layout extends Component {
render() {
return <div className="layout">首页布局</div>
}
}
export default Layout
src/pages/Login/index.js
import { Component } from 'react'
class Login extends Component {
render() {
return <div className="login">登录页</div>
}
}
export default Login
- 在 App 组件中,导入路由组件以及两个页面组件,配置路由规则
// 导入路由
import {
BrowserRouter as Router,
Route,
Switch,
Redirect,
} from 'react-router-dom'
// 导入页面组件
import Login from './pages/Login'
import Layout from './pages/Layout'
// 配置路由规则
function App() {
return (
<Router>
<div className="App">
{/* 路由规则 */}
<Switch>
<Redirect exact from="/" to="/home"></Redirect>
<Route path="/home" component={Layout}></Route>
<Route path="/login" component={Login}></Route>
</Switch>
</div>
</Router>
)
}
export default App
- 点击http://localhost:3000/login测试
组件库 - antd
antd
是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。开箱即用
- 安装:
yarn add antd
- 使用:
// 1 在 index.js 中导入 antd 的样式文件
import 'antd/dist/antd.css'
// 2 在 Login 页面组件中,使用 antd 的 Button 组件
import { Button } from 'antd'
const Login = () => (
<div>
<Button type="primary">Button</Button>
</div>
)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库