Template -- React

这篇具有很好参考价值的文章主要介绍了Template -- React。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

React

版本

  • Node 21.6.0
  • Npm 10.2.4

项目

创建

npm init vite 项目名称
  • react
  • js
  • npm i
  • npm run dev

依赖

npm i axios                 # 网络
npm i antd --save           # UI
npm i @ant-design/icons
npm i react-router-dom      # 路由

npm i sass -D               # sass
npm i vite-plugin-html -D   # html

环境区分

  • package.json
"scripts" : {
    "dev": "vite --mode test",
    "dev1": "vite --mode production",
    "build": "vite build --mode test",
    "build1": "vite build --mode production"
}
  • package.json 同级
  • .env.test
NODE_ENV = "test"
VITE_APP_TITLE = "测试"
VITE_APP_BASE_API = "test"
  • .env.production
NODE_ENV = "production"
VITE_APP_TITLE = "生产"
VITE_APP_BASE_API = "production"
  • vite.config.js
import { defineConfig,loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { createHtmlPlugin } from "vite-plugin-html";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) =>{
  const env = loadEnv(mode, process.cwd(), ""); 
  return {
    plugins: [
      react(),
      createHtmlPlugin({
        inject: {
          data: {
            title: env.VITE_APP_TITLE,
          },
        },
      }),
    ],
    resolve: {
      alias: {
        "@": resolve(__dirname, "src"), // 设置 `@` 指向 `src` 目录
      },
    },
    base: "./", // 设置打包路径
    server: {
      port: 4000, // 设置服务启动端口号
      open: true, // 设置服务启动时是否自动打开浏览器
      cors: true, // 允许跨域
      // 设置代理,根据我们项目实际情况配置
      // proxy: {
      //   '/api': {
      //     target: 'http://xxx.xxx.xxx.xxx:8000',
      //     changeOrigin: true,
      //     secure: false,
      //     rewrite: (path) => path.replace('/api/', '/')
      //   }
      // }
    },
  };
})
  • index.html
<title><%= title %></title>

axios

  • src/http/index.js
import axios from "axios";

