全栈不是简单的‘前端+后端’，而是在微服务、容器化、边缘计算时代的‘生存策略’。当你同时面对React Server Component的颠覆和PostgreSQL查询优化的深渊时，需要的是全新的学习范式。
为什么要学习全栈开发？
无论你是前端还是后端，在做了五六年之后的开发，都会觉得很多时候，开发任务已经没有多大的挑战，因为这个时候，你对自己这个圈立的技术的了解几乎已经达到了饱和的程度。
然而次吃的你仍然不能成为独当一面的工程师，如果你想晋升项目经理或者项目负责人，那么全栈的能力就显得尤为重要，这从过去的招聘项目负责人的招聘要求也能得出这个结论。
另外，如果有一天你决定，不再想要朝九晚六的过着上下班的日子，想要成为一名独立开发者或者自由职业人，那么全栈能力也是必需的。
熟悉我的老朋友，都知道我之前一直是写Go和Java的，对前端的了解也是一星半点。从今天开始我决定从0死磕全栈，也希望在死磕的路上可以遇见同样的人。
经过一番比较，我选择以React这个流行的现代web框架为起点，开始学习全栈的技术。虽然vue也非常流行，但是一心无法二用。
借助之前的后端经验，入门一个新语言，一般都是从hello world开始的。那我们入门React也就遵循这个优良传统，从hello world开始。
第一步：搭建React开发环境
首先我们要去下载node.js，因为React项目的启动和开发需要依赖node.js来提供开发服务器和项目的依赖包的管理npm，node.js自带了npm，所以我们可以去node.js官网直接下载node.js
官网地址：https://nodejs.cn/en/download
官方推荐的首要方式是通过docker方式来安装，但是也可以下载zip面安装的方式来下载。
下载好了之后，为了方便我们在任何地方可以执行npm的命令，我们可以给node.js配置一个环境变量。
下面是我的node.js的位置
下面是配置的Path环境变量
接着我们需要安装React的一个开发工具vscode，当然如果你用习惯了jetbrains IDE 也可以直接下载webstorm。由于之前用的goland和idea比较多，为了适应前端的习惯，这里选择vscode，顺便去感受下vscode的强大之处。
vscode官网地址：https://code.visualstudio.com
目前vscode在AI的加持之下，官网的口号也变成了AI code editor了。
第二步：创建React项目
我们知道最原始的创建一个项目，就是手动去配置一个项目所需要的项目文件。但是React到今天位置已经有14年的历史，如果还是靠手动来完成创建一个React项目已经是不可能的啦。和Java一样，React也有创建项目的脚手架。目前有2个快速创建React项目的脚手架，一个是官方在2016年推出的create-react-app，另一个是Vite，是vue创始人推出的构建工具。
这里我们先说第一种create-react-app.
在cmd 或者 powershell 里面执行如下命令
npm install -g create-react-app
然后执行如下命令开始创建React项目，建议先创建一个存放React项目的顶级目录，然后子啊这个目录下去执行这个命令
npx create-react-app my-app
npx 是 npm 5.2+ 版本自带的一个工具，用于运行本地或远程的 npm 包。
等几分钟，就会看到已经生成了my-app的React项目，这个时候可以请vscode出场，来打开我们的第一个React项目，看看它是什么样的，项目结构如下
文件说明
接着我们找到这个项目的所在目录，进入到目录中执行项目的启动命令
nmp start
等一会，我们就可以看到项目会在浏览器里面新打开一个tab页面http://localhost:3000。
为了让自己有参与感，我们对App.js 的内容进行简单的改动
function
App
return
<
div
className
=
"App"
>
<
h1
>
</
h1
>
</
div
>
到这里，我们就完成了React hello world 的实现了。
第二种方式Vite，和第一种实际上操作方式是差不多的。
执行创建react项目的命令
create
@latest
-
-
--template react-ts
接着就会出现如下的交互式窗口，这里我们按住键盘的下箭头来选择React
然后选择语言
这里就选择typescript。
创建成功！！！
项目结构如下
然后执行那匹马install 和 npm run dev 启动项目
注意：这个命令 后面加了 --template react-ts，表示这个项目是基于typescript来写的react项目。如果不加默认还是以js为模板创建的react项目。
my-vite-app/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── App.tsx
│ ├── main.tsx
│ ├── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
访问http://localhost:5173
虽然第一种create-react-app是官方的方式，但是在今年已经开始逐渐放弃这种方式，并建议现有应用迁移至框架(如Next.js)，或迁移至 构建工具（如 Vite、Parcel 或 RSBuild）。原因是由于 Create React App 目前没有活跃的维护者，并且已经有许多现有的框架能够解决这些问题，我们决定弃用 Create React App。