React入门 | React 新手入门与常用库和工具

一、React 简介

React 是由 Facebook 开发并维护的一款 JavaScript 库,主要用于构建交互式的用户界面。它具有以下特点和优势:

  1. 组件化:将页面拆分成一个个独立的组件,每个组件都有自己的逻辑和 UI,便于开发、测试和维护。组件可以像搭积木一样组合起来构建复杂的页面。
  2. 虚拟 DOM:React 引入了虚拟 DOM 的概念,它是真实 DOM 的轻量级副本。当数据发生变化时,React 先更新虚拟 DOM,然后通过对比虚拟 DOM 和真实 DOM 的差异,只对需要更新的部分进行实际的 DOM 操作,从而大幅提高页面更新的效率,提升应用性能。
  3. 单向数据流:数据在 React 应用中沿着一个方向流动,从父组件传递到子组件,使得应用的数据流向清晰,便于调试和理解。
  4. 声明式编程:开发者只需要关注页面应该呈现的样子,而不需要过多关注如何实现页面的更新,React 会自动处理页面的渲染逻辑。

二、前置知识

在学习 React 之前,建议你具备以下基础知识:

  1. HTML:了解 HTML 的基本标签、属性和结构,能够构建简单的静态页面。
  2. CSS:掌握 CSS 的基本选择器、样式规则,能够对页面进行美化,了解盒模型、浮动、定位等布局知识更佳。
  3. JavaScript 基础:熟悉变量、数据类型、函数、条件语句、循环语句等基本语法。
  4. ES6 及以上语法
  • 箭头函数:() => {}的语法和使用场景。
  • 解构赋值:对数组和对象进行解构,简化变量的赋值操作。
  • 模板字符串:使用${}在字符串中嵌入变量或表达式。
  • 类和继承:了解类的定义、构造函数、方法以及继承的概念。
  • 模块系统:使用import和export进行模块的导入和导出。

三、环境搭建

(一)安装 Node.js 和 npm

React 开发需要依赖 Node.js 和 npm(Node Package Manager),npm 是 Node.js 的包管理工具。

  1. 访问 Node.js 官网(Node.js --- Run JavaScript Everywhere),下载并安装适合自己操作系统的 Node.js 版本(建议下载 LTS 版本,即长期支持版本)。

  2. 安装完成后,打开命令行工具(Windows 系统可使用 cmd 或 PowerShell,Mac 和 Linux 系统使用终端),输入以下命令检查是否安装成功:

    node -v
    npm -v

如果能显示出对应的版本号,则说明安装成功。

(二)使用 create-react-app 脚手架创建项目

create-react-app 是 React 官方提供的脚手架工具,能够快速创建一个 React 项目,并配置好开发环境、依赖项等。

  1. 安装 create-react-app(如果之前没有安装过),在命令行中输入:

    npm install -g create-react-app

  2. 创建 React 项目,在命令行中进入想要创建项目的目录,然后输入:

    create-react-app my-first-react-app

其中my-first-react-app是项目的名称,你可以根据自己的需求修改。

  1. 进入项目目录:

    cd my-first-react-app

  2. 启动项目:

    npm start

启动成功后,会自动在浏览器中打开http://localhost:3000,你将看到 React 的默认欢迎页面。

四、React 核心概念

(一)组件

组件是 React 的基本单位,分为函数组件和类组件。

  1. 函数组件:是一个返回 React 元素的 JavaScript 函数。

    function Welcome() {
    return

    Hello, React!

    ;
    }

  2. 类组件:通过继承React.Component类来定义,需要实现render()方法,该方法返回 React 元素。

    import React from 'react';
    class Welcome extends React.Component {
    render() {
    return

    Hello, React!

    ;
    }
    }

在实际开发中,函数组件使用更为广泛,尤其是结合 React Hooks 之后。

(二)JSX

