React 前端框架入门教学


React 是目前最流行的前端框架之一,由 Facebook 开发和维护。它主要用于构建用户界面,强调组件化开发高效更新。在本文中,我们将从零开始,逐步学习 React 的核心概念和基本用法。即使你是初学者,也能通过本文入门。


一、什么是 React?

React 是一个用于构建用户界面的 JavaScript 库,它的特点包括:

  1. 组件化开发:将 UI 划分为独立的、可复用的组件,便于维护和扩展。
  2. 声明式编程:通过声明式代码描述 UI 状态,React 会高效地更新和渲染需要改变的部分。
  3. 虚拟 DOM:React 使用虚拟 DOM 机制来提升性能,将变化计算后再一次性更新真实 DOM。

二、React 环境搭建

我们将通过 create-react-app 快速创建一个 React 项目。

1. 准备工具
  • Node.js :下载并安装 Node.js,安装后会自带 npm 包管理工具。
  • 代码编辑器 :推荐使用 VS Code
2. 创建项目

打开终端,运行以下命令:

复制代码
npx create-react-app my-react-app

这会创建一个名为 my-react-app 的 React 项目。

3. 启动项目

进入项目文件夹并启动开发服务器:

复制代码
cd my-react-app
npm start

浏览器会自动打开并显示一个 React 默认页面。


三、React 核心概念

1. 组件(Component)

组件是 React 的核心,可以理解为一个独立的 UI 模块。组件分为两种:

  • 函数组件(推荐)
  • 类组件

示例:创建一个简单组件

src 文件夹中,编辑 App.js

复制代码
function Welcome() {
  return <h1>Hello, React!</h1>;
}

export default Welcome;
2. JSX

JSX 是一种在 JavaScript 中嵌入 HTML 的语法扩展,看起来像 HTML,但实际是 JavaScript 的语法糖。

注意:JSX 的规则

  • 使用 大括号 {} 嵌入 JavaScript 表达式。
  • 每个标签必须关闭,比如 <img />
  • 最外层必须有一个父容器。
3. Props(属性)

props 是组件的输入参数,用于传递数据。

示例:使用 props

复制代码
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 在父组件中调用
<Greeting name="Alice" />
4. State(状态)

state 是组件内部动态变化的数据。

示例:使用 state

复制代码
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

四、React 项目结构

React 项目的典型结构如下:

复制代码
src/
├── components/   // 组件文件夹
├── App.js        // 主组件
├── index.js      // 项目入口文件
└── styles/       // 样式文件夹

将功能划分到独立的组件文件中,便于团队协作和代码维护。


五、React 基本操作

1. 条件渲染

根据条件显示不同内容:

复制代码
function Login(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please log in.</h1>;
  }
}
2. 列表渲染

使用 .map() 渲染列表:

复制代码
function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}
3. 表单处理

处理用户输入:

复制代码
function Form() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`You entered: ${inputValue}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

六、部署你的 React 应用

  1. 构建项目:

    复制代码
    npm run build

    这会生成一个 build 文件夹,包含优化后的静态文件。

  2. 部署到静态服务器(例如 GitHub Pages 或 Vercel)。


七、小结

学习 React 不必急于求成。可以从以下几个方面继续深入:

  • 熟悉 React Router 用于路由管理。
  • 学习 Context 和 Redux 进行全局状态管理。
  • 学习性能优化技巧,如 React.memo 和 lazy loading。

希望这篇博客能帮助你理解 React 的基础知识并动手实践!继续练习和探索,你会更深入地掌握它的强大功能。

相关推荐
专注VB编程开发20年17 分钟前
jss html5-node.nodeType 属性用于表示节点的类型
前端·js
高峰君主6 小时前
跨端时代的全栈新范式:React Server Components深度集成指南
前端·react.js·前端框架
埃兰德欧神8 小时前
Lynx:革新跨端开发,一次编写,多端闪耀
前端·javascript·前端框架
Thomas游戏开发11 小时前
Unity3D 游戏崩溃和 Bug 的在线报告系统设计
前端框架·unity3d·游戏开发
一天睡25小时12 小时前
前端工程化&&Webpack 和 Vite 的区别
前端·前端框架
进取星辰12 小时前
14、服务端组件:未来魔法预览——React 19 RSC实践
前端·react.js·前端框架
王佳斌14 小时前
react 报错
前端·react.js·前端框架
Nick_zcy1 天前
开发基于python的商品推荐系统,前端框架和后端框架的选择比较
开发语言·python·前端框架·flask·fastapi
三原1 天前
2025 乾坤(qiankun)和 Vue3 最佳实践(提供模版)
vue.js·架构·前端框架
懒羊羊我小弟1 天前
React Router v7 从入门到精通指南
前端·react.js·前端框架