初试React前端框架
文章目录
- 一、React概述
- 二、React核心特性
- 1、组件化设计
- 2、虚拟DOM
- 3、生态系统
- 三、实例操作
- 1、准备工作
- 2、创建项目结构
- 3、启动项目
- 4、编写React组件
- 5、添加React样式
- 6、运行项目，查看效果
- 四、实战小结
一、React概述
- 大家好，今天我们将一起探索React这一强大的前端框架。React是由Facebook维护的一个开源JavaScript库，广泛用于构建用户界面，尤其擅长开发单页应用程序和复杂的Web应用的UI层。
二、React核心特性
1、组件化设计
- React允许我们将UI拆分为独立的、可重用的组件，每个组件负责自己的渲染逻辑和状态管理。
2、虚拟DOM
- React使用虚拟DOM技术来优化性能，减少与实际DOM的交互次数，从而提高应用的响应速度。
3、生态系统
- React拥有丰富的生态系统，支持服务器端渲染和静态网站生成，适用于各种规模的应用开发。
三、实例操作
1、准备工作
-
首先，我们需要确保安装了Node.js和npm
-
我们将通过以下命令来检查它们的版本
node -v：查看Node版本npm -v：查看npm版本
2、创建项目结构
- 创建工作目录：选择一个合适的位置创建我们的工作目录。
- 进入工作目录：通过命令行进入该目录。
- 切换回官方npm registry：执行命令
npm config set registry https://registry.npmjs.org以确保我们使用的是官方的npm仓库。 - 创建React项目：通过命令
npx create-react-app user-login创建一个新的React项目。这个过程可能需要一些时间，需要耐心等待。
3、启动项目
- 进入项目目录：通过命令
cd user-login进入项目目录。 - 启动项目：使用命令
npm start启动项目。现在，我们可以在浏览器中查看项目首页了。
4、编写React组件
-
我们将通过修改
App.js文件来编写我们的第一个React组件。这个组件将实现一个简单的用户登录界面。- 引入React和useState：首先，我们需要从React库中引入React和useState。
- 定义状态：使用useState定义用户名、密码和错误信息的状态。
- 处理提交：创建一个
handleSubmit函数来处理表单提交，验证用户名和密码。 - 渲染组件：在返回的JSX中，我们将创建一个用户登录表单，并根据状态显示相应的信息。
5、添加React样式
-
为了使我们的登录界面更加美观，我们将修改
App.css文件来添加一些样式。- 全局样式：设置全局字体、背景颜色和布局。
- App样式：为App组件添加样式，包括对齐方式、最大宽度和内边距。
- 表单样式：为表单和表单元素添加样式，包括布局、背景颜色、边框和阴影。
6、运行项目，查看效果
-
最后，我们将再次运行项目，通过
npm start命令，然后在浏览器中查看效果。- 非空校验：尝试不输入任何信息直接登录，观察结果。
- 登录判断：尝试使用正确的用户名和密码登录，以及错误的用户名或密码登录，观察结果。
四、实战小结
- 通过今天的实战，我们初步了解了React框架的基本使用方法。从创建项目到编写组件，再到添加样式，每一步都是构建React应用的关键。希望大家能够通过这次实战，对React有更深入的理解。