let service = axios.create({
  // baseURL: "https://cnodejs.org/api/v1", //相同绝对路径
  baseURL:import.meta.env.VITE_APP_BASE_API,
  timeout: 100000, //超过这么多时间,则请求终止
  headers: {
    //请求头携带数据的格式
    "Content-Type": "application/json;charset=UTF-8",
    // "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
  },
});
// 添加请求拦截器(Interceptors)
service.interceptors.request.use(
  function (config) {
    // 发送请求之前做写什么
    let token = localStorage.getItem("token");
    // 如果有
    if (token) {
      // 放在请求头(token跟后端沟通,他需要什么该成什么就可以了)
      config.headers.authorization = token;
    }
    return config;
  },
  function (error) {
    // 请求错误的时候做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
service.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response.data;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default service;

  • src/http/api.js
import request from "./index";

export async function Ceshi(params) {
    return request({
      url: "/topics",
      method: "GET",
      params,
    });
  }
  export async function Ceshi2(data) {
    return request({
      url: "/Storage/GetStorageLack",
      method: "POST",
      data,
    });
  }

  • 使用
import {useEffect, useRef } from "react";
import { Ceshi } from "@/http/api.js";
function App() {
    const cache = useRef(null);
    useEffect(() => {
        async function fetchData() {
            cache.current = true;
            const response = await Ceshi();
            console.log(response);
        }
        if (!cache.current) {
            fetchData();
        }
    }, []);
    return (
        <>
        </>
    );
}

antd

  • 使用
import { Button } from "antd";

<>
    <Button type="primary">Button</Button>
</>

sass

.ddd{
    .adsspan{
        color: aqua;
    }
}

router

  • main.jsx
import { HashRouter } from "react-router-dom";
<HashRouter><App></App></HashRouter>
  • App.jsx
import { useRoutes,useNavigate  } from "react-router-dom";

const navigate = useNavigate()
const GetRoutes = () => {
    const routes = useRoutes([
        {
            path: "/",
            element: <Home></Home>,
        },
        {
            path: "/b",
            element: <B></B>,
            children: [
                {
                    path: "/b/aaaa", // /b 需要加,不加找不到
                    element: <C></C> ,
                },
            ],
        },
        {
            path: "/*",
            exact: true,
            element: <div>后台404</div>,
        },
    ]);
    return routes;
};
<GetRoutes />

<Button type="primary" onClick={()=> navigate('/b/aaaa')}>Button</Button>

// 在b页面中加
<Outlet></Outlet>

文章来源地址https://www.toymoban.com/news/detail-800705.html

到了这里,关于Template -- React的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Template -- React

    Node 21.6.0 Npm 10.2.4 创建 react js npm i npm run dev 依赖 环境区分 package.json package.json 同级 .env.test .env.production vite.config.js index.html axios src/http/index.js src/http/api.js 使用 antd 使用 sass router main.jsx App.jsx

    2024年01月18日
    浏览(32)
  • 模板方法模式(Template Method)

    模板方法模式是一种行为设计模式,在超类中定义了一个算法的框架,而将一些步骤的实现延迟到子类中,使得子类可重定义该算法的特定步骤。 模板方法模式包含如下角色: Abstract ­Class,抽象类,实现一个模板方法,定义了算法的骨架。需要说明的是,算法中的步骤可以

    2024年02月14日
    浏览(97)
  • Django学习笔记-模板(Template)基础

    使用模块可以很方便的执行一些数据操作,然后根据传入的数据直接在模板html文件中进行处理。 Django的模板引擎在sttings.py文件中: Django模板引擎中使用“{% %}”来描述python语句,使用“{{ }}”来描述变量,常用语句示例说明如下: 标签 说明 {% extends \\\"模板名\\\" %} 扩展一个母模

    2024年02月15日
    浏览(38)
  • ElasticSearch第十六讲 ES 索引模板Index Template与Dynamic Template

    Index Templates可以帮助你设定Mappings和Settings,并按照一定的规则,自动匹配到 新创建的索引之上。模版仅在一个索引被新创建时,才会产生作用。修改模版不会影响已创建的索引,你可以设定多个索引模版,这些设置会被“merge”在一起,你可以指定“order”的数值,控制“

    2024年02月15日
    浏览(39)
  • Gee教程6.模板(HTML Template)

    这一章节的内容是介绍 Web 框架如何支持 服务端渲染 的场景 实现静态资源服务(Static Resource)。 支持HTML模板渲染。 这一章节很多内容是基于net/http库的,该库已经实现了很多静态文件和HMML模板的相关功能的了。 网页的三剑客,JavaScript、CSS 和 HTML。要做到服务端渲染,第一步

    2024年02月04日
    浏览(50)
  • 一文说清楚c++模板Template的用法

    模板(Template)指c++程序设计语言中采用 类型 作为参数的程序设计。 1.通用格式 函数模板定义格式 其中,template和class是,class可以用template替换;括号中的参数叫做模板形参,模板形参需要调用该模板函数时提供的模板实参来初始化模板形参,一旦编译确定了实参类

    2024年02月14日
    浏览(47)
  • 【ES实战】索引模板template使用说明

    模板的主要作用:可以帮助简化创建索引的语句,将模板中的配置和映射应用到创建的索引中。 新建索引时,索引名称满足 index_patterns 条件的,将会使用索引模板中的配置和映射。 index_patterns 使用 * 进行通配,不支持复杂的正则。 indexPattern 要求: 不能包含空字符 不能以

    2023年04月20日
    浏览(53)
  • 设计模式第15讲——模板模式(Template)

    模板模式是一种基于 继承 实现的设计模式,它是 行为型 的模式。 主要思想是将定义的算法抽象成一组步骤,在抽象类种定义算法的骨架,把具体的操作留给子类来实现。 通俗地说,模板模式就是将某一行为制定一个框架,然后子类填充细节。比如说做菜,流程通常就是洗

    2024年02月11日
    浏览(41)
  • C++模板,STL(Standard Template Library)

    这篇文章的主要内容是C++中的 函数模板 、 类模板 、 STL的介绍 。 希望对C++爱好者有所帮助, 内容充实且干货 ,点赞+收藏防止找不到! 再次感谢每个读者和正在学习编程的朋友莅临! 更多优质内容请点击移驾: C++收录库:重生之C++启程(文章平均质量分93) 目录   1.模板

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包