JSX 是 React 的语法扩展,看起来像 HTML,但实际上是 JavaScript 的语法糖。它允许在 JavaScript 中编写类似 HTML 的代码,最终会被编译成普通的 JavaScript 代码。

  1. 语法规则
  • JSX 中的标签必须闭合,如<div></div>,单标签如<img/>。
  • 类名使用className而不是class,因为class是 JavaScript 的关键字。
  • 内联样式需要使用对象形式,如<div style={{color: 'red', fontSize: '16px'}}></div>。
  • 可以在 JSX 中使用 JavaScript 表达式,需要用{}包裹,如<p>{2 + 3}</p>会显示 5。
  1. 在组件中使用

    function UserInfo(props) {
    return (


    Name: {props.name}


    Age: {props.age}



    );
    }

(三)Props

Props 用于组件之间传递数据,是从父组件传递到子组件的只读属性,子组件不能修改 Props 的值。

复制代码
// 父组件
function App() {
  return <UserInfo name="Tom" age={18} />;
}
// 子组件
function UserInfo(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

(四)State

State 用于管理组件内部的状态,当 State 发生变化时,组件会重新渲染。在函数组件中,可以使用useState Hook 来管理 State。

复制代码
import React, { useState } from 'react';
function Counter() {
  // 声明一个count状态,初始值为0,setCount是更新count的函数
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

五、小案例:待办事项列表

下面我们通过一个待办事项列表的小案例,综合运用前面所学的知识。

复制代码
import React, { useState } from 'react';
// 待办事项项组件
function TodoItem(props) {
  return (
    <li style={{ textDecoration: props.completed ? 'line-through' : 'none' }}>
      {props.text}
      <button onClick={props.onDelete}>Delete</button>
      <button onClick={props.onToggle}>
        {props.completed ? 'Undo' : 'Complete'}
      </button>
    </li>
  );
}
// 待办事项列表组件
function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputText, setInputText] = useState('');
  const handleAddTodo = () => {
    if (inputText.trim() !== '') {
      setTodos([...todos, { text: inputText, completed: false }]);
      setInputText('');
    }
  };
  const handleDeleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };
  const handleToggleTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  };
  return (
    <div>
      <input
        type="text"
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && handleAddTodo()}
        />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
      <TodoItem
        key={index}
        text={todo.text}
        completed={todo.completed}
        onDelete={() => handleDeleteTodo(index)}
        onToggle={() => handleToggleTodo(index)}
        />
    ))}
      </ul>
    </div>
  );
}
// 应用入口组件
function App() {
  return (
    <div>
      <h1>Todo List</h1>
      <TodoList />
    </div>
  );
}
export default App;

在这个案例中,我们创建了一个待办事项列表,实现了添加待办事项、删除待办事项、标记待办事项为已完成或未完成的功能。使用了组件的嵌套(App组件包含TodoList组件,TodoList组件包含TodoItem组件),通过 Props 在组件之间传递数据和方法,使用 State 管理待办事项列表和输入框的文本。

六、React 常用库和工具

  1. React Router:用于实现单页应用的路由管理,能够根据不同的 URL 显示不同的组件。
  2. Redux:用于管理应用的全局状态,当应用规模较大时,能够更好地组织和管理状态。
  3. Axios:用于发送 HTTP 请求,与后端进行数据交互。
  4. Create React App:前面提到的脚手架工具,简化 React 项目的创建和配置。
  5. React Developer Tools:浏览器扩展工具,用于调试 React 应用,查看组件层次结构、Props 和 State 等。

在 React 生态系统中,丰富的库和工具能够极大提升开发效率,解决实际项目中的各类问题。以下是 React 开发中最常用的核心工具和库的详细解析:

七、React Router:路由管理利器

(一)概述

React Router 是 React 官方推荐的路由解决方案,用于实现单页应用(SPA)的页面跳转和路由控制。在单页应用中,页面内容的切换无需重新加载整个页面,而是通过路由匹配渲染对应的组件,提升用户体验。

(二)核心功能

  • 基于 URL 路径匹配对应的组件
  • 支持嵌套路由(如/user/profile包含User和Profile组件)
  • 提供编程式导航(通过 API 实现页面跳转)
  • 支持路由参数(如/user/:id获取动态 ID)
  • 实现路由守卫(控制页面访问权限)

