四十八----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.873a