React基础入门：核心概念与环境搭建 = 飞龙博客

React基础入门：核心概念与环境搭建

(3) feilong.org 修订于2026-06-24 10:32:22 react教程

什么是React？
React是由Facebook开源的前端JavaScript库，专注于构建用户界面。它通过组件化思想和虚拟DOM技术，使开发者能高效管理UI状态变化。本文将从基础概念入手，逐步引导你搭建开发环境并编写第一个React应用。

---

核心概念解析

1. JSX语法与Babel编译
JSX是React的标志性特性，它允许用类似HTML的语法描述UI结构。实际运行时会被Babel转换为React.createElement()调用。

// JSX示例
const element = <h1>Hello, React!</h1>;

// 转换后的真实代码
const element = React.createElement('h1', null, 'Hello, React!');

// JSX示例

const element = <h1>Hello, React!</h1>;

// 转换后的真实代码

const element = React.createElement('h1', null, 'Hello, React!');

> ⚠️ 需要安装Babel和React开发依赖，确保浏览器能正确解析JSX。

2. 组件化开发模式
React通过组件（Component）组织代码，每个组件封装独立功能。

// 函数式组件示例
function Welcome() {
  return <h1>Welcome to React</h1>;
}

// 类组件示例
class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// 函数式组件示例

function Welcome() {

return <h1>Welcome to React</h1>;

}

// 类组件示例

class Hello extends React.Component {

render() {

return <h1>Hello, {this.props.name}</h1>;

}

> ✅ 推荐优先使用函数式组件+Hooks API，这是React 16.8后的主流开发范式。

3. 状态（State）与属性（Props）
- State：组件内部数据，通过useState钩子管理

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

function Counter() {

const [count, setCount] = React.useState(0);

return (

<div>

<p>当前计数: {count}</p>

<button onClick={() => setCount(count + 1)}>+1</button>

</div>

);

}

- Props：组件间数据传递，类似函数参数

<Welcome name="Alice" /> {/* 父组件传递props */}

1	<Welcome name="Alice" /> {/* 父组件传递props */}

---

开发环境搭建指南

步骤1：安装Node.js与npm
访问[https://nodejs.org](https://nodejs.org)下载并安装最新LTS版本，确保终端能执行

node -v

node -v

和

npm -v

npm -v

命令。

步骤2：创建React项目
使用官方脚手架工具快速初始化项目：

npx create-react-app my-first-app
cd my-first-app
npm start

npx create-react-app my-first-app

cd my-first-app

npm start

> 🚀 该命令会自动安装React、ReactDOM等依赖，并启动开发服务器（默认端口3000）。

步骤3：理解目录结构

my-first-app/
├── public/            静态资源文件
├── src/              源代码目录
│   ├── App.js        主组件
│   └── index.js      入口文件
├── package.json      项目依赖配置
└── ...

my-first-app/

├── public/ 静态资源文件

├── src/ 源代码目录

│ ├── App.js 主组件

│ └── index.js 入口文件

├── package.json 项目依赖配置

└── ...

步骤4：构建生产环境

npm run build

1	npm run build

> 📦 该命令会将项目打包为优化后的静态资源，适用于部署到服务器或云平台。

---

常见问题解答

Q1: 开发服务器无法启动？
- 检查是否安装了

react-scripts

1	react-scripts

依赖
- 尝试删除node_modules并重新运行

npm install

1	npm install

Q2: JSX语法报错？
- 确保已安装Babel相关依赖（如@babel/core）
- 检查开发服务器是否正确加载了Babel转换后的代码

---

结语
React通过组件化和虚拟DOM技术，为现代前端开发提供了高效的解决方案。掌握本文核心概念后，建议通过[官方文档](https://reactjs.org/docs/getting-started.html)进一步学习生命周期方法、路由集成（如React Router）和状态管理工具（如Redux）。实践是学习的最佳途径，动手实现一个待办事项(Todo List)应用将巩固所学知识。

更新网址：https://feilong.org/react-basic-concepts-setup
最初发布：20260624 10:32:22 feilong.org 于广州

加入收藏夹，查看更方便。

旧文：react状态管理与组件通信

飞龙博客