React 基础知识点

一、什么是 React （★★★）

React 是一个用于构建用户界面的 JavaScript 库，最初由 Facebook 内部开发，并于 2013 年开源。

React 的核心特点

• 声明式开发：你只需描述 UI 应该“长什么样”，React 会负责将其渲染出来。
• 基于组件：组件是 React 的核心概念，支持组合和复用。
• 一次学习，处处使用：React 不仅能构建 Web 应用，还能开发移动端（React Native）、VR 应用（React VR）等。

二、React 基本使用

1. 安装 React

npm install react react-dom

2. 直接引入方式

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

3. 创建并渲染元素

const title = React.createElement('li', null, 'Hello React');
ReactDOM.render(title, document.getElementById('root'));

三、React 脚手架（★★★）

1. 脚手架意义

• 快速构建项目开发环境
• 内置 Webpack、Babel、ESLint 等
• “零配置”，专注业务逻辑

2. 初始化项目

npx create-react-app my-app
cd my-app
npm start

3. yarn 简介

yarn init
yarn add 包名
yarn

四、JSX 的使用

1. 什么是 JSX？

JSX 是 JavaScript XML，允许在 JS 中编写 HTML。

2. 使用示例

const h1 = <h1>我是通过 JSX 创建的元素</h1>;
ReactDOM.render(h1, document.getElementById('root'));

3. 本质和注意事项

• 需通过 Babel 编译（@babel/preset-react）
• 属性名驼峰命名，如 className、htmlFor
• 自闭合标签需加 /
• 多行 JSX 建议用小括号包裹

五、JSX 进阶语法（★★★）

1. 表达式插入

const content = 'React 很好用';
const element = <h1>{content}</h1>;

2. 条件渲染

const isLoading = true;
const element = isLoading ? <div>Loading...</div> : <div>加载完成</div>;

3. 列表渲染

const books = [
  { id: 1, name: '三国演义' },
  { id: 2, name: '水浒传' },
  { id: 3, name: '西游记' },
  { id: 4, name: '红楼梦' },
];
const ul = (
  <ul>
    {books.map(book => (
      <li key={book.id}>{book.name}</li>
    ))}
  </ul>
);

4. 样式处理

行内样式：

<li style={{ color: 'red', backgroundColor: 'pink' }}>内容</li>

类名样式：

import './index.css';
<li className="container">内容</li>

六、小结

• React 是声明式组件库，核心是组件与 JSX
• JSX 让结构更清晰，支持表达式、条件、列表等高级用法
• 推荐使用脚手架构建项目，类名管理样式更清晰

学习资源：

• 官方文档：https://react.dev
• 示例平台：React 示例