❌

阅读视图

发现新文章，点击刷新页面。

React 入门秘籍：像搭积木一样写网页，JSX 让开发爽到飞起！

✇掘金 前端
风止何安啊

前言

还在为原生 JS 写页面 “东拼西凑” 头疼？还在为 HTML 和 JS 交互写一堆繁琐逻辑？好了，我们聊了这么久的 JS，相信大家对 JS 已经有了一定的基础了。接下来我们开始接触前端框架，带大家了解--React。

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

一、React：让前端开发效率翻倍的 JS 框架

相信学习前端的小伙伴对React这个词并不陌生，但又不知道它具体是个啥。大白话来讲，它就是让 JS 开发 “开挂” 的框架。简单来说，React 就是来 “救场” 的JS 框架！它把网页拆成 “组件”，像搭积木一样拼出整个页面，还能用JSX把 JS 和 HTML 揉在一起写，直接让开发效率起飞～

二、开局第一步：搭建 React 项目环境

想玩转React，先把开发环境搭好！主流有两种方式，按需选择：

1. create-react-app：官方 “傻瓜式” 脚手架

React 官方推出的项目创建工具，无需手动配置 webpack、babel 等底层工具，一行命令就能生成完整的 React 项目：

# 创建项目
npx create-react-app my-react-app

# 进入项目目录
cd my-react-app

# 启动项目
npm start

优点是省心、稳定，适合 React 新手入门；缺点是项目体积较大，启动速度稍慢。

2. Vite：新一代 “极速” 构建工具

如今更推荐的轻量化选择，启动速度、热更新效率远超传统脚手架，创建 React 项目更高效:

# 创建Vite+React项目
npm create vite@latest   # latest是选择最新版本

# 你创建的项目名字
my-vite-react

# 选择 React JavaScript 然后一路Enter

# 进入目录
cd my-vite-react

# 安装依赖
npm install

# 启动项目
npm run dev

image.png

启动后就能看到 Vite 默认的 React 项目结构，核心入口文件就是main.jsx—— 这是整个 React 项目的最外层入口，所有组件最终都会通过它挂载到页面上。

三、JSX：React 的 “语法糖”，让 JS 和 HTML 无缝融合

JSX 的本质是 “JS + XML（HTML）”，看似写 HTML，实则是 JS 的语法扩展，用它写界面比原生 JS 简洁 10 倍！但使用时要遵守核心规则：

1. 核心规则：JSX 里只能放 “表达式”，不能放 “语句”

  • 表达式：有返回值的代码（比如变量、算术运算、数组方法、三元运算），用{}包裹就能嵌入 JSX；
  • 语句：无返回值的执行逻辑（比如 if、for 循环），不能直接写在 JSX 里，需转换为表达式形式。

2. 实战 1：列表循环渲染（核心高频场景）

原生 JS 写列表需要手动创建 DOM、循环追加，代码繁琐：

<ul id="ul">
    <!-- 得写 for 循环 + createElement + appendChild -->
</ul>
<script>
    const arr = ['1','2','3'];
    // 手动循环 + 创建 DOM，代码冗余
    for (let i = 0; i < arr.length; i++) {
        const li = document.createElement('li');
        li.textContent = arr[i];
        document.getElementById('ul').appendChild(li);
    }
</script>

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

