• 前言
• Create-react-app环境配置
  • 文件路径
  • 添加组件
  • 添加tailWind css文件
  • tailwind.config.js
  • 添加compilecss目标
  • 常见错误
  • 添加路由
    • 简单路由添加
    • 复杂路由添加
      • LoginPage
      • MainPage
      • router.js
• 总结

前言

这次用React简单写一个登录网页的Demo

Create-react-app环境配置

create-react-app 你的项目
cd 你的项目

文件路径

• 项目根路径
  • src:主要代码路径
    • utils:方法类
    • components:组件
    • pages:页面
    • App.js:页面入口
    • index.js:React入口
  • assets:资源路径
  • public:不知道，create-react-app默认的
  • node_module:第三方库路径

添加组件

npm install antd
npm install react-icons --save
npm install react-router-dom@6
npm install -D tailwindcss
npx tailwindcss init
npm i @iconify/json @iconify/tailwind -D
npm i -D daisyui@latest
npm install --save echarts-for-react
npm install --save echarts

添加tailWind css文件

• utils
  • tailWindCss
    • input.css
    • output.css

在input.css添加

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const { addDynamicIconSelectors } = require('@iconify/tailwind')
module.exports = {
  content: ["./src/**/*.{html,js}","./src/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [addDynamicIconSelectors(),require("daisyui")],
}

添加compilecss目标

在package.json添加

    "scripts": {
        "start": "npm run compilecss && react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "compilecss": "npx tailwindcss -i ./src/utils/tailwindCss/input.css -o ./src/utils/tailwindCss/output.css "
    },

默认运行

npm start run

常见错误

如果出现命名不通

选择重新加载窗口

添加路由

• src
  • utils
    • router.js:存放路由

简单路由添加

import { BrowserRouter, Route, Routes } from "react-router-dom";
const MyRouter = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/dashboard" element={<Dashboard />} />
            </Routes>
        </BrowserRouter>
    );
};

const Home = () => {
    return <div>hello world</div>;
};

const About = () => {
    return <div>这里是卡拉云的主页</div>;
};

const Dashboard = () => {
    return <div>今日活跃用户: 42</div>;
};
export default MyRouter;

修改App.js为

import logo from './logo.svg';
import './App.css';
import MyRouter from './utils/router';
function App() {
  return (
    <div className="App">
      <MyRouter/>
    </div>
  );
}

export default App;

复杂路由添加

如果简单路由添加成功，运行没有问题，则添加复杂的路由

• src
  • pages
    • XxxPage.js：网页

LoginPage

const LoginPage = () => {
    return <h1>登录页面</h1>;
};

export default LoginPage

MainPage

const MainPage = () => {
    return <h1>主页面</h1>;
};

export default MainPage

router.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import LoginPage from "../pages/LoginPage.js";
import MainPage from "../pages/MainPage";
const MyRouter = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<LoginPage />} />

                <Route path="/main" element={<MainPage />} />
            </Routes>
        </BrowserRouter>
    );
};


export default MyRouter;

总结

这里先简单打个基础的框架，后面我们直接开始写项目了