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

从0死磕全栈第1天：从写一个React的hello world开始

news 2025/8/26 14:17:43

导语：全栈不是简单的“前端 + 后端”，而是在微服务、容器化、边缘计算时代的“生存策略”。本文将带你从零搭建 React 开发环境，完成第一个“Hello World”项目，并对比主流脚手架，助你开启全栈之路。

一、为什么选择全栈开发？

全栈开发早已不再是“样样通、样样松”的代名词，而是现代工程师的核心竞争力。

1. 突破职业瓶颈

无论你是前端还是后端，工作五六年之后，技术学习很容易进入饱和期。此时，若想晋升为项目经理或技术负责人，全栈能力就成了硬性要求。

2. 拓展职业可能性

如果你想摆脱“朝九晚六”的生活，成为一名独立开发者或自由职业者，全栈能力更是不可或缺。你需要独立完成产品从设计、开发到部署的全流程。

本文作者原为 Go/Java 后端开发者，前端知识薄弱。现决定从零开始，以 React 为起点，开启全栈学习之旅。希望在“死磕”的路上，遇见志同道合的你。

二、选择技术栈：React 还是 Vue？

前端框架中，React 和 Vue 是两大主流。

本文选择 React 作为学习起点，原因如下：

生态庞大，社区活跃
被 Next.js、Remix 等主流框架广泛采用
在企业级应用中占据主导地位

💡 虽然 Vue 也很优秀，但“一心不能二用”，建议初学者先专注一个框架。

三、第一步：搭建 React 开发环境

1. 安装 Node.js

React 项目的开发依赖 Node.js 提供运行时环境和包管理工具 npm。

官网下载：https://nodejs.org
推荐下载 LTS（长期支持）版本

安装完成后，打开终端，验证安装：

node -v
npm -v

2. 配置环境变量（Windows）

为了让 npm 命令在任意路径下可用，需将 Node.js 安装路径添加到系统 PATH 环境变量中。

例如：

C:\Program Files\nodejs\

3. 安装代码编辑器

推荐使用 VS Code，轻量、免费、插件丰富，且被广泛用于前端开发。

官网下载：https://code.visualstudio.com

💡 VS Code 在 AI 助手加持下，已成为“AI 代码编辑器”的代表。

四、第二步：创建你的第一个 React 项目

手动配置 React 项目非常复杂，因此我们使用脚手架工具快速搭建。

目前主流的脚手架有两个：

create-react-app（官方，已逐步弃用）
Vite（现代、极速，推荐）

方式一：使用 `create-react-app`（传统方式）

全局安装：

npm install -g create-react-app

创建项目：

npx create-react-app my-app

npx 是 npm 5.2+ 自带的工具，用于运行包。

进入项目并启动：

cd my-app
npm start

浏览器将自动打开 http://localhost:3000，看到默认页面。
修改 src/App.js，实现“Hello World”：

function App() {return (<div className="App"><h1>Hello, React!</h1></div>);
}export default App;

方式二：使用 `Vite`（推荐）

create-react-app 已被官方弃用，建议新项目使用 Vite。

创建项目（以 TypeScript 为例）：

npm create vite@latest my-vite-app --template react-ts

按提示选择：
- 选择框架：React
- 选择语言：TypeScript
安装依赖并启动：

cd my-vite-app
npm install
npm run dev

访问 http://localhost:5173，项目启动成功。

五、项目结构说明（以 Vite 为例）

my-vite-app/
├── node_modules/        # 依赖包
├── public/              # 静态资源
├── src/                 # 源码目录
│   ├── assets/          # 图片等资源
│   ├── App.tsx          # 根组件
│   ├── main.tsx         # 入口文件
│   └── ...
├── index.html           # 主页面
├── package.json         # 项目配置
├── tsconfig.json        # TypeScript 配置
└── vite.config.ts       # Vite 配置

六、官方已弃用 `create-react-app`，我们该如何选择？

根据官方公告，Create React App 已停止维护，不再推荐用于新项目。

官方建议：

现有项目：逐步迁移到 Next.js 等框架
新项目：使用 Vite、Parcel 或 RSBuild 等现代构建工具

为什么 Vite 更好？

✅ 启动速度极快（基于 ES Modules）
✅ 热更新秒级响应
✅ 配置简单，开箱即用
✅ 支持 React、Vue、Svelte 等多种框架

七、总结

步骤	工具/命令
安装 Node.js	`https://nodejs.org`
安装 VS Code	`https://code.visualstudio.com`
创建 React 项目	`npm create vite@latest my-app --template react-ts`
启动项目	`npm run dev`