React项目实战--------极客园项目PC端

这篇具有很好参考价值的文章主要介绍了React项目实战--------极客园项目PC端。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

2.项目效果

1)登录页面

React项目实战--------极客园项目PC端,react.js,前端,前端框架

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

React项目实战--------极客园项目PC端,react.js,前端,前端框架

一、项目介绍

1.资料

1)短信接收&M端演示:极客园http://geek.itheima.net

2)PC端接口文档:极客园PChttp://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.创建项目

  1. 使用React CLI搭建项目 npx create-react-app geek-pc
  2. 进入项目根目录:cd geek-pc
  3. 启动项目: yarn start
  4. 调整项目目录结构:

React项目实战--------极客园项目PC端,react.js,前端,前端框架

2.使用git管理项目

1)在git网站上添加自己的项目仓库

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

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

React项目实战--------极客园项目PC端,react.js,前端,前端框架

React项目实战--------极客园项目PC端,react.js,前端,前端框架​​​​​​​

3.配置基础路由

​​​​​​​1)安装路由:yarn add react-router-dom

React项目实战--------极客园项目PC端,react.js,前端,前端框架

​​​​​​​React项目实战--------极客园项目PC端,react.js,前端,前端框架

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

React项目实战--------极客园项目PC端,react.js,前端,前端框架

2)在pages目录中创建两个页面:Login(登录页面)、Layout(首页)

React项目实战--------极客园项目PC端,react.js,前端,前端框架

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

配置完路由就可以实现,网页输入网址,展示对应的页面的内容

React项目实战--------极客园项目PC端,react.js,前端,前端框架

此时需要注意的点是:

a.老版本用component = {<Layout/>}来链接到页面,新版本用这个无效,得使用element

b:旧版本使用Switchl来添加多个路由,新版本使用Routes

<Switch>
 <Route> </Route>
 <Route></Route>
</Switch>

4.组件库---antd

1)官方文档链接

Ant Design - 一套企业级 UI 设计语言和 React 组件库

2)antd是基于Ant Design设计体系的React UI组件库,主要用于研发企业级中后台产品

3)开箱即用

a.安装:npm install antd

b.使用

import { Button, DatePicker, Card } from 'antd'
<Button type="primary">我是一个按钮</Button>

// 导入antd的全局样式
import 'antd/dist/reset.css'

React项目实战--------极客园项目PC端,react.js,前端,前端框架

三、项目功能------登录

功能如下:​​​​​​​

  • 搭建登录页面结构
  • 登录表单校验
  • 登录逻辑
  • 封装处理token、axios的工具函数
  • 登录访问控制

​​​​​​​1.Card组件的使用

export default class Login extends Component {
  render() {
    return (
      <div className="login">
        {/* 登陆组件 */}
        {/* <Button type="primary">我是一个按钮</Button> */}
        {/* <DatePicker></DatePicker>  */}
        {/* <Card extra={<a href="#">More</a>} style={{ width: 300 }}> */}
        <Card className="login-container">
          {/* <p>Card content</p>
          <p>Card content</p>
          <p>Card content</p> */}
          <img src={logo} className="login-logo" />
          
        </Card>
      </div>
    )
  }
}

2.准备样式

.login {
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/login.png');
  position: relative;
}
.login-container {
  width: 440px;
  height: 360px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login-logo {
  width: 200px;
  height: 40px;
  display: block;
  margin: 0 auto 20px;
}

3.使用绝对路径导入图片

我们使用相对路径../导入图片可能存在文件位置移动找不到图片的效果,所以使用绝对路径来配置

Importing a Component | Create React App

1)在项目根目录下创建jsconfig.json文件

React项目实战--------极客园项目PC端,react.js,前端,前端框架

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

2)导入删除掉相对路径

import logo from 'assets/logo.png'

4.使用sass文件修改掉css文件

1)安装sass

React项目实战--------极客园项目PC端,react.js,前端,前端框架

2)将css文件后缀改为.sass

React项目实战--------极客园项目PC端,react.js,前端,前端框架

3)使用sass以后就可以实现样式包裹,但是里面如果使用绝对路径会进行报错,所以需要使用~来进行导入

.login {
  width: 100vw;
  height: 100vh;
  background-image: url('~assets/login.png');
  position: relative;

  .login-container {
    width: 440px;
    height: 360px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .login-logo {
    width: 200px;
    height: 40px;
    display: block;
    margin: 0 auto 20px;
  }
}

四、react-router-dom V6版本进行导航

1.给表单添加注册事件,点击登录按钮进行页面的跳转

1)V5版本进行页面跳转可以使用this.props.history.push('/home'),但是在v6版本中已经废弃掉,所以此参数无效

2)使用useNavigate()来进行跳转

const navigate = useNavigate()
navigate('/home')

React项目实战--------极客园项目PC端,react.js,前端,前端框架

