四十八----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