一起来学React：先写个简单的登录注册功能

一只爱撸猫的程序猿
1,006 阅读4分钟

1. 背景

作为一个 Java 后端工程师，学习 React 可以为你带来很多好处。虽然 React 是一个前端 JavaScript 库，主要用于构建用户界面，但了解它对于后端工程师也有很多优势：

  1. 更好的协作：了解 React 可以帮助你更好地与前端工程师协作，理解他们的需求和限制。这有助于更高效地共同完成项目。
  2. 全栈能力：熟练掌握 React 可以让你成为一名全栈工程师，这在很多公司和项目中是一个非常有吸引力的技能。作为全栈工程师，你可以处理前端和后端任务，从而提高自己的市场价值。
  3. 更好的架构设计：了解前端技术可以帮助你在设计后端 API 和系统架构时，更好地考虑到前端的需求。这有助于构建更为优秀的 Web 应用。
  4. 深入理解 Web 开发：学习 React 和前端技术可以让你更深入地理解 Web 开发的全貌。了解前端和后端如何协同工作，可以帮助你构建更高效、更稳定的应用。
  5. 适应市场变化：随着技术的发展，很多公司都在寻求具备多种技能的工程师。学习 React 和其他前端技术可以让你适应市场的变化，提高就业竞争力。

总之，学习 React 可以让你成为一名更全面、更具竞争力的工程师。即使你主要关注后端开发，了解前端技术也能帮助你更好地与团队协作、构建出色的 Web 应用。

2. 案例

使用React和Redux创建一个登录/注册功能，首先需要安装所需的依赖库，然后设置React组件、Redux store、reducers和actions。以下是一个简单的示例：

  1. 安装所需的库：
npm install react-redux redux redux-thunk axios
  1. 创建Redux store、reducers和actions： store.js:
import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import authReducer from './reducers/authReducer';

const rootReducer = combineReducers({
  auth: authReducer
});

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

reducers/authReducer.js:

const initialState = {
  isAuthenticated: false,
  user: {},
  error: null
};

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_CURRENT_USER':
      return {
        ...state,
        isAuthenticated: !!action.payload,
        user: action.payload
      };
    case 'SET_ERROR':
      return {
        ...state,
        error: action.payload
      };
    default:
      return state;
  }
};

export default authReducer;

actions/authActions.js:

import axios from 'axios';

export const registerUser = (userData, history) => dispatch => {
  axios.post('/api/users/register', userData)
    .then(res => history.push('/login'))
    .catch(err => dispatch({ type: 'SET_ERROR', payload: err.response.data }));
};

export const loginUser = userData => dispatch => {
  axios.post('/api/users/login', userData)
    .then(res => {
      const { token } = res.data;
      localStorage.setItem('jwtToken', token);
      dispatch(setCurrentUser(token));
    })
    .catch(err => dispatch({ type: 'SET_ERROR', payload: err.response.data }));
};

export const setCurrentUser = token => {
  return {
    type: 'SET_CURRENT_USER',
    payload: token
  };
};

export const logoutUser = () => dispatch => {
  localStorage.removeItem('jwtToken');
  dispatch(setCurrentUser({}));
};
  1. 创建React组件： Register.js:
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { registerUser } from '../actions/authActions';

const Register = ({ history }) => {
  const [userData, setUserData] = useState({ username: '', email: '', password: '' });
  const dispatch = useDispatch();

  const handleChange = e => {
    setUserData({ ...userData, [e.target.name]: e.target.value });
  };

  const handleSubmit = e => {
    e.preventDefault();
    dispatch(registerUser(userData, history));
  };

  return (
    <div>
      <h2>Register</h2>
      <form onSubmit={handleSubmit}>
        <input type="text" name="username" value={userData.username} onChange={handleChange} placeholder="Username" />
        <input type="email" name="email" value={userData.email} onChange={handleChange} placeholder="Email" />
        <input type="password" name="password" value={userData.password} onChange={handleChange} placeholder="Password" />
        <button type="submit">Register</button>
      </form>
    </div>
  );
};

export default Register;

Login.js:

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { loginUser } from '../actions/authActions';

const Login = () => {
  const [userData, setUserData] = useState({ email: '', password: '' });
  const dispatch = useDispatch();
  const handleChange = e => { setUserData({ ...userData, [e.target.name]: e.target.value }); };

const handleSubmit = e => { e.preventDefault(); dispatch(loginUser(userData)); };

return ( <div> <h2>Login</h2> <form onSubmit={handleSubmit}> <input type="email" name="email" value={userData.email} onChange={handleChange} placeholder="Email" /> <input type="password" name="password" value={userData.password} onChange={handleChange} placeholder="Password" /> <button type="submit">Login</button> </form> </div> ); };

export default Login;
  1. 在App.js中导入并使用Register和Login组件：
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 
import { Provider } from 'react-redux'; 
import store from './store'; 
import Register from './components/Register'; 
import Login from './components/Login'; 
const App = () => { return ( <Provider store={store}> <Router> <Switch> <Route path="/register" component={Register} /> <Route path="/login" component={Login} /> {/* 更多路由 */} </Switch> </Router> </Provider> ); };
export default App;
  1. 在项目的根目录中创建一个.env文件，用于设置API的基本URL。这将确保您的应用程序与后端API正确通信：
REACT_APP_API_BASE_URL=http://localhost:5000

请确保根据后端API调整此URL。

现在，已经创建了一个使用React和Redux的基本登录/注册功能。根据需求，可以继续完善和优化这些组件，例如，通过添加表单验证、错误处理和用户友好的提示。

3. 总结

在本案例中，我们使用React和Redux创建了一个简单的登录和注册功能。我们首先安装了所需的依赖库，然后创建了Redux store、reducers和actions。接下来，我们创建了React组件（Register和Login）以处理用户输入并与后端API进行通信。最后，我们在App.js中设置了路由以显示这些组件。

以下是完成此任务所需的关键步骤：

  1. 安装必要的库（react-redux、redux、redux-thunk和axios）。
  2. 创建Redux store，用于存储应用程序状态。
  3. 创建reducers，用于处理不同的action类型。
  4. 创建actions，用于与后端API进行通信并触发状态更新。
  5. 创建React组件（Register和Login），用于渲染登录和注册表单并处理用户交互。
  6. 在App.js中设置路由，以便用户可以访问这些组件。

注意，本案例仅作为一个简单的实现指南。在实际项目中，您可能需要添加额外的功能，如表单验证、错误处理和用户友好的提示。同时，也需要根据实际项目需求调整API的URL和其他配置。

avatar
文章
阅读
粉丝