资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

Hello React

创作时间:

作者:

@小白创作中心

Hello React

引用

CSDN

https://m.blog.csdn.net/thetimeofrose/article/details/145737755

React 是一个广泛使用的前端 JavaScript 工具库，用于构建用户界面。本文将从 React 的基本概念、JSX 语法、项目搭建到组件开发，为初学者提供一个全面的入门指南。

1. 什么是 React

React 的定义：React 是一个自由及开放源代码的前端 JavaScript 工具库，用于基于 UI 组件构建用户界面。它由 Meta 和个人开发者及公司组成的社群共同维护。

官网：React

2. React 的特点

组件化
声明式编程
虚拟 DOM
高效的状态管理

3. 应用场景

单页面应用（SPA）：React 非常适合构建复杂的单页面应用，提供流畅的用户体验
移动应用：通过 React Native，可以使用 React 开发 iOS 和 Android 应用
跨平台开发：通过 Taro 框架，实现各平台跨端开发
服务器渲染应用：结合 Next.js 等框架，可以实现服务器渲染（SSR），提高首屏加载速度
大型企业级应用：React 的组件化和声明式编程使得大型应用的开发和维护更加高效

4. React 的 JSX 语法

4.1. 认识 JSX 语法

4.1.1. 代码体验

首先在你的 IDE 中创建一个名为 demo.html 的文件，输入下面这段代码，并运行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello React</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- CDN引入，依赖三个包：react、react-dom、babel -->
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      // 编写 React代码(jsx语法)
      // jsx语法转换为普通的JavaScript代码，要依靠 babel
      const element = <h2>Hello World</h2>;
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(element);
    </script>
  </body>
</html>

运行结果如下

可以看到，element 的右侧并不是一个字符串，而是一个由标签包裹的 HTML 元素。在最后一个 script 标签内，写着type="text/babel"，这是指 Babel 编译器的类型，如果把 type="text/babel" 去掉就会报错。由 <script type="text/babel"></script> 包裹起来的代码就是 React代码( jsx 语法)。 Babel 是一个 JavaScript 编译工具，用来将 JSX（JavaScript XML）语法或者其他现代 JavaScript 特性转译成浏览器支持的 JavaScript 代码。

4.1.2. JSX 是什么

JSX 是一种 JavaScript 的语法扩展，也是很多地方称之为 JavaScript XML ，因为看起来就是一段 XML 语法。它用于描述我们的 UI 界面，并且可以和 JavaScript 融合在一起使用。它不同于 Vue 中的模块语法，不需要专门学习模块语法中的一些指令（如：v-for、v-if、v-else、v-bind）。

4.1.3. JSX书写规范

JSX 的顶层只能有⼀个根元素，所以我们很多时候会在外层包裹⼀个 div 元素
为了⽅便阅读，通常在 JSX 的外层包裹⼀个⼩括号()，这样可以⽅便阅读，并且 JSX 可以进⾏换⾏书写
JSX 中的标签可以是单标签，也可以是双标签；注意：如果是单标签，必须以 />结尾

4.2. JSX 的基本使用

4.2.1. 引入相关库

在上述代码中，引入了三个 JS 库，分别是 React、ReactDOM 和 Babel 相关的库，

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

react.development.js
是 React 的开发版本，包含调试信息和错误检查。
crossorigin
属性是为了允许跨源请求，确保 React 脚本能够从不同的来源加载。
react-dom.development.js
加载了 ReactDOM 库，ReactDOM 是一个用于在浏览器中渲染 React 组件的库。它提供了与 DOM（文档对象模型）交互的方法（比如 ReactDOM.render）。同样，react-dom.development.js 是开发版本，包含调试信息。
babel.min.js
加载了 Babel Standalone，它是一个可以在浏览器端直接运行的 Babel 转译器。这使得你可以在客户端使用现代 JavaScript 特性（如 JSX、ES6+），而无需构建工具来进行代码转换。babel.min.js 是压缩版的 Babel 库，standalone 表示这个版本不依赖于任何其他构建工具，可以直接在浏览器中使用。

为了减少⽹络耗时，可以把引⼊的三个 JS ⽂件下载到本地。

4.2.2. JSX中的注释

{/* JSX的注释写法 */}
<h2>Hello JSX</h2>

4.2.3. JSX 中的标签

JSX 标签可以是HTML 标签（如

等）或自定义组件。

4.2.4. JSX 嵌入变量作为子元素

