浏览器只认识HCJ我先告诉大家一个结论浏览器只认识 HTML、CSS 和 JS 这三种语言。image-20260712133512019大家看一下这个页面的代码, 是不是非常复杂它大概有 9000 行screenshot_00_26screenshot_00_32是不是完全没办法看懂, 那咱们简化一下.这种开头是尖括号的代码叫做 HTML, 代表是一个按钮一个按钮image-20260712133424332如果想让这个按钮变得漂亮一点就需要使用 CSS. CSS 的代码如下所示。你会发现这个按钮变成了蓝色底色、白色文字。button {color: white;background-color: #1677ff;}image-20260712133435390平时咱们看到的按钮都是可以点击的如果想让它有一些交互就需要 JS. 咱们在 Js 中写到 “你好我是 JS。” 写完 Js 代码后再点击, 你会发现它给了一个弹框并且这个弹框内容写的是你好我是 JS。button.addEventListener(‘click’, function () {alert(‘你好, 我是 Js’);});image-20260712133309803咱们现在已经学会了 HTML、CSS 和 JS接下来我把这三种语言简称为 HCJ。框架层咱们会了 HCJ那刚才的页面就会改了吗很明显代码还是太复杂了这根本不是人能写出来代码。你可能会好奇这代码不是人写的吗是也不是。前辈们为了解决写出来代码浏览器能渲染而且人类也能维护发明了 React、Vue 和 Angular统称为框架层。image-20260712133521344咱们接下来以 React 为例这是我一个 Vibe Coding 出来的项目你会发现它会有很多乱七八糟文件这都不重要。今天咱们先来看 Button.jsx 这个地方, 其实就是把 HCJ 这三种语言写到了同一个文件中.你会发现这里面还是 但是把 CSS 写在了 button 里边并且把 Js 代码也写在了 button 里边. 并且还把这个 button 还封装了单独的一个文件叫做 button.jsx。screenshot_01_56咱们去页面看一下效果。你会发现这和刚才用 HCJ 写的效果一样。点击也会有同样的效果。它的好处是什么呢首先, 它这三种语言写在了一块非常好维护其次当它想重复利用的时候就可以直接复制。image-20260712133910492构建工具现在问题来了这种写法是人能看懂人喜欢的但浏览器不认识那怎么办呢所以就有人发明了 NodeNode 就可以把 React 转换成 HCJ。image-20260712134001367框架层有三种语言Node 也不知道该怎么转换这时候就有人又发明了 Vite。Vite 说“我来下达命令你只需要像驴子拉磨一样使劲的往前跑就行。”Node 一听太好了还主动拿出来小皮鞭 npm 说“你可以通过 npm 这个小皮鞭来给我下达命令。”image-20260712134023736组件库技术已经发展到这这个世界就完美了吗事实是没有因为还可以更好。人们写着写着发现每个项目都需要按钮、表格、弹框这些组件。这时候就有人站出来他说“我设计了一批漂亮实用的组件库大家用我的吧。” 他给这个组件库起名叫做 Ant design。screenshot_03_31