前端初学者应该先学 JavaScript，还是从 CSS 直接学 React？

2026-11-04数据小许

应该先学 JavaScript，掌握基础后再学 React

建议先学习 JavaScript 基础，再开始学 React。不必等到精通 JavaScript 才接触 React，但如果从 CSS 直接跳过去，往往要同时应对语言语法和组件开发的难题。

学习可以按照 HTML、CSS、JavaScript、React 的顺序推进。如果你已经能写简单的 HTML 和 CSS 页面，就可以开始给页面添加交互。

为什么 React 会显得复杂？

CSS 主要负责样式，JavaScript 负责逻辑和交互，React 是用于构建用户界面的 JavaScript 库。学习 React 时，仍然需要用 JavaScript 写函数、处理数组、判断条件和响应事件。

例如，React 经常用数组的 map() 渲染列表。如果还不理解数组和回调函数，就容易把 JavaScript 语法问题也当成 React 的难点。React 官方入门文档也直接用 JavaScript 函数来介绍组件，遇到不熟悉的语法时，可以回头查语言资料。参见 React 中文文档：快速入门。

JavaScript 先学到什么程度？

先以做出简单的交互页面为目标，学习以下内容：

基本语法：let、const、数据类型、运算符、条件判断和循环。
函数与数据：函数、参数、返回值、作用域、数组和对象，特别是 map()、filter() 的使用。
浏览器交互：选择 DOM 元素、修改内容、监听点击和表单事件，并在开发者工具中查看报错。
React 常见语法：箭头函数、解构、展开语法、import 和 export。

开始做数据请求时，再补上 Promise、async/await 和 fetch()。这些知识可以结合项目逐步学习，不必全部学完才接触 React。

先做一个能独立完成的小练习

从按钮计数器开始。把下面的代码保存为 index.html，用浏览器打开即可练习，不需要先配置 React 项目：

<!doctype html>
<html lang="zh-CN">
  <meta charset="utf-8">
  <title>计数器练习</title>
  <body>
    <button id="counter" type="button">点击次数：0</button>

    <script>
      const button = document.querySelector('#counter');
      let count = 0;

      button.addEventListener('click', () => {
        count += 1;
        button.textContent = `点击次数：${count}`;
      });
    </script>
  </body>
</html>

先弄清楚 count 保存什么、点击时函数何时执行，以及 textContent 为什么能改变按钮文字。然后自己增加一个“重置”按钮。

接着可以做待办列表或列表筛选，练习读取输入、保存数据，再根据数据更新页面。能不照抄教程完成这类小功能，就可以开始学习 React。遇到不会的 API，查文档很正常。

从哪些资料开始？

选一套主要教程，配合文档和练习即可，不必同时收集很多课程。

中文文字资料：MDN：JavaScript 脚本编程。适合学习语言基础和浏览器交互，可以按章节完成练习。
视频课程：freeCodeCamp：Learn JavaScript: Full Course for Beginners。这是英文入门视频，也可以从课程介绍页进入。课程发布较早，可用来学习基础语法；涉及工具和环境配置时，应对照相应工具的当前文档。
React 入门资料：React 中文文档：快速入门。有 JavaScript 基础后，可以用它学习组件、JSX、事件和状态。

看视频时，每学完一个知识点就暂停，自己写一小段代码，再改一个条件或功能。只跟着敲完，很难判断自己是否理解。

开始 React 后，怎么安排练习？

可以用 React 重做已经写过的计数器，比较数据变化如何反映到页面上。在支持 JSX 的 React 项目或在线练习环境中，组件可以这样写：

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(c => c + 1)}>
      点击次数：{count}
    </button>
  );
}

这里仍然有函数、变量和回调函数；新学的部分主要是 JSX、事件写法和 useState。练习时，注意通过更新状态让 React 更新界面。相关概念可对照 React 官方快速入门。

之后再学习 props、列表渲染和表单。路由、全局状态管理等内容，等项目确实需要时再加入。学习进度可以看自己能否解释代码、独立修改功能，不必给自己设定“几天学完”的期限。