react-hooks项目结构

最新推荐文章于 2024-04-11 06:35:42 发布

金木女友

最新推荐文章于 2024-04-11 06:35:42 发布

阅读量326

点赞数

文章标签： react.js 前端

本文链接：https://blog.csdn.net/qq_43715797/article/details/126168144

版权

本文介绍了使用React Hooks的项目结构，包括assets目录下的css和js文件，containers中各组件的组织方式，如Register和Login，reducers目录用于存放状态管理，request目录包含api和http请求模块，以及核心文件如App.js、index.js和模板文件template.jsx。

摘要由CSDN通过智能技术生成

项目结构举例

在这里插入图片描述

assets

在这里插入图片描述

-css

在这里插入图片描述
eg:public.css

-images(略)

-js

在这里插入图片描述
eg:remScale.js

containers

在这里插入图片描述

eg-1:Register
在这里插入图片描述

import React, {
        useState } from "react";
import {
        reqRegister } from "../../request/api";
import "../../assets/css/public.css"
import "../../assets/css/iconfont.css"
import "./Register.css"
import img1 from "../../assets/images/pic_logo_orange.png"
const Register = (props) => {
       
  const [user, setUser] = useState({
        phone: "", password: "", nickname: "" });

  //注册
  const register = () => {
       
    reqRegister(user).then((res) => {
       
      if (res.data.code == 200) {
       
        alert("注册成功")
        props.history.push("/login");
      }
    });
  };
  return (
    // <div>
    //   <h1>register</h1>
    //   <div>
    //     手机号：
    //     <input
    //       type="text"
    //       value={user.phone}
    //       onChange={(e) => setUser({ ...user, phone: e.target.value })}
    //     />
    //   </div>
    //   <div>
    //     昵称：
    //     <input
    //       type="text"
    //       value={user.nickname}
    //       onChange={(e) => setUser({ ...user, nickname: e.target.value })}
    //     />
    //   </div>
    //   <div>
    //     密码：
    //     <input
    //       type="text"
    //       value={user.password}
    //       onChange={(e) => setUser({ ...user, password: e.target.value })}
    //     />
    //   </div>
    //   <button onClick={() => register()}>注册</button>
    // </div>
    <div className="page">
      <div className="tool">
        <a className="black iconfont" href="#" >&#xe622;</a>
        <p>注册</p>
      </div>
      <div className="main">
        <div className="inner">
          <ul>
            <li>
              <img src={
       img1} alt="logo" />
            </li>
            <li>
              <input type="text" name="phone" placeholder="手机号" value={
       user.phone}
                onChange={
       (e) => setUser({
        ...user, phone: e.target.value })} />
            </li>
            <li>
              <input type="text" placeholder="昵称" value={
       user.nickname}
                onChange={
       (e)