(三)基本用法(v6 版本)

复制代码
// 安装
npm install react-router-dom

// 路由配置示例
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
// 页面组件
const Home = () => <h1>首页</h1>;
const User = () => {
  const { id } = useParams(); // 获取路由参数
  return <h1>用户ID:{id}</h1>;
};
const About = () => <h1>关于我们</h1>;
// 路由配置
const App = () => (
  <BrowserRouter>
    {/* 导航链接 */}
    <nav>
      <Link to="/">首页</Link> |
      <Link to="/user/123">用户页</Link> |
      <Link to="/about">关于</Link>
    </nav>

    {/* 路由匹配 */}
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/user/:id" element={<User />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </BrowserRouter>
);

(四)优势

  • 与 React 组件模型深度融合,使用声明式语法
  • 支持多种路由模式(BrowserRouter使用 HTML5 History,HashRouter使用 URL 哈希)
  • 灵活的路由配置方式,适合复杂应用的路由管理
  • 良好的 TypeScript 支持,提升代码健壮性

八、Redux:全局状态管理

(一)概述

Redux 是基于 "单一数据源" 和 "不可变状态" 理念设计的状态管理库,主要解决 React 应用中跨组件状态共享的问题。当应用规模扩大(如电商平台的购物车、用户登录状态),组件间状态传递变得复杂时,Redux 能提供清晰的状态管理方案。

(二)核心概念

  • Store:存储整个应用的状态树
  • Action:描述状态变化的普通 JavaScript 对象(必须包含type字段)
  • Reducer:纯函数,根据 Action 计算新状态((state, action) => newState)
  • Dispatch:发送 Action 到 Reducer 的方法

(三)基本用法(结合 Redux Toolkit 简化版)

复制代码
// 安装
npm install @reduxjs/toolkit react-redux

// 1. 创建切片(slice)
import { createSlice, configureStore } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Redux Toolkit内部使用Immer库,支持"直接修改"状态
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});
// 2. 导出Action
export const { increment, decrement } = counterSlice.actions;
// 3. 创建Store
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});
// 4. 在组件中使用
const CounterComponent = () => {
  const count = useSelector((state) => state.counter.value); // 获取状态
  const dispatch = useDispatch(); // 获取dispatch方法
  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      <span>{count}</span>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
};
// 5. 应用入口(提供Store)
const App = () => (
  <Provider store={store}>
    <CounterComponent />
  </Provider>
);

(四)优势

  • 集中管理应用状态,解决跨组件通信难题
  • 状态变化可追踪,便于调试(结合 Redux DevTools)
  • 纯函数 Reducer 保证状态变化可预测
  • Redux Toolkit 简化了传统 Redux 的繁琐模板代码

九、Axios:HTTP 请求处理

(一)概述

Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js 环境,是 React 项目中与后端 API 交互的首选工具。

(二)核心功能

  • 支持浏览器端和 Node.js 端的 HTTP 请求
  • 拦截请求和响应(如添加认证令牌、统一错误处理)
  • 自动转换 JSON 数据
  • 取消请求
  • 超时设置

(三)基本用法

复制代码
// 安装
npm install axios

// 1. 基础请求
import axios from 'axios';
// GET请求
axios.get('/api/users')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));
// POST请求
axios.post('/api/users', { name: 'John', age: 30 })
  .then(response => console.log('创建成功'))
  .catch(error => console.error(error));
// 2. 创建实例(配置基础路径)
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000, // 超时时间
  headers: { 'Content-Type': 'application/json' }
});
// 3. 请求拦截器(添加认证token)
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});
// 4. 响应拦截器(统一错误处理)
api.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // 未授权,跳转登录页
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

(四)优势

  • API 简洁直观,比原生fetch更易用
  • 内置拦截器机制,便于统一处理请求 / 响应
  • 支持取消请求和超时控制,提升用户体验
  • 良好的浏览器兼容性(包括 IE11)

十、Create React App:项目脚手架

(一)概述

Create React App(CRA)是 React 官方推出的零配置脚手架工具,用于快速搭建 React 开发环境,无需手动配置 Webpack、Babel 等工具链。