但是会报上述错误,是因为userNavigate()是hook函数,hook函数只能在函数组件中进行使用

3)使用高阶组件封装实现类组件可以进行路由跳转

a.封装一个withRouter组件

import {
  useParams,
  useLocation,
  useNavigate,
  useSearchParams,
} from 'react-router-dom'

export default function withRouter(Component) {
  // 相当于给 MyCard组件添加各种props属性,还添加三个重要的属性params,location,navigate

  return (props) => (
    <Component
      {...props}
      searchParams={useSearchParams()}
      params={useParams()}
      location={useLocation()}
      navigate={useNavigate()}
    />
  )
}

b.导入withRouter组件

import withRouter from './withRouter'

c.默认导出

export default withRouter(Login)

d.使用navigate实现跳转

 this.props.navigate('/home')

五、VSCode进行断点调试

六、react样式冲突

1.组件样式覆盖问题

只要导入了组件,不管组件有没有显示在页面中,组件的样式就会生效

2.解决方案

1)手动处理(起不同的类名)

2)CSS IN JS:以js的方式来处理css

css不是一门编程语言,没有全局作用域和局部作用域的问题,css只有局部作用域

3.CSS IN JS

1)CSS IN JS:是使用

​​​​​​​文章来源地址https://www.toymoban.com/news/detail-788168.html

​​​​​​​

到了这里,关于React项目实战--------极客园项目PC端的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【实战】三、TS 应用:JS神助攻 - 强类型 —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(三)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月11日
    浏览(55)
  • 简介:在这篇教程中,我们将使用React.js框架创建一个简单的聊天机器人的前端界面,并利用Dialogflo

    作者:禅与计算机程序设计艺术 介绍及动机 聊天机器人(Chatbot)一直是互联网领域中的热门话题。而很多聊天机器人的功能都依赖于人工智能(AI)技术。越来越多的企业希望拥有自己的聊天机器人系统,从而提升自己的竞争力。为此,业界也出现了很多基于开源技术或云

    2024年02月06日
    浏览(60)
  • 【实战】 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(下) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(七)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月12日
    浏览(40)
  • 【实战】 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(上) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(六)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月12日
    浏览(47)
  • 前端框架学习-React(一)

    React 应用程序是由 组件 组成的。 react 程序是用的jsx语法,使用这种语法的代码需要由babel进行解析,解析成js代码。 jsx语法: 只能返回一个根元素 所有的标签都必须闭合(自闭和或使用一对标签的方式闭合) 使用驼峰式命名法给大部分属性命名如:className 大写字母开头的

    2024年02月12日
    浏览(42)
  • 前端框架 Nextjs React 部署

    目录 一、node环境部署 二、静态导出 补充:路由问题 Nextjs打包还是非常方便的,就是网上资料不太全,导致踩了一些坑,下面是我亲自实践的两种打包方式。 一、node环境部署 这种方式最简单,也比较不容易出错,但部署时服务器需安装有node环境,速度没话说,杠杠的! 构

    2024年02月12日
    浏览(45)
  • Vue 和 React 前端框架的比较

    本文研究了流行的前端框架 Vue 和 React 之间的区别。通过对它们的学习曲线、视图层处理方式、组件化开发、响应式数据处理方式和生态系统及社区支持进行比较分析,得出了它们在不同方面的优劣和特点。该研究对于开发者在选择合适的前端框架时提供参考。 Vue 是一款由

    2024年02月13日
    浏览(65)
  • React与Vue:前端框架的比较

    在前端开发领域,React和Vue是两个备受瞩目的框架。它们都提供了构建用户界面的强大工具,但它们在实现方式、性能和设计理念上存在一些关键差异。本文将深入探讨这两个框架之间的主要区别。 首先,让我们从数据流的角度来看。在Vue中,数据流是双向的,这意味着组件

    2024年01月20日
    浏览(49)
  • 章节 1:入门React.js -《React.js手把手教程:从初学者到实战高手》- 第一部分:React.js基础

    《React.js手把手教程:从初学者到实战高手》 第一部分:React.js基础 在我们开始探索 React.js 的奇妙世界之前,让我们先来认识一下这个“ 人人都在谈论 ”的家伙。你可以把 React.js 想象成是一个全栈工程师的一大碗甜品,不仅好吃,还可以让你的应用更美味!那么,究竟什么

    2024年02月11日
    浏览(53)
  • 前端(七)——React框架的定位与应用场景解析

    😊博主:小猫娃来啦 😊文章核心: React框架的定位与应用场景解析 什么是react? React 是一个由 Facebook 开发的开源 JavaScript库,用于构建用户界面。 于2013年首次发布,并迅速成为前端开发中最受欢迎的框架之一。 在 React 诞生之前,前端开发面临着许多挑战,包括复杂的D

    2024年02月17日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包