【基础】React 官网—安装

132 阅读3分钟

React 18.2.0 已经发布很久了,这几天抽空重新完整的过了一遍 React的官网,并结合当时学习React 16.8 的总结,将笔记和案例记录下来,方便以后查阅迭代

总的来说react的语法不算太多,打算按照 React 官网 文档的教程顺序,从 安装 -> 核心概念 -> 高级指引 -> hook 开始。

本文档会结合一些案例(基于react18),方便大家阅读和实践,以备 开箱即用

仓库地址:PantherVkin/react-note

在网站添加 React

  1. 直接在页面上使用React,引用下面的JS
<!-- React的核心库,与宿主环境无关 -->
<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>
<!-- 编译JSX -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  1. 注意

部署时,将 development.js 替换为 production.min.js

一分钟用上 React

  1. React.createElement

创建一个React元素,称作虚拟DOM,本质上是一个对象。

参数1元素类型,如果是字符串,一个普通的HTML元素。

参数2元素的属性,一个对象。

后续参数:元素的子节点,是React元素。

  1. 案例
 <body>
    <!-- 1. 我们给这个 <div> 加上唯一的 id HTML 属性。这将允许我们稍后用 JavaScript 代码找到它,并在其中显示一个 React 组件。 -->
    <div id="app"></div>

    <!-- 2. 加载 React。-->
    <!-- React的核心库,与宿主环境无关 -->
    <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>

    <!-- 3. 加载我们的 React 组件。-->
    <script>
      'use strict';
      //创建一个span元素
      var span = React.createElement('span', {}, '一个span元素');
      //创建一个H1元素
      var h1 = React.createElement(
        'h1',
        {
          title: '第一个React元素'
        },
        'Hello',
        'World',
        span
      );

      const domContainer = document.querySelector('#app');
      const root = ReactDOM.createRoot(domContainer);
      // 把react元素(虚拟dom) 变成真实的dom对象。
      root.render(h1);
    </script>
  </body>

image.png

  1. 完整案例

react-note/1.安装/1.1-在网站添加 React at master · PantherVkin/react-note (github.com)

可选:使用 React 和 JSX

  1. JSX

JS的扩展语法,需要使用babel进行转义。

底层使用React.createElement

  1. 快速尝试 JSX

你可以在任何 <script> 标签内使用 JSX,方法是在为其添加 type="text/babel" 属性。

  <body>
    <!-- 1. 我们给这个 <div> 加上唯一的 id HTML 属性。这将允许我们稍后用 JavaScript 代码找到它,并在其中显示一个 React 组件。 -->
    <div id="app"></div>

    <!-- 2. 加载 React。-->
    <!-- React的核心库,与宿主环境无关 -->
    <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>

    <!-- 3. babel 编译 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- 4. 加载我们的 React 组件。-->
    <script type="text/babel">
      'use strict';
      // var h1 = React.createElement("h1", {
      //     title: "第一个React元素"
      // }, "hhhh");

      const h1 = <h1 title="第一个React 元素">hhhh</h1>;
      const domContainer = document.querySelector('#app');
      const root = ReactDOM.createRoot(domContainer);
      // 把react元素(虚拟dom) 变成真实的dom对象。
      root.render(h1);
    </script>
  </body>

image.png

  1. 完整案例

react-note/1.安装/1.2-快速尝试JSX at master · PantherVkin/react-note (github.com)

创建新的 React 应用

推荐的工具链:React 团队主要推荐这些解决方案。

  • 如果你是在学习 React 或创建一个新的单页应用,请使用 Create React App

  • 如果你是在用 Node.js 构建服务端渲染的网站,试试 Next.js

  • 如果你是在构建内容主导的静态网站,试试 Gatsby

  • 如果你是在打造组件库将 React 集成到现有代码仓库,尝试更灵活的工具链

Create React App

Create React App 是一个用于学习 React 的舒适环境,也是用 React 创建新的单页应用的最佳方式。

你需要在你的机器上安装 Node >= 14.0.0 和 npm >= 5.6

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

Next.js

Next.js 是一个流行的、轻量级的框架,用于配合 React 打造静态化和服务端渲染应用

它包括开箱即用的样式和路由方案,并且假定你使用 Node.js 作为服务器环境。

从 Next.js 的官方指南了解更多。

Gatsby

Gatsby 是用 React 创建静态网站的最佳方式。

它让你能使用 React 组件,但输出预渲染的 HTML 和 CSS 以保证最快的加载速度。

从 Gatsby 的官方指南入门示例集了解更多。

CDN 链接

开发环境

可以通过 CDN 获得 React 和 ReactDOM 的 UMD 版本。

<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>

生产环境

上述版本仅用于开发环境,不适合用于生产环境。

压缩优化后可用于生产的 React 版本可通过如下方式引用:

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

如果需要加载指定版本的 react 和 react-dom,可以把 18 替换成所需加载的版本号。

为什么要使用 crossorigin 属性?

如果你通过 CDN 的方式引入 React,我们建议你设置 crossorigin 属性:

<script crossorigin src="..."></script>

我们同时建议你验证使用的 CDN 是否设置了 Access-Control-Allow-Origin: * HTTP 请求头:

Access-Control-Allow-Origin: *

这样能在 React 16 及以上的版本中有更好的错误处理体验