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