当前位置： 首页 > news >正文

快速构建基于React.js的用户注册与登录的Web应用程序

news 2025/7/29 11:51:23

快速构建基于React.js的用户注册与登录的Web应用程序

Rapidly Build A React.js Based Web Application to Implement Registeration and Login for Users

By Jackson@ML

1. React.js简介

React 是一种用于构建Web应用程序用户界面的流行 JavaScript 库，它彻底改变了开发人员创建 Web
应用程序的方式。其声明式方法、基于组件的架构以及对性能的关注使其成为全球开发人员的首选。

访问React官网链接：https://react.dev/, 可以看到其朴素的Web页面风格。

在这里插入图片描述

2. React.js发展历程与版本迭代

1） React.js发展历程

2011 年，Facebook 的软件工程师 Jordan Walke 开发了 React 的初始原型。他受到 XHP（一个用于构建用户界面的 PHP 库）概念的启发，并考虑将这些想法应用到 JavaScript 中。

该原型最初称为“FaxJS”，在 Facebook 内部用于构建部分新闻提要。原型的成功鼓励了进一步的发展，React 于 2013 年 5 月在 JSConf US 上正式向公众发布。

React 引入了几个突破性的概念，使其有别于同时代的其他库和框架：

  • 声明式 UI：开发人员可以使用声明式语法描述 UI 的外观，而不是手动作 DOM。当状态发生变化时，React 将有效地处理更新。
  • 基于组件的架构：React 强调将 UI 分解为可重用的小组件。每个组件都封装了其逻辑和状态，使应用程序更易于开发、调试和维护。
  • 虚拟 DOM：虚拟 DOM 是 React 最具创新性的功能之一。它充当真实 DOM 的轻量级副本，允许 React 确定更新 UI 所需的最小更改集。这种方法显着提高了性能。
  • 单向数据流：React 强制执行单向数据流，其中数据通过 props 从父组件传递到子组件。这使得更容易理解和预测数据如何流经应用程序。
2） React的版本迭代

React具有很好的、快速的发展历程碑，如以下列表。

  • 2013年：React 开源（v0.3.0），引入组件化思想和虚拟 DOM，聚焦构建动态UI
  • 2015年：React v15.0 发布，稳定版 API，性能优化
  • 2017年：React v16.0（Fiber 架构），支持异步渲染、错误边界
  • 2019年：React v16.8（Hooks 革命），函数组件状态管理
  • 2020年：React v17（过渡版本），改进事件系统
  • 2022年：React v18，并发渲染（Concurrent Mode）、自动批处理

3. React的生态系统

React 的成功带来了充满活力的生态系统的发展：

  • React Router：一个流行的库，用于处理 React 应用程序中的路由。
  • Redux：一个经常与 React 一起使用的状态管理库。
  • Next.js：用于构建服务器渲染和静态网站的 React 框架。
  • 创建 React 应用程序 （CRA）：一个用于以零配置设置新 React 项目的工具。

4. 建立项目架构

根据项目需求，要满足以React.js框架开发Web应用程序的各项功能。于是，先行规划该项目的基本架构如下。

在这里插入图片描述

1） 创建组件目录

在之前创建的项目文件夹react-project内，打开Terminal（终端），执行以下命令，建立组件目录。

$  mkdir -p public src/components
2） 创建一系列Web文件：
  • Index.html, 该Web站点的入口文件，基于HTML（超文本标记语言）协议；也是HTML模版；
  • Index.js，该文件为JavaScript语言编写，是React入口点，链接代码到index.html中或标签下；
  • App.js，该文件为JS文件，是实现Web应用程序路由、验证功能的组件；
  • Login.js，该文件为JS文件，是实现登录功能的组件，带有表单处理和本地存储功能。

*Web页面入口文件index.html，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Auth App</title>
</head>
<body><div id="root"></div>
</body>
</html>

