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

大白话React第一章基础入门

news 来源：原创 2025/5/20 19:59:54

大白话React第一章基础入门

1. 环境准备

咱要学 React 开发，就好比要开一家蛋糕店，首先得把开店要用的工具和场地准备好。

安装 Node.js 和 npm：Node.js 就像是蛋糕店的烤箱，有了它，咱们写的代码才能像蛋糕一样“烤”出结果，能在电脑上跑起来。npm 呢，就像是一个超级大的原料仓库管理员，它能帮咱们快速找到并引进各种做蛋糕需要的原料（也就是代码库）。你到 Node.js 的官网（https://nodejs.org/ ），根据自己电脑的系统，选一个合适的版本下载安装。装完之后，打开命令行窗口（就像走进蛋糕店的后厨），在里面输入 node -v 和 npm -v，要是能显示出具体的版本号，那就说明烤箱和原料管理员都已经就位啦。
了解命令行基础操作：命令行就像是后厨里的操作指令。比如说 mkdir，它就相当于在后厨新隔出一个小柜子来放原料，专门用来创建新的文件夹；cd 呢，就好比是你从后厨的这头走到那头，用来进入不同的文件夹。掌握这些指令，能让咱们在后厨（开发环境）里行动自如。

2. 学习 JavaScript 与 HTML、CSS

在 React 开发里，JavaScript、HTML 和 CSS 就像是做蛋糕的三种关键原料，缺一不可。

复习或学习 ES6+ 新特性：JavaScript 是让网页有活力的魔法药水。ES6+ 就是这瓶魔法药水的升级版，里面有好多新技能。比如说箭头函数，就像是做蛋糕有了新的模具，能让代码写起来更简单、更顺手。你可以去 MDN Web Docs（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ）这个知识宝库看看，里面详细介绍了这些新技能怎么用。
巩固 HTML 标签和 CSS 样式基础：HTML 就像是蛋糕的模具，它规定了蛋糕的形状和结构，像 <div> 就好比是一个大蛋糕盒子，能把其他东西装进去。CSS 则是给蛋糕抹奶油、撒巧克力豆的工具，让蛋糕变得好看又吸引人。W3Schools（https://www.w3schools.com/ ）就像是一本蛋糕装饰指南，能教你怎么用 HTML 和 CSS 把网页打扮得漂漂亮亮。

3. 了解 React 基本概念

React 就像是一个超级厉害的蛋糕制作团队，它有自己独特的工作方式和工具。

虚拟 DOM：想象一下，你要做一个特别复杂的蛋糕，直接在蛋糕胚上改来改去很容易把蛋糕弄坏。虚拟 DOM 就像是你先在纸上画好蛋糕的样子，反复修改设计图，觉得没问题了再动手做真正的蛋糕。这样能提高效率，减少浪费。
组件：组件就像是蛋糕店里的各种小蛋糕模块，比如巧克力层、奶油层、水果片。每个组件都有自己独特的味道和功能，把它们组合起来就能做出各种各样的大蛋糕（网页应用）。
JSX 语法：JSX 就像是一种特殊的蛋糕制作图纸，它允许你在 JavaScript 代码里直接写类似 HTML 的东西。这样你可以更直观地描述蛋糕的样子，写起代码来也更方便。
阅读 React 官方文档：React 官方文档（https://reactjs.org/docs/getting-started.html ）就像是这个蛋糕制作团队的说明书，里面详细介绍了团队的各种工具和工作流程，一定要好好读一读。

4. 搭建 React 开发环境

有了前面的准备，现在咱们要开始在后厨搭建真正的蛋糕制作生产线了，用 create-react-app 这个神奇的工具来帮忙。

创建项目：打开命令行窗口，输入 npx create-react-app my-react-app。这里的 my-react-app 就是你蛋糕店的名字，你可以根据自己的喜好改。这个命令一下达，create-react-app 就会像一个勤劳的工人，帮你快速搭建好一个基本的蛋糕店框架。创建完成后，输入 cd my-react-app，这就相当于你走进了自己的蛋糕店。然后再输入 npm start，就像是把蛋糕店的灯打开，启动整个店铺，这时候在浏览器里就能看到一个初始的网页啦。
了解项目文件结构：项目创建好后，会有一堆文件夹和文件，就像蛋糕店里有不同的房间和柜子。其中 src 目录就像是蛋糕店的操作间，里面放着主要的制作工具和材料（源代码）；public 目录就像是仓库，放着一些备用的东西，比如图片、图标这些静态资源。

5. 编写第一个 React 组件

现在咱们要开始做第一个小蛋糕（组件）啦。

创建函数组件：在 src 目录下新建一个 HelloWorld.js 文件，这就好比是在操作间里专门隔出一个小区域来做某种特别的小蛋糕。

// 引入 React 这个蛋糕制作团队，这样咱们才能用它的工具和方法
import React from 'react';

// 定义一个名为 HelloWorld 的小蛋糕（组件），它是一个函数组件
const HelloWorld = () => {
  // 这个小蛋糕上面有一个牌子，牌子上写着 Hello, World!
  return <h1>Hello, World!</h1>;
};

// 把这个小蛋糕做好后，放到展示柜里（导出组件），让其他地方可以用
export default HelloWorld;

在 App.js 中使用组件：App.js 就像是蛋糕店的展示窗口，要把做好的小蛋糕展示给顾客看，就得把它放到展示窗口里。

// 引入 React 这个蛋糕制作团队
import React from 'react';
// 从 HelloWorld.js 文件里引入我们刚才做好的小蛋糕（组件）
import HelloWorld from './HelloWorld';

// 定义一个名为 App 的大蛋糕（组件），它是整个蛋糕店的主展示区
function App() {
  return (
    <div className="App">
      {/* 在主展示区里放上我们的小蛋糕 */}
      <HelloWorld />
    </div>
  );
}

// 把整个主展示区放到蛋糕店门口（导出组件），让顾客能看到
export default App;

通过以上步骤，你就完成了 React 基础入门阶段的学习。打开浏览器，访问对应的地址，你就能看到屏幕上显示出 Hello, World!，这就说明你成功做出了第一个简单的 React 小蛋糕啦！