在前端开发的世界里，我们从最初的“刀耕火种”——原生 JavaScript，一步步迈向了现代化框架主导的开发模式。本文将带你回顾原生 JS 的方式，理解 Vue 和 React 在开发体验、效率和项目结构上的巨大提升，并带你快速上手一个基于 Vite 的 React 应用。
一、语义化标签：写给人看的结构化 HTML
无论用什么框架，HTML 的语义化始终是前端开发的基础。
我们常见的结构，比如一个展示数据的表格，使用语义化标签能更清晰地表达内容的结构和层次：
<table id="friends" class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>家乡</th>
</tr>
</thead>
<tbody>
<tr>
<td>lxw</td>
<td>九江</td>
</tr>
<tr>
<td>lh</td>
<td>赣州</td>
</tr>
</tbody>
</table>
我们可以在数据当中找到挂载点，
二、原生 JS 的 DOM 编程：低效但直观
还记得这段代码吗？
const table = document.createElement('table');
const tr = document.createElement('tr');
const td = document.createElement('td');
td.innerText = '张三';
tr.appendChild(td);
table.appendChild(tr);
document.body.appendChild(table);
这就是“刀耕火种”的时代 —— 手动创建、拼接 DOM 节点。这样的代码冗长、易错，难以维护。
三、样式框架提升用户体验
为了减少样式的重复劳动，我们引入了像 Bootstrap 这样的 CSS 框架：
.container：统一容器宽度.table：内置表格样式.btn：按钮样式统一
这些框架让我们不再为每一个按钮、每一张表格重复写 CSS，从而把精力集中在“业务逻辑”上。
四、让框架替我们做事：Vue 篇
Vue 的出现让开发者从繁杂的 DOM 操作中解放出来：
通过 v-for，我们无需手动创建每一个 DOM 节点，Vue 会根据数据变化自动更新界面。这种 响应式数据驱动视图 的方式，真正让我们“专注于业务”。
Vue 的核心目标：远离底层 API，聚焦业务逻辑。
Vue.createApp(App).mount('#app');
你只需要关心 App 里写什么，其他的交给框架。
五、React：适合大型应用的构建框架
React 是由 Facebook 推出的现代化前端框架，更适合构建复杂的、组件化的大型应用。
快速创建 React 应用（基于 Vite）
npm init vite
选择 React 模板，一键生成项目结构。项目启动只需：
cd your-project-name
npm install
npm run dev
你就会看到熟悉的 React 启动页面！
六、前端框架演进总结
| 特性 | 原生 JS | Vue | React |
|---|---|---|---|
| DOM 操作 | 手动拼接 | 数据驱动 | 数据驱动 |
| 模板语法 | 无 | 模板+指令 | JSX |
| 上手门槛 | 低 | 适中 | 略高 |
| 适用场景 | 简单页面 | 中小型项目 | 大型复杂项目 |
| 性能优化 | 手动处理 | 内建响应式 | 虚拟 DOM + Hooks |
七、写在最后
如果你还在用原生 JS 拼页面，不妨从 Vue 或 React 开始，体验一次框架化开发带来的高效与乐趣。
前端的发展日新月异，但从底层 DOM 到现代框架的演进思路永不过时。
