什么是React

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/01/26/%E4%BB%80%E4%B9%88%E6%98%AFReact/

摘要

本文主要讲述了：

什么是 React
安装
什么是 React 元素

正文

什么是 React

React，也被称为 React.js 或者 ReactJS，是一个用于构建 UI 的 JavaScript 库。它由 Facebook 和个人开发者以及企业组成的社区维护

安装

示例：临时安装最新版本的create-react-app并以此创建名为my-react的项目

1
2
3

#!/usr/bin/env bash

npx create-react-app my-react

什么是 React 元素

与 HTML 元素类似

一个 React 元素可以是一个单一的元素，也可以由多个元素嵌套构成

React 元素可以通过一种名为 JSX 的语法来构建，但也可以使用React.createElement()来构建

示例：使用 JSX 构建 React 元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      // React DOM 根节点
      const root = ReactDOM.createRoot(document.getElementById('root'));

      // 使用JSX语法构建一个React元素
      const element = (
        <div>
          <h1>Hello, world!</h1>
          <p>hello, jsweibo</p>
        </div>
      );

      // 在根节点中渲染这个 React 元素
      root.render(element);
    </script>
  </body>
</html>

示例：使用React.createElement()来构建 React 元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/core-js-bundle/index.js"></script>
    <script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      // React DOM 根节点
      const root = ReactDOM.createRoot(document.getElementById('root'));

      // 构建一个React元素
      const element = React.createElement(
        'div',
        null,
        React.createElement('h1', null, 'hello, world'),
        React.createElement('p', null, 'hello, jsweibo')
      );

      // 在根节点中渲染这个 React 元素
      root.render(element);
    </script>
  </body>
</html>

注释：

react.development.js用于提供 React 的核心功能，文件体积较大，仅供开发环境使用。生产环境请使用react.production.min.js
react-dom.development.js用于扩展 DOM 操作的功能（例如：ReactDOM），文件体积较大，仅供开发环境使用。生产环境请使用react-dom.production.min.js
babel.min.js用于转换 JSX 语法
由于使用了跨源脚本文件，建议添加crossorigin属性用于捕获跨源脚本的错误