React第二天学习（react怎么学）

安装bootstrap：

npm i bootstrap

安装react-router-dom：

npm i react-router-dom

package.json:

{
  "name": "signin-signup",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "bootstrap": "^5.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "vite": "^5.2.0"
  }
}

App.jsx:

import './App.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import Signup from './signup/Signup'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import Login from './login/Login';

function App() {
  const route = createBrowserRouter([
    {
      path: "/",
      element: <Signup />,
    },{
      path: "/login",
      element: <Login />,
    }
  ]);
  return (
    <div>
     <RouterProvider router={route}></RouterProvider>
    </div>
  )
}

export default App

Signup.jsx:

import React from "react";
import "./Signup.css";
import { Link } from "react-router-dom";

const Signup = () => {
    return(
        <>
       <div className="addUser">
            <h3>Sign Up</h3>
            <form className="addUserForm">
                <div className="inputGroup">
                    <label htmlFor="name">Name:</label>
                    <input type="text" id="name" autoComplete="off" placeholder="Enter your name"/>

                    <label htmlFor="email">Email:</label>
                    <input type="email" id="email" autoComplete="off" placeholder="Enter your Email"/>

                    <label htmlFor="password">Password:</label>
                    <input type="password" id="password" autoComplete="off" placeholder="Enter your Password"/>

                    <button type="submit" className="btn btn-success">Sign Up</button>
                </div>
            </form>
            <div className="login">
                <p>Already have an account?</p>
                <Link to="/login" type="submit" className="btn btn-primary">Login</Link>
            </div>
       </div>
       </>
    );
};

export default Signup

Signup.css:

.addUser{
    width: 420px;
    margin: 50px auto;
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.065);
}

.addUser h3{
    text-align: center;
    font-weight: bold;
    color: darkcyan;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.addUserForm .inputGroup{
    width: 100%;
    display: flex;
    flex-direction: column;

}

.addUserForm .inputGroup label {
    margin-top: 10px;
}

.addUserForm .inputGroup input{
    margin-top: 5px;
    padding: 10px;
}

.inputGroup button {
    margin-top: 10px;
}

.login{
    margin-top: 30px;
    text-align: center;

}

.login .btn.btn-primary{
    width: 50%;

}

Login.jsx:

import React from "react";
import "./Login.css";
import { Link } from "react-router-dom";

const Login = () => {
    return(
        <>
       <div className="addUser">
            <h3>Sing In</h3>
            <form className="addUserForm">
                <div className="inputGroup">
                    <label htmlFor="email">Email:</label>
                    <input type="email" id="email" autoComplete="off" placeholder="Enter your Email"/>

                    <label htmlFor="password">Password:</label>
                    <input type="password" id="password" autoComplete="off" placeholder="Enter your Password"/>

                    <button type="submit" className="btn btn-primary">Login</button>
                </div>
            </form>
            <div className="signup">
                <p>Don’t have Account ? </p>
                <Link to="/" type="submit" className="btn btn-success">Sign Up</Link>
            </div>
       </div>
       </>
    );
};

export default Login

Login.css:

.addUser{
    width: 420px;
    margin: 50px auto;
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.065);
}

.addUser h3{
    text-align: center;
    font-weight: bold;
    color: darkcyan;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.addUserForm .inputGroup{
    width: 100%;
    display: flex;
    flex-direction: column;

}

.addUserForm .inputGroup label {
    margin-top: 10px;
}

.addUserForm .inputGroup input{
    margin-top: 5px;
    padding: 10px;
}

.inputGroup button {
    margin-top: 10px;
}

.signup{
    margin-top: 30px;
    text-align: center;

}

.signup .btn.btn-success{
    width: 50%;

}

代码结构：

效果图：