从机械图纸到React组件：一个30岁转行人的安全入门笔记

两年前我还在苏州机械厂对着CAD图纸改公差，现在已入行前端一年半。今天写写React入门踩过的坑，以及一个转行人对“安全”的执念。

环境安装：别在第一步就裸奔

第一个安全建议：去官网下载，别信搜索引擎排名。Node.js官网是nodejs.org，装LTS版本即可。装完终端敲node -v和npm -v，能显示版本号就对了。

创建项目推荐Vite，一条命令三秒搞定：

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

Create React App依赖太多、启动慢，不推荐。

写第一个组件：从“图纸思维”到“积木思维”

机械图是一个零件一个零件标注，React组件化思维类似，只不过零件变成了函数：

function Welcome() {
  return <h1>你好，我是从机械转过来的程序员</h1>;
}

export default Welcome;

JSX是React的语法糖，背后是React.createElement调用。这里有个关键安全细节：JSX花括号{}里的表达式默认转义，用户输入的<script>标签会被渲染为纯文本。这是React内置的XSS防护，但前提是别用dangerouslySetInnerHTML——光听名字就知道多危险。我见过有人用它渲染富文本，被安全测试同事在周会上点名。

状态管理：新手最容易翻车的地方

第一个交互组件是计数器，卡了整整一个下午：

import { useState } from 'react';

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

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>加一</button>
    </div>
  );
}

坑在于写成onClick={setCount(count + 1)}，直接死循环，浏览器卡死。原理：onClick需要函数引用，不是函数调用的结果。心得：遇到问题先看报错信息，再查官方文档，最后才是百度。顺序反了，容易在垃圾信息里溺水。

AI安全：转行人必须额外警惕的领域

AI工具写代码效率高，但作为从传统行业转过来的人，我对安全有本能敏感。机械厂一颗螺丝拧错扭矩可能整台设备报废，代码里一段AI生成的代码没审查，可能就是一个安全漏洞。

我的习惯：AI生成的所有代码必须逐行过一遍，尤其是涉及用户输入、网络请求、本地存储的部分。上个月AI生成登录表单，直接建议把token存localStorage——这在安全上有争议，XSS攻击可以读取localStorage。跟组里前辈讨论后改成了httpOnly cookie方案。

把AI当实习生：它干活快，但你必须review。它不知道你的业务场景、安全边界和公司等保要求。

第一个应用：从“Hello World”到能上线

第一个React应用是极简待办：添加任务、标记完成、删除任务，数据存localStorage，没接后端。部署到Vercel，女朋友说样式有点丑。丑没关系，能跑起来，逻辑对，就是第一步。

React入门不难，难的是在信息爆炸时代保持清醒：去官网下载、理解框架默认安全行为、警惕AI生成代码隐患、别用dangerouslySetInnerHTML。

机械厂教会我一件事：安全不是某个环节的事，而是每个步骤的习惯。写代码也一样。

如果你也在转行路上，别怕慢。我装环境装到凌晨两点，写计数器卡一下午，现在不也能敲出这篇文章吗？React不难，难的是开始。开始了，就成功一半了。