子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

React 快速上手 ​

1. 通过 npm 使用 React ​

React 的安装和学习可以通过多种方式进行，包括直接下载使用、通过 npm 安装、以及使用 create-react-app 脚手架工具。以下是详细的安装教程和代码案例。

1.1. 直接下载使用 ​

你可以直接从 React 官网下载最新版本的 React 包，这个方法适用于快速体验或学习 React 的基本用法[3]。例如，你可以访问 https://reactjs.org/ 下载适合你的版本。

1.2. 通过 npm 安装 ​

另一种常见的安装方式是通过 npm（Node.js 的包管理器）来安装 React。这需要你首先安装 Node.js 和 npm。安装完成后，使用以下命令来安装 React：

sh
npx create-react-app my-app

如果你已经创建了 my-app 文件夹，可以在 my-app 文件夹下使用以下命令：

sh
npx create-react-app ./

启动服务:

sh
cd my-app
npm start

访问 http://localhost:3000 即可看到 React 的示例页面。项目文件夹中包含了所有必要的配置和文件，包括 Webpack 和 Babel 等工具的配置文件。

sh
# 以下是这些文件和文件夹的简要说明：
 1. package.json: 元数据和依赖关系。它列出了项目所需的所有库、版本和其他配置信息。
 2. package-lock.json: 锁定项目的依赖版本，以确保在不同环境中安装相同的依赖版本。
 3. node_modules: 项目所有依赖库。运行 `npm install` 安装的库会被下载到这个文件夹。
 4. public: 静态资源，如 HTML 模板等。在构建过程中，这些资源会被复制到输出目录中。
 5. src: 项目的源代码。这是你编写 React 组件的地方。// [!code highlight]
 6. src/index.js: 入口文件。它导入了根组件（通常是 App 组件），并将其渲染到页面上。
 7. src/App.js: 这是根组件。在这个文件中，你可以编写你的 React 代码。
 8. src/index.css: 这是全局样式表。你可以在这个文件中添加 CSS 样式。
 9. src/logo.svg: 这是项目的默认图标。你可以将其替换为你自己的图标。
 10. README.md: 项目的说明文档。你可以在这里介绍项目的目的、功能和使用方法。
 11. .gitignore: 这个文件告诉 Git 忽略哪些文件和文件夹。
 12. .env: 用于存储环境变量。你可以在其中设置 API 密钥、数据库连接字符串等敏感信息。
 13. .env.example: 这个文件提供了一个示例环境变量文件，你可以根据需要修改它。
 14. reportWebVitals.js: 集成 Web Vitals 指标，监控和分析。

提示

create-react-app 是一个官方提供的脚手架工具，可以快速搭建一个包含所有必需配置的 React 项目。使用 create-react-app 的优点是它会自动配置 Webpack 等工具，让你无需手动配置即可开始开发。 这将创建一个新的名为 my-app 的 React 项目。

2. 通过 CDN 使用 React ​

常用的 CDN 地址有很多，它们为用户提供了快速访问和加载开源库文件的服务。

2.1. CDN 开源库文件服务 ​

以下是一些广泛使用的 CDN 服务：

1. BootCDN ​

BootCDN 提供多种常用 JavaScript 库和 CSS 框架的 CDN 服务，例如 jQuery、Vue.js、React 等。它是由 Bootstrap 中文网支持并维护的，特别适合国内用户使用。

官网地址: https://www.bootcdn.cn/

2. unpkg.com ​

unpkg.com 一个流行的 CDN 服务，可以直接通过官网搜索并使用 npm 包。这个服务有时可能不稳定，或者在某些地区无法访问。

官网地址: https://unpkg.com/

3. jsdelivr.com ​

jsdelivr 提供 npm 包加速的 CDN 服务，使用方法类似 unpkg.com。同样地，它也可能会遇到稳定性和访问性的问题。

官网地址: https://jsdelivr.com/

2.2. 代码案例 ​

全部代码如下

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test-react-cdn</title>
    <script src="https://cdn.staticfile.org/react/18.0.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.0.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script type="text/babel">
      const app = ReactDOM.createRoot(document.getElementById("app"));
      app.render(<h1>Hello, world!</h1>);
    </script>
  </body>
</html>

解释如下

  1. <script src="https://cdn.staticfile.org/react/18.0.0/umd/react.development.js"></script> 把 React 挂载到 Window 对象

  2. <script src="https://cdn.staticfile.org/react-dom/18.0.0/umd/react-dom.development.js"></script> 把 ReactDOM 挂载到 Window 对象

  3. <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> 解析 React 编写的内容, script标签需要添加 type="text/babel" 属性, babel 才能识别并编译

2.3. 案例演示 ​




test-react-cdn.html 资源加载中...