React（二）——注册页/登录页/Reducer/

<hr>
  
<hr> 项目所在

  

• 教程作者：  
  
• 教程所在：
  

1. https://www.udemy.com/course/master-react-js-build-multi-vendor-ecommerce-project/learn/lecture/42673410#overview

复制代码

  

• 代码堆栈所在：
  

1. https://github.com/easylearningbd/frontend-mern-multi-vendor-ecommerce/commits/master/?after=f32f00ea140d4ea07d237aa25e05d1804f5c0390+34```
2. - 所用到的框架和插件：

复制代码

dbt
airflow

7. # 一、使用Yarn安装所有环境
9. 1. 使用yarn 创建vite 项目

复制代码

yarn create vite

1. 2. 提示行里创建 react js 项目
2. 3. 进入到刚创建的react里，并且安装tailwindcss

复制代码

yarn add -D tailwindcss postcss autoprefixer

1. 4. 创建tailwindcss的配置文件
2. ```cs
3. npx tailwindcss init -p

复制代码

  

• 在tailwind.config.js设置
  

1. /** @type {import('tailwindcss').Config} */
2. export default {
3.   content: ["./src/**/*.{js,jsx}"],
4.   theme: {
5.     extend: {},
6.   },
7.   plugins: [],
8. };

复制代码

  

• 在src/index.css引入tailwindcss
  

1. @tailwind base;
2. @tailwind components;
3. @tailwind utilities;

复制代码

  

• 在src/App.jsx测试安装是否乐成
  

1. import React from "react";
3. export default function App() {
4.   return (
5.     <div>
6.       <h1 class="text-3xl font-bold underline">Hello world!</h1>
7.     </div>
8.   );
9. }

复制代码

  

• 安装项目所须要的全部依赖
  

1. yarn add apexcharts react-apexcharts axios jwt-decode moment
2. yarn add react-hot-toast react-icons @reduxjs/toolkit react-redux
3. yarn add react-spinners react-window redux-thunk socket.io-client

复制代码

二、文件结构以及路由设置

ts版本

1. [/code] [size=5]三、登录和注册[/size]
3. [size=4]3.1 注册页面[/size]
5. [size=3]3.1.1 静态页面[/size]
8. [list]  
9. [*][b]结构要领：[/b]
10. 1. 先把全部须要提示的笔墨以及内容全部写出来
11. 2. Form表单内部使用flex-col举行垂直分布
12. 3. 全部使用到圆角的地方加over-flow-hidden
13. 4. Or是一个样式，可以复用
14. [/list] [align=center][img]https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNzFmMzAxNjQ1ZTVmNDIxZjg1YjA1NmY1MGIxMmZmMmUucG5n[/img][/align]
15. [size=3]3.1.2 表单提交useSate[/size]
18. [list]  
19. [*][b]重要内容：[/b][list=1]   
20. [*]表单value的获取和存储，使用useState完成   
21. [*]输入框的value获取，使用自界说的inputHandle完成   
22. [*]表单提交，须要制止革新   
23. [*] value={state.email}获取的是表单里的name="email" 的值，须要对应起来   
24. [/list]  
25. [/list] [code]            <div className="flex flex-col w-full gap-1 mb-3">
26.               <label htmlFor="email">Email</label>
27.               <input
28.                 className="px-3 py-2 outline-none border border-slate-400 bg-transparent rounded-md"
29.                 type="text"
30.                 name="email"
31.                 placeholder="Email"
32.                 id="email"
33.                 onChange={
34.    
35.    inputHandle}
36.                 value={
37.    
38.    state.email}
39.                 required
40.               />
41.             </div>

复制代码

  

• useSate的逻辑
  
  
  
  

3.2 登录页面

  

• 登录页面只是对注册页面举行简单的修改
  
  
  
  

3.3 admin 的登录页面

  

• 重要内容：
     
  
  • 在项目标根目次添加public用来存放公共的图片   
    
  • img的src的引入，直接通过http来导入   
    
  • img的样式添加   
    
    
  

1. {
2.    
3.    /* title image */}
4. <div className="flex justify-center items-center h-[70px]">
5.   <div className="w-[180px] h-[50px]">
6.     <img src="http://localhost:5173/images/logo.png" alt="image" />
7.   </div>
8. </div>

复制代码

四、关于auth登录和注册的Reducer

  

• 文件结构
  

4.1 authReducer创建

  

• 在src/store/Reducers/authReducer.js里创建authReducer，用来专门管理登录的消息，以及用户；
  

1. import {
2.    
3.     createSlice } from "@reduxjs/toolkit";
5. export const authReducer = createSlice({
6.    
7.    
8.   name: "auth",![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/82daa299b90843739e92ee313da73ccd.png

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。