实用指南：React简单例子

1、设置React项目

如果你还没有一个React项目，你可以使用Create React App来创建一个。

2、在你的React项目中，新建一个新的组件文件，比如Login.jsx，并编写以下代码:

import React, {useState, useEffect} from 'react';
import '../Styles/Login.css'; //使用css来美化界面
const Login = () => {
const [email, setEmail] = useState('') //使用状态来保存邮箱、密码、错误信息等值
const [password, setPassword] = useState('')
const [error, setError] = useState('')
const [time, setTime] = useState(0)
//增加一个effect，返回函数在组件销毁时执行
useEffect(() => {
const interval = setInterval(() => {
setTime(a=>a+1)
}, 1000)
return () => {
clearInterval(interval)
}
}, [])
const handleSubmit = (e) => {
e.preventDefault()
console.log('email:', email);
console.log('Password:', password);
setError('Invalid credentials');
setEmail('')
setPassword('')
};
return (
Login
停留时间:{time}秒
Email:setEmail(e.target.value)} required/>
Password:setPassword(e.target.value)} required/>
{error && {error}}
)
};
export default Login;

Login.css

.login-container {
max-width: 400px;
margin: 50px auto; /* 增加顶部和底部的边距以提升居中效果 */
padding: 30px; /* 增加内边距以使内容更加宽松 */
border: 1px solid #ccc;
border-radius: 15px; /* 增加圆角半径以使边框更加柔和 */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* 增加阴影的模糊半径以使阴影更加自然 */
background-color: #f9f9f9; /* 添加背景颜色以区分界面 */
}
.login-container h2 {
text-align: center;
margin-bottom: 30px; /* 增加与表单元素的距离 */
color: #333; /* 设置标题颜色 */
font-family: Arial, sans-serif; /* 设置字体 */
}
.login-container div {
margin-bottom: 20px; /* 适当调整间距 */
}
.login-container label {
display: block;
margin-bottom: 10px;
color: #555; /* 设置标签颜色 */
}
.login-container input {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
transition: border-color 0.3s; /* 添加过渡效果 */
}
.login-container input:focus {
border-color: #007bff; /* 聚焦时改变边框颜色以提升用户体验 */
}
.login-container button {
width: 100%;
padding: 12px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px; /* 增大按钮字体 */
transition: background-color 0.3s; /* 添加过渡效果 */
}
.login-container button:hover {
background-color: #218838;
}
.error {
color: red;
text-align: center;
margin-top: 20px; /* 适当调整间距 */
font-size: 14px; /* 设置错误提示的字体大小 */
}

3、现在，你需要在你的应用中渲染这个登录组件。通常你会在App.js中做这件事：

import React from 'react'
import Login from './Pages/Login.jsx'
import './App.css' //全局样式
function App() {
return (
)
}
export default App;

4、确保你的开发服务器正在运行(npm start)，然后在浏览器里访问页面。