应用程序app.js组件的示例代码如下：

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Login from './components/Login';
import Register from './components/Register';
import Dashboard from './components/Dashboard';
import ErrorBoundary from './components/ErrorBoundary';function App() {const [user, setUser] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {try {// Check if localStorage is availableif (typeof Storage === 'undefined') {console.warn('localStorage is not supported');setLoading(false);return;}const savedUser = localStorage.getItem('currentUser');if (savedUser && savedUser !== 'null' && savedUser !== 'undefined') {const parsedUser = JSON.parse(savedUser);if (parsedUser && typeof parsedUser === 'object' && parsedUser.id) {setUser(parsedUser);}}} catch (err) {console.error('Error loading user from localStorage:', err);// Clear corrupted datatry {localStorage.removeItem('currentUser');} catch (clearErr) {console.error('Error clearing localStorage:', clearErr);}setError('Failed to load user session');} finally {setLoading(false);}}, []);const handleSetUser = (userData) => {try {setUser(userData);// Check if localStorage is availableif (typeof Storage !== 'undefined') {if (userData && typeof userData === 'object') {localStorage.setItem('currentUser', JSON.stringify(userData));} else {localStorage.removeItem('currentUser');}}setError(null);} catch (err) {console.error('Error saving user session:', err);setError('Failed to save user session');}};if (loading) {return <div style={{ textAlign: 'center', padding: '50px' }}>Loading...</div>;}return (<ErrorBoundary><Router><div style={{ padding: '20px', maxWidth: '400px', margin: '0 auto' }}>{error && (<div style={{ color: 'red', marginBottom: '10px', padding: '10px', border: '1px solid red', borderRadius: '4px' }}>{error}<button onClick={() => setError(null)} style={{ marginLeft: '10px' }}>×</button></div>)}<Routes><Route path="/login" element={user ? <Navigate to="/dashboard" /> : <Login setUser={handleSetUser} setError={setError} />} /><Route path="/register" element={user ? <Navigate to="/dashboard" /> : <Register setUser={handleSetUser} setError={setError} />} /><Route path="/dashboard" element={user ? <Dashboard user={user} setUser={handleSetUser} /> : <Navigate to="/login" />} /><Route path="/" element={<Navigate to="/login" />} /></Routes></div></Router></ErrorBoundary>);
}export default App;
3） 安装React的依赖项(dependencies)
$ npm install <dependencies>
4） 构建Web文件架构

安装完毕后，进行各模块代码运行处测试。最后，编译完成，来Web服务器启动：

$ npm start

于是，重定向到本地主机的Web页面：

https://localhost: 3000，显示页面如下图。

在这里插入图片描述

5. 创建注册和登录组件(代码略）

6. 实现基本表单处理和状态管理（代码略）

7. 在组件间增加简单路由（代码略）

8. 调试和异常处理

一旦代码运行，就要检查代码在哪些地方可能出错，并且需要加上异常处理(Exception Handling)机制，来完善代码。

读取一下文件，并且调试和增加错误处理机制。

  • App.js, 增加错误辩解，并且用异常处理来改善状态管理；
  • Login.js， 增加综合错误处理，验证，以及载入状态以登录组件；
  • Register.js, 增加综合错误处理，验证，以及载入状态以注册组件；
  • Dashboard.js， 增加错误处理和安全检查，以完善Dashboard组件。
  • ErrorBoundary.js, 增加错误边界组件，用来优雅地捕获和处理React错误。

接下来，更新主程序App.js组件，用以使用错误边界组件。

然后，测试应用程序：

$ timeout 10s npm start || echo "Server started successfully"

最后，启动开发服务器测试该应用程序。

$ npm start

可进一步细化命令，在指定端口3001尝试执行如下：

$ PORT=3001 npm start

出现Web页面错误。此时，需要回到项目中，检查相关模块错误。

9. 检查潜在错误

检查代码，发现其中的语法错误，以及逻辑语意偏差等，执行构建检查命令：

$ npm run build

*注：因Web页面显示异常，抑或渲染异常，很可能是CSS样式表出现错误和偏差；因此，检查CSS并且不断调试，也是发现错误的重要方法。

检查完毕后，可以使用npm install命令，来测试构建的应用程序：

$ npm install -g serve

最后，运行以下命令：

$ npx serve -s build -p 3003

10. 试运行Web应用程序

尝试在本地主机新的端口：3003运行Web应用程序。

http://localhost:3003，出现以下注册/登录页面。

在这里插入图片描述
如果用户点击下方Register，则开始重定向到注册页面，如下图。

在这里插入图片描述
输入个人基本信息，点击Register（注册）开始注册，跳转到以下页面：

在这里插入图片描述
证明用户注册成功！

接下来，点击Logout登出该页面。

用刚注册的账号、密码重新登录，
仍然进入到该页面，说明注册和登录组件运行正常。

至此，新开发的基于Web的注册登录用户应用程序运行成功！

回顾创建React.js作为框架的Web应用程序，主要由规划、构建、调试和纠错几个步骤。

经过调试和纠错后，该应用程序能够正常运行，离不开不断调整的新的架构，如下图所示：

在这里插入图片描述

Web技术好文陆续推出，敬请关注、收藏和点赞👍！

您的认可，我的动力！

推荐阅读：

  1. 2025最新版JetBrains WebStorm安装使用指南
  2. 2025最新版JetBrains CLion安装使用指南
  3. 2025最新版Intelli IDEA Ultimate for Mac专业版安装使用指南
  4. 2025最新版JetBrains PyCharm for Mac统一版安装使用指南
  5. 2025最新版Python 3.13.5安装使用指南
  6. 2025最佳Python编程经典图书集（引进版）
http://www.lryc.cn/news/602785.html

相关文章：

  • 图像识别边缘算法
  • 数学建模算法-day[13]
  • QGIS基于规则的道路分级制图及Leaflet集成展示实例
  • Polkadot 的 Web3 哲学：从乔布斯到 Gavin Wood 的数字自由传承
  • 开始记录一步步学习pcl
  • Go语言--＞变量
  • DBAPI 实现分页查询的两种方法
  • 若依【（前后端分离版）SpringBoot+Vue3】
  • JVM 笔记：类加载、内存管理、垃圾收集与垃圾收集器
  • JVM 垃圾回收机制全景解析：从对象回收到收集算法
  • C++---初始化列表（initializer_list）
  • Flutter在购物场景中BLoC的应用
  • shell每日三题大神之路：第三天
  • 轻量级远程开发利器：Code Server与cpolar协同实现安全云端编码
  • AR眼镜：工业4.0时代高风险作业的安全守护者
  • 深度思考和搜索研究 最新的GSPO强化学习算法
  • 解决 xshell 无法连接win10 、win11的linux子系统
  • python每日一题练习
  • Java集合遍历的几种方式
  • 【docker】DM8达梦数据库的docker-compose以及一些启动踩坑
  • Thymeleaf th:object核心用法精解
  • LeetCode｜Day28｜67. 二进制求和｜Python刷题笔记
  • OpenLayers 入门指南【四】：项目初始化
  • org.hibernate.hql.internal.ast.QuerySyntaxException: Invalid path
  • 下载k8s官方组件chart和容器镜像
  • 自动化测试常用函数
  • 网络编程概述与UDP编程
  • 关于前端的性能优化
  • 【数据架构09】人工智能及数据智能架构篇
  • pg数据库，本地服务器下不同端口迁移