在 JSX 中可以嵌入 JavaScript 的变量，使⽤花括号包裹。例如：

const message = "Hello JSX";
const element = (
  <div>
    {/* 嵌入变量 */}
    <h2>{message}</h2>
  </div>
);

4.2.5. JSX 嵌入表达式

在 JSX 中可以嵌入 JavaScript 的表达式，使⽤花括号包裹。例如：

const n = 10;
const element = (
  <div>
    {/* 嵌入表达式 */}
    <h2>计算：{5 * n}</h2>
  </div>
);

4.2.6. JSX 绑定属性

属性使⽤花括号包裹，⽀持 JavaScript 表达式。例如：

const href = "https://www.baidu.com";
const title = "标题";
const imgUrl = "https://exampleImgUrl.com";
const element = (
  <div>
    <a href={href}>百度一下</a>
    <h1 title={title}>我是h1元素</h1>
    <img src={imgUrl} alt="图片" style={{ width: "40px" }} />
  </div>
);

运行之后 title 需要在浏览器中按 f12 ，用开发者模式选中该元素，即可查看到：

4.2.7. JSX 的条件渲染

使⽤逻辑运算符或三元运算符进⾏条件渲染。

逻辑判断：

const isReady = true;
let element = null;
if (isReady) {
  element = <h2>准备开始比赛</h2>;
} else {
  element = <h1>请提前做好准备</h1>;
}

三元运算符：

const isReady = true;
let element = null;
element = (
  <div>
    {isReady ? <button>开始战斗！</button> : <h3>赶紧准备</h3>}
  </div>
);

4.2.8. JSX 列表渲染

使⽤ map ⽅法遍历数组，⽣成多个 JSX 元素。

const students = [
  { id: 111, name: "张三", score: 99 },
  { id: 111, name: "张三1", score: 95 },
  { id: 111, name: "张三2", score: 89 },
];
const element = (
  <div>
    <h2>学生列表数据</h2>
    <div className="item">
      {students
        .filter((item) => item.score > 90)
        .map((item) => {
          return (
            <div className="item" key={item.id}>
              <h2>学号:{item.id}</h2>
              <h2>学号:{item.name}</h2>
              <h2>学号:{item.score}</h2>
            </div>
          );
        })}
    </div>
  </div>
);

5. 使用脚手架

5.1. Create React App 官方脚手架

Create React App 是官⽅提供的脚⼿架⼯具，可以快速创建 React 项⽬，⽆需⼿动配置 webpack 等工具。但 Create React App 已经被官方逐渐放弃，推荐使用 vite 脚手架。

5.1.1. 创建项目

使用 Create React App 创建项目，在 cmd 中输入命令，创建会比较缓慢

npx create-react-app 02_react_scaffold

项目创建成功之后，会看到提示，这里有两个命令
先看第一个命令，根据提示进入目录，并用 VS Code 快速打开项目
再看第二个命令，在 VS Code 中打开终端，输入npm i安装依赖，然后输入npm start命令，即可运行项目，运行会比较缓慢。运行成功会自动打开一个网页：http://localhost:3000/

5.1.2. 报错解决

在使用 Create React App 创建项目时有可能会遇到 ajv 找不到的报错，可以输入命令：

npm i ajv

安装 ajv 之后再次执行 npm start 启动项目。

5.2. vite 脚手架

使用下面的命令，快速创建 vite + react 项目，与 Create React App 脚手架相比， vite 很快就创建好了项目

npm create vite@latest 02_react_scaffold -- --template react

同样进入目录之后，用 code . 使用 VS Code 打开项目，在项目中输入npm i安装依赖，然后输入npm run dev运行项目。

运行成功会有如下提示
按住 ctrl 点击蓝色链接，即可打开网页：http://localhost:5173/

6. 一个简单的组件编写

学会创建项目之后，尝试写一个简单的组件。

新建 src/components/HelloWorld.jsx

import React from "react";
class HelloWorld extends React.Component {
  render() {
    return (
      <div style={{ textAlign: "center" }}>
        <h2>Hello World</h2>
      </div>
    );
  }
}
export default HelloWorld;

App.jsx 引入

import HelloWorld from "./components/HelloWorld";
function App() {
  return (
    <div>
      <HelloWorld />
    </div>
  );
}
export default App;

为了防止默认样式的干扰，在 main.jsx 中注释引入的样式

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
// import './index.css'
import App from "./App.jsx";
createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

效果如下