四十八----react实战

2023-12-31 12:52

本文主要是介绍四十八----react实战,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、项目中css模块化管理

1、css-loader
以下可以使用styles.xxx方式使用class是因为使用css-loader配置了module。

import styles from './index.less'
export const App(){return <div className={styles.xxx}>hello word</div>
}//webpack配置
{test:/\.css$/,use[{loader:'css-loader',options:{modules:{localIndentName:isDevelopment?"[path]_[name]_[local]":"[hash:base64:5]"}}}]
}

开发环境使用路径模块名类名命名方便调试"[path][name][local]“,生产环境使用”[hash:base64:5]"这个命名进行压缩混淆代码减少代码体积。
2、css in js

import styles from './styles.js'
export const App(){return <div style={styles.xxx}>jeelo</div>
}//.styles.js
const xxx = {backgroundColor:'red'
}

3、styled-components

import styled from 'styled-components'
const Button = styled.button`background:#ff0`
export const App(){return <Button >jeelo</Button>
}

tailwind css是原子化的css包,解决一些css的复杂性,类名约定的负担。它主要使用postcss进行css的babelloader转换编译。
控制粒度:bootsrap>tailwind>css
headless ui 是没有样式的。

二、实战一个知乎首页

app.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
// pages
import Home from './pages/home'
import CommandList from "./pages/home/tabPages/commandList";export default function App(params) {return <BrowserRouter><Routes><Route path="/" element={<Home />}><Route path="" element={<CommandList />} /><Route path="follow" element={<div>Follow</div>} /><Route path="hot" element={<div>Hot</div>} /><Route path="zvideo" element={<div>ZVideo</div>} /></Route><Route path="/xen" element={<div>Xen</div>}></Route><Route path="/explore" element={<div>Explore</div>}></Route><Route path="/question" element={<div>Question</div>}></Route></Routes></BrowserRouter>
};

home.js
这里的navigator导航顶部栏为了滑动滚动条,导航栏依旧留在顶部使用了position:sticky属性,维护一个hide属性在传递给naviagtor组件

// import { Outlet } from "react-router-dom";
import { useState } from 'react';
// components
import Navigation from "../../components/navigation";
import Card from '../../components/card';
// pages
import TabPages from './tabPages';
import Creation from './siderPages/creation';
import AdvancedBtns from './siderPages/advancedBtns';
import SelfFuncs from './siderPages/selfFuncs';export default function Home(params) {const [hide, setHide] = useState(true);const handleChange = (isHide) => setHide(isHide);return <div><Navigation className="sticky top-0" hide={hide} /><div className="mx-auto max-w-7xl w-320 flex m-2"><Card className="w-2/3"><TabPages onChange={handleChange} /></Card><div className="w-1/3"><Card><Creation /></Card><Card><AdvancedBtns /></Card><Card><SelfFuncs /></Card></div></div></div>
};

navigation导航栏,navigator栏根据滚动传递的hide属性显示不同的顶部栏

import React from 'react'
import { Fragment } from 'react';
import { NavLink } from 'react-router-dom';
import { Menu, Transition } from '@headlessui/react';
import { BellIcon } from '@heroicons/react/outline';const navs = [{ name: "首页", to: "/" },{ name: "会员", to: "/xen" },{ name: "发现", to: "/explore" },{ name: "等你来答", to: "/question" },
]const tabs = [{ name: "关注", to: "/follow" },{ name: "推荐", to: "/" },{ name: "热榜", to: "/hot" },{ name: "视频", to: "/zvideo" },
]const Logo = () => <div className='flex'><div className=' flex-shrink-0 flex items-center'><svg viewBox="0 0 64 30" fill="#0066FF" width="64" height="30" className="css-1hlrcxk"><path d="M29.05 4.582H16.733V25.94h3.018l.403 2.572 4.081-2.572h4.815V4.582zm-5.207 18.69l-2.396 1.509-.235-1.508h-1.724V7.233h6.78v16.04h-2.425zM14.46 14.191H9.982c0-.471.033-.954.039-1.458v-5.5h5.106V5.935a1.352 1.352 0 0 0-.404-.957 1.378 1.378 0 0 0-.968-.396H5.783c.028-.088.056-.177.084-.255.274-.82 1.153-3.326 1.153-3.326a4.262 4.262 0 0 0-2.413.698c-.57.4-.912.682-1.371 1.946-.532 1.453-.997 2.856-1.31 3.693C1.444 8.674.28 11.025.28 11.025a5.85 5.85 0 0 0 2.52-.61c1.119-.593 1.679-1.502 2.054-2.883l.09-.3h2.334v5.5c0 .5-.045.982-.073 1.46h-4.12c-.71 0-1.39.278-1.893.775a2.638 2.638 0 0 0-.783 1.874h6.527a17.717 17.717 0 0 1-.778 3.649 16.796 16.796 0 0 1-3.012 5.273A33.104 33.104 0 0 1 0 28.74s3.13 1.175 5.425-.954c1.388-1.292 2.631-3.814 3.23-5.727a28.09 28.09 0 0 0 1.12-5.229h5.967v-1.37a1.254 1.254 0 0 0-.373-.899 1.279 1.279 0 0 0-.909-.37z"></path><path d="M11.27 19.675l-2.312 1.491 5.038 7.458a6.905 6.905 0 0 0 .672-2.218 3.15 3.15 0 0 0-.28-2.168l-3.118-4.563zM51.449 15.195V5.842c4.181-.205 7.988-.405 9.438-.483l.851-.05c.387-.399.885-2.395.689-3.021-.073-.25-.213-.666-.638-.555a33.279 33.279 0 0 1-4.277.727c-2.766.321-3.97.404-7.804.682-6.718.487-12.709.72-12.709.72a2.518 2.518 0 0 0 .788 1.834 2.567 2.567 0 0 0 1.883.706c2.278-.095 5.598-.25 8.996-.41v9.203h-12.78c0 .703.281 1.377.783 1.874a2.69 2.69 0 0 0 1.892.777h10.105v7.075c0 .887-.464 1.192-1.231 1.214h-3.92a4.15 4.15 0 0 0 .837 1.544 4.2 4.2 0 0 0 1.403 1.067 6.215 6.215 0 0 0 2.71.277c1.36-.066 2.967-.826 2.967-3.57v-7.607h11.28c.342 0 .67-.135.91-.374.242-.239.378-.563.378-.902v-1.375H51.449z"></path><path d="M42.614 8.873a2.304 2.304 0 0 0-1.508-.926 2.334 2.334 0 0 0-1.727.405l-.376.2

这篇关于四十八----react实战的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/556084

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

在Spring Boot中浅尝内存泄漏的实战记录

《在SpringBoot中浅尝内存泄漏的实战记录》本文给大家分享在SpringBoot中浅尝内存泄漏的实战记录,结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录使用静态集合持有对象引用,阻止GC回收关键点:可执行代码:验证:1,运行程序(启动时添加JVM参数限制堆大小):2,访问 htt

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript