说实话，在前端这个圈子里混，Ru果你还没听说过 React，那可Neng真的要反思一下是不是“闭关锁国”太久了。这玩意儿简直就是让 JavaScript 开发“开挂”的神器。以前我们写网页，那是真的苦，HTML 里套着 JS，JS 里又要去找 DOM，代码写得像盘丝洞一样乱。但 React 出现后一切dou变了。它把网页拆成了一个个“组件”，就像小时候玩的乐高积木，你想搭个城堡还是搭个飞船，全kan你怎么拼。

而今天我们要聊的主角，不是 React 本身，而是它那个让人又爱又恨、kan似 HTML 却又不是 HTML 的语法糖——JSX。初次kan到 JSX 代码，你可Neng会误以为它就是 HTML，毕竟

这样的写法实在太熟悉了。但实际上，JSX 是一种 JavaScript 的语法 。它Zui终会被像 Babel 这样的工具编译成纯粹的 JavaScript 代码。具体来说所有的 JSX 代码dou会被转换成 React.createElement 函数的调用。比如上面提到的 div 结构，编译后会变成 React.createElement)。React.createElement 函数接收三个参数：标签名、属性对象和子元素。这种转换机制，让开发者Ke以用geng直观的方式描述 UI 结构，同时保留了 JavaScript 的全部编程Neng力。

一、工欲善其事：搭建你的 React 战场

想玩转 React，先把开发环境搭好！这就像你要去打怪升级，总得先选把趁手的武器吧？主流有两种方式，按需选择，别盲目跟风。

1. 传统老炮：Create React App

这是 React 官方推出的项目创建工具，Zui大的优点就是“省心”。你不需要手动去配置 webpack、babel 这些让人头秃的底层工具，一行命令就Neng生成完整的 React 项目。

# 创建项目
npx create-react-app my-react-app
# 进入项目目录
cd my-react-app
# 启动项目
npm start

这种方式虽然稳定，适合 React 新手入门，但缺点也hen明显：项目体积大，启动速度稍慢，有时候改一行代码，等编译dou要半天急死个人。

2. 新锐极速派：Vite

如今geng推荐的轻量化选择，启动速度、热geng新效率远超传统脚手架，创建 React 项目geng高效。用过一次你就回不去了那种丝滑的感觉简直了。

# 创建Vite+React项目
npm create vite@latest   # latest是选择Zui新版本
# 你创建的项目名字
my-vite-react
# 选择 React JavaScript 然后一路Enter
# 进入目录
cd my-vite-react
# 安装依赖
npm install
# 启动项目
npm run dev

启动后就Nengkan到 Vite 默认的 React 项目结构，核心入口文件就是 main.jsx—— 这是整个 React 项目的Zui外层入口，所有组件Zui终dou会通过它挂载到页面上。比如下面这段代码，就是典型的入口写法：

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
// 找到页面中的root节点，渲染App根组件
ReactDOM.createRoot).render(
    
        
    
);

二、JSX 的“怪癖”：别被它骗了

JSX 的本质是 “JS + XML”，kan似写 HTML，实则是 JS 的语法 ，用它写界面比原生 JS 简洁 N 倍！但使用时要遵守核心规则，不然报错报到你怀疑人生。

1. 必须有一个“爹”

这里提一嘴，JSX 表达式必须要有一个父元素！你不Neng返回好几个并列的标签，必须把它们包在一个大容器里。以前我们可Neng用 div 包裹，现在 React 18+ 也Ke以用 <> 来占位，免得多了个无意义的 div。

2. 属性名要“变形”

在 JSX 里写属性，hen多地方和 HTML 不一样。Zui典型的就是 class，因为在 JS 里这是保留字，所以 JSX 中必须用 className。还有像 for 要改成 htmlFor，tabindex 要改成 tabIndex。 统统变成小驼峰命名法。

3. 样式的写法大不同

原生 HTML 用 style="color: red"，JSX 需用对象包裹，属性名用小驼峰。这可是个大坑，新手经常踩。比如你想把字变红，不Neng写字符串，得写个对象。

export default function App {
  const styleObj = {
         color: 'red',
         fontSize: '20px' // 注意这里是小驼峰，对应 CSS 的 font-size
    };
    return (
        

            
帅哥
            {/* 也可直接写对象，记得用双括号 */}
            
帅哥
        
    );
}

除了行内样式，我们geng常用的是引入 CSS 文件。JSX 中不Neng用 class，需用 className，配合 CSS 文件：

/* index.css */
.home {
    background: #f5f5f5;
    padding: 20px;
}

// App.jsx
import './index.css';
export default function App {
    return 
首页
;
}

有时候我们需要动态切换类名，比如根据状态高亮显示，这时候Ke以用模板字符串：

export default function App {
    const isActive = true;
    return (
        

            动态样式
        
    );
}

三、JSX 的魔法：把 JS 塞进 HTML

JSX Zui强大的地方，就是它允许你在 HTML 结构里直接写 JavaScript 表达式。只要用大括号 {} 包起来JSX 就知道：“哦，这里要执行 JS 代码了”。

1. 实战：条件渲染

需求：根据条件展示不同内容。在 JSX 里你不Neng直接写 if 语句，因为 if 是语句不是表达式。这时候就要请出我们的老朋友——三元表达式。

export default function App {
    let flag = true;
    return (
        

            {/* 三元表达式是表达式，可嵌入JSX */}
            {flag ? '我比他帅' : '他比我帅'}
            {/* 进阶：逻辑与运算，flag为true时才显示 */}
            
{flag && '只有flag为真才显示我'}
        
    );
}

2. 实战：列表渲染

原生 JS 写列表需要手动创建 DOM、循环追加，代码繁琐得要命。kankan下面这段原生代码，是不是kan着就累？

这种原生写法用起来就非常麻烦，而且代码也多。但 React 的 JSX + 列表渲染，直接 “声明” 要渲染的内容，React 自动帮你生成 DOM。我们通常使用数组的 map 方法。

export default function App {
    const arr = ;
    // map是表达式，返回新数组，可直接嵌入JSX
    return (
        

            {arr.map => (
                
{item}
            ))}
        

    );
}

进阶版：渲染复杂数据列表，比如一个歌曲列表：

export default function App {
    const songs = ;
    return (
        

            {songs.map => (
                
{item.name}
            ))}
        

    );
}

3. 实战：事件绑定

网页不Neng光kan，还得Neng点。原生 HTML 用 onclick，JSX 用小驼峰 onClick，且绑定的是函数。这点千万要注意，别把 onClick={handleClick} 写了那样页面一刷新就执行了根本点不了。

export default function App {
    // 定义事件处理函数
    const handleClick =  => {
        console.log;
    };
    return (
        // 直接绑定函数，不加
        
hello
    );
}

那Ru果我想传参数呢？需用箭头函数包裹，才Neng传递参数：

export default function App5 {
    const songs = ;
    // 带参数的事件函数
    const handler =  => {
        console.log;
    };
    return (
        

            {songs.map => (
                
 handler}
               >
                    {item.name}
                

            ))}
        

    );
}

四、组件化：React 的 “灵魂”，像搭积木一样开发

组件化是 React 单页应用的核心，把页面拆成独立、可复用的组件，比如头部、导航、内容区，再像搭积木一样组合。这样代码不仅好维护，复用性也极高。

1. 函数组件

现在基本dou推荐用函数组件了简单明了。就是一个返回 JSX 的函数。我们Ke以把页面拆成 Head 和 Main 两个组件。

// components/Head.jsx
export default function Head {
    return (
            
    );
}
// components/Main.jsx
export default function Main {
    const songs = ;
    return (
        

          热门歌曲
          

            {
              songs.map
            }
          
        
    );
}

2. 组合组件

有了零件，我们就Ke以组装了。在 App.jsx 里引入并使用它们，就像使用普通 HTML 标签一样。

// App.jsx
import Head from './components/Head';
import Main from './components/Main';
export default function App6 {
    return (
        

            {/* 引入头部组件 */}
            
            {/* 引入主体组件 */}
            

        
    );
}

五、JSX 进阶：数组处理小技巧

开发中常需要对数组Zuo转换，比如把数字数组放大 10 倍。在 React 里这其实就是 JS 的逻辑，但因为 JSX 支持嵌入表达式，所以写起来特别爽。

export default function App {
    const arr = ;
    // map返回新数组，可直接渲染或赋值使用
    const newArr = arr.map;
    return (
        

            
原数组：{arr.join}
            
放大10倍:{newArr.join}
        
    );
}

放在 JS 里可Nenggeng好理解，但在 JSX 里这种数据驱动视图的感觉会让你爱不释手。你只需要关心数据是什么样，页面就会自动变成什么样。

React 允许将代码封装成组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件。这种思想彻底改变了前端开发的模式。虽然刚开始接触 JSX 会有点不习惯，比如要写 className，样式要写对象，事件要传函数，但一旦你习惯了这种“JS in HTML”的写法，你会发现效率简直起飞。

在没有接触 react 之前，我是一点dou没有了解过 jsx 语法的任何特性，我了解该语法完全是为了学习 react，所以对于我个人来说用 jsx 语法就是为了学习 react 也不算过分。文章讲解了 JSX 的书写规则，如 HTML 与 JavaScript 混合编写，顶级标签包裹，单标签闭合，属性名的调整，内联样式的 JSON 格式，以及如何在 jsx 中嵌入 JavaScript 表达式和添加事件监听。

要把带有 JSX 语法的代码转化为纯 Javascript 代码，有多种方式，对于内联与 HTML 中的代码或者是未经过转化的外部文件，在 script 标签中要加上 type="text/babel"，并引入 Babel 文件即可，不过这种方式并不建议在生产环境使用。现代开发流程中，我们通常使用 Webpack 或 Vite 这样的构建工具来处理这些转换。

学习 React 和 JSX 是一段充满挑战但也非常有意思的旅程。虽然这里只是入门，但掌握了这些基础，你Yi经Ke以构建出相当复杂的界面了。接下来你Ke以去探索 React 的 Hooks、状态管理等geng深层次的内容。

具体 JS 学习请kan我的专栏：你不知道的JavaScript

---