export default function App() {
    const arr = ['1', '2', '3'];
    // map是表达式，返回新数组，可直接嵌入JSX
    return (
        <ul id="ul">
            {arr.map((item, index) => (
                <!-- 循环渲染必须加 key，唯一标识每一项 -->
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
}

进阶版：渲染复杂数据列表:

export default function App() {
    const songs = [
        { id: 1, name: '稻香' },
        { id: 2, name: '夜曲' },
        { id: 3, name: '晴天' }
    ];
    return (
        <ul>
            {songs.map((item) => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
}

image.png

3. 实战 2：条件渲染（按需展示界面）

需求：根据条件展示不同内容，不能直接写 if 语句，用三元表达式（表达式）实现：

export default function App() {
    let flag = true;
    return (
        <div>
            {/* 三元表达式是表达式，可嵌入JSX */}
            <h2>{flag ? '我比他帅' : '他比我帅'}</h2>
            {/* 进阶：逻辑与运算，flag为true时才显示 */}
            <p>{flag && '只有flag为真才显示我'}</p>
        </div>
    );
}

image.png

4. 实战 3：样式处理（三种常用方式）

JSX 中写样式和原生 HTML 有区别，结合图片中样式代码，三种方式全覆盖：

（1）行内样式（对象形式）

原生 HTML 用style="color: red"，JSX 需用对象包裹，属性名用小驼峰：

export default function App() {
  const styleObj = { 
        color: 'red', 
        fontSize: '20px' // 小驼峰，对应 CSS 的 font-size
    };
    return (
        <div>
            <div style={styleObj}>帅哥</div>
            {/* 也可直接写对象 */}
            <div style={{ color: 'blue', fontWeight: 'bold' }}>帅哥</div>
        </div>
    );
}

这里提一嘴，JSX表达式必须要有一个父元素！

image.png

image.png

(2）类名样式（className）

JSX 中不能用class（保留字），需用className，配合 CSS 文件：

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

// App.jsx
import './index.css';
export default function App() {
    return <div className="home">首页</div>; // 对应图片中 className 代码
}

image.png（3）动态类名

结合表达式，按需切换样式：

export default function App() {
    const isActive = true;
    return (
        <div className={`box ${isActive ? 'active' : ''}`}>
            动态样式
        </div>
    );
}

5. 实战 4：事件绑定（交互核心）

原生 HTML 用onclick，JSX 用小驼峰onClick，且绑定的是函数（而非字符串）:

（1）基础事件绑定

export default function App() {
    // 定义事件处理函数
    const handleClick = () => {
        console.log('点击了div');
    };
    return (
        // 直接绑定函数，不加()（加()会立即执行）
        <div onClick={handleClick}>hello</div>
    );
}

image.png

（2）事件传参

需用箭头函数包裹，才能传递参数：

export default function App5() {
    const songs = [
        { id: 1, name: '稻香' },
        { id: 2, name: '夜曲' }
    ];
    // 带参数的事件函数
    const handler = (name) => {
        console.log('点击了歌曲：', name);
    };
    return (
        <ul>
            {songs.map((item) => (
                <li 
                    key={item.id} 
                    // 箭头函数传参，点击时执行handler并传入歌曲名
                    onClick={() => handler(item.name)}
                >
                    {item.name}
                </li>
            ))}
        </ul>
    );
}

image.png

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

组件化是 React 单页应用的核心，把页面拆成独立、可复用的组件，比如头部、导航、内容区，再像搭积木一样组合。

1. 定义组件（两种方式）

（1）函数组件（推荐）

// components/Head.jsx（头部组件）
export default function Head() {
    return (
        <header>
            <h1>我的React博客</h1>
            <nav>首页 | 文章 | 关于</nav>
        </header>
    );
}

// components/Main.jsx（主体组件）
export default function Main() {
    const songs = [{ id: 1, name: '稻香' }, { id: 2, name: '夜曲' }];
    return (
        <main>
          <h2>热门歌曲</h2>
          <ul>
            {
              songs.map(item => <li key={item.id}>{item.name}</li>)
            }
          </ul>
        </main>
    );
}

（2）组合组件（拼装页面）

// App.jsx（根组件）
import Head from './components/Head';
import Main from './components/Main';

export default function App6() {
    return (
        <div className="app">
            {/* 引入头部组件 */}
            <Head />
            {/* 引入主体组件 */}
            <Main />
        </div>
    );
}

image.png

2. 组件渲染到页面（入口文件）

所有组件最终要通过main.jsx挂载到 DOM 节点：

// main.jsx（项目最外层入口）
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

// 找到页面中的root节点，渲染App根组件
ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

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

开发中常需要对数组做转换，比如把数字数组放大 10 倍（比如我们在实战1 中使用的 map）：

export default function App() {
    const arr = [1, 2, 3, 4];
    // map返回新数组，可直接渲染或赋值使用
    const newArr = arr.map(item => item * 10);
    return (
        <div>
            <p>原数组：{arr.join(',')}</p>
            <p>放大10倍:{newArr.join(',')}</p>
        </div>
    );
}

放在 JS 里可能更好理解：

const arr = [1, 2, 3, 4];
const newArr = arr.map((item, i, array) => {  // [10, 20, 30, 40]
    return item * 10;
})
console.log(newArr);

image.png

六、总结：React 开发核心流程

1. 用create-react-app或Vite创建项目；

2. 在main.jsx中挂载根组件App；

3. 拆分子组件（Head、Main 等），用 JSX 编写组件逻辑；

4. 合表达式实现列表渲染、条件渲染、样式处理、事件绑定；

5. 组合组件，完成整个页面开发。

结语

React 的核心就是 “简单”：用 JSX 简化 HTML 和 JS 的交互，用组件化简化页面结构，用声明式 UI 简化 DOM 操作。把这些基础知识点吃透，再结合代码例子实战反复练习，你就能从 React 新手快速进阶！

❌