(二)核心功能

  • 自动配置开发环境(Webpack、Babel、ESLint 等)
  • 内置开发服务器(支持热重载)
  • 一键构建生产版本(代码压缩、优化)
  • 支持 TypeScript、CSS Modules、Sass 等

(三)基本用法

复制代码
# 创建项目
npx create-react-app my-app
# 进入项目目录
cd my-app
# 启动开发服务器(http://localhost:3000)
npm start
# 构建生产版本(输出到build目录)
npm run build
# 运行测试
npm test
# 暴露配置文件(谨慎使用,不可逆)
npm run eject

(四)优势与局限

  • 优势:零配置快速上手,适合初学者;内置最佳实践;定期更新维护
  • 局限:配置固化,自定义配置需 eject(不可逆);大型项目构建速度较慢

替代方案:对于追求更快构建速度的项目,可考虑 Vite(基于 ES 模块的前端构建工具)

十一、React Developer Tools:调试工具

(一)概述

React Developer Tools 是浏览器扩展程序(支持 Chrome、Firefox 等),专为 React 应用调试设计,是开发 React 项目的必备工具。

(二)核心功能

  • 查看组件层次结构(类似 DOM 树)
  • 检查组件的 Props 和 State 实时值
  • 跟踪组件的重渲染情况
  • 与 Redux DevTools 配合调试状态变化
  • 性能分析(识别不必要的重渲染)

(三)使用方法

  1. 在浏览器扩展商店搜索 "React Developer Tools" 并安装
  2. 打开 React 应用页面,按 F12 打开开发者工具
  3. 切换到 "Components" 标签查看组件树,"Profiler" 标签进行性能分析

(四)实用技巧

  • 点击组件可在右侧面板查看其 Props、State 和 Hooks
  • 使用 "Highlight Updates" 功能标记重渲染的组件(闪烁效果)
  • 性能分析时,点击 "Record" 记录操作过程,生成性能报告

十二、扩展工具推荐

除上述核心工具外,以下工具在实际开发中也频繁使用:

  1. Styled Components:CSS-in-JS 解决方案,允许在 JavaScript 中编写 CSS 样式,实现组件样式封装

    import styled from 'styled-components';
    const Button = styled.button color: white; background: blue; padding: 8px 16px; ;

  2. React Query:用于管理服务器状态(如 API 数据缓存、同步、失效),简化数据获取逻辑

  3. Formik + Yup:Formik 处理表单状态和提交逻辑,Yup 用于表单验证,两者结合大幅简化表单开发

  4. Next.js:基于 React 的全栈框架,支持服务端渲染(SSR)、静态站点生成(SSG),优化 SEO 和首屏加载速度

相关推荐
GIS之家2 天前
vue3+arcgisAPI4示例:绘图工具动态修改样式导出GeoJSON(附源码下载)
arcgis·gis·webgis
@高蕊2 天前
光伏项目无人机踏勘--如何使用无人机自动航线规划APP
arcgis·无人机
wanzhong23333 天前
ArcGIS答疑-如何消除两张栅格图片中间的黑缝
arcgis
杨超越luckly3 天前
HTML应用指南:利用GET请求获取全国招商银行网点位置信息
前端·arcgis·信息可视化·html·银行网点
枝上棉蛮4 天前
ArcGIS与GISBox对比:中小企业GIS工具的高门槛与零门槛之选
arcgis·格式转换·osgb·gisbox·服务分发·免费发布·场景编辑
小彭努力中6 天前
164.在 Vue3 中使用 OpenLayers 加载 Esri 地图(多种形式)
开发语言·前端·javascript·vue.js·arcgis
杨超越luckly6 天前
HTML应用指南:利用POST请求获取全国便利蜂门店位置信息
前端·arcgis·信息可视化·html·门店
GISerQ.6 天前
ArcGIS:如何设置地图文档的相对路径或者发布为地图包
arcgis
浅浅一笑^*^6 天前
ArcGIS 4.x 绘图
开发语言·arcgis·swift