你知道怎么在 HTML 页面中使用 React吗

2023-12-14css教程

569

当我们想要在一个 HTML 页面中使用 React 时，我们有如下步骤：

步骤一：引入 React 库

首先我们需要在 HTML 页面中引用 React 库。我们可以使用 CDN 或者通过 npm/yarn 安装。

如果使用 CDN，可在 HTML 页面的 <head> 中添加如下代码：

<!-- React -->
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
<!-- React DOM -->
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

如果使用 npm/yarn 安装，我们需要在 HTML 页面中引入打包生成的 JS 文件。

步骤二：创建一个容器元素

我们需要创建一个 HTML 元素，用来容纳 React 组件。通常我们使用一个 <div> 元素，例如：

<div id="root"></div>

这个元素可以放在 HTML 页面的任意位置。

步骤三：编写 React 组件

接下来我们就可以编写 React 组件了。下面是一个示例代码：

// 引入 React 和 React DOM
import React from 'react';
import ReactDOM from 'react-dom';

// 定义一个组件
function App() {
  return (
    <h1>Hello, world!</h1>
  );
}

// 渲染组件
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

我们先定义了一个名为 App 的函数组件，这个组件返回一个 <h1> 标题元素。然后我们使用 ReactDOM.render 将这个组件渲染到我们在步骤二中创建的元素中。

示例一：使用 JSX

上面的代码中我们使用了 JSX 语法。JSX 是一种 JavaScript 语法扩展，它允许我们在 JavaScript 中编写类似 HTML 的代码。

要使用 JSX，我们需要安装并配置 Babel，它可以将 JSX 编译成普通的 JavaScript。

首先我们需要安装 Babel 相关的依赖：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

然后在项目的根目录下创建一个 .babelrc 文件，配置 Babel 的预设：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

接下来我们需要在项目中创建一个 webpack.config.js 文件，并配置 Babel：

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  }
};

这个配置文件告诉 webpack 使用 Babel 编译所有的 .js 文件，除了 node_modules 目录下的文件。

最后我们可以使用以下代码来渲染组件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

其中 App 是我们在 App.js 中定义的组件。

示例二：使用纯 JavaScript

如果你不想使用 JSX，也可以使用纯 JavaScript 来创建 React 组件。下面是一个示例代码：

// 创建标题元素
const heading = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

// 渲染组件
ReactDOM.render(
  heading,
  document.getElementById('root')
);

这个代码中我们使用 React.createElement 创建了一个 <h1> 标题元素，它的 class 属性为 greeting，内容为 Hello, world!。然后我们使用 ReactDOM.render 将这个元素渲染到我们在步骤二中创建的元素中。

以上就是在 HTML 页面中使用 React 的完整攻略和两个示例。

The End

相关推荐

背景图片自适应浏览器分辨率大小并自动拉伸全屏代码

简单但很实用的5个css属性

我的css框架——base.css(重设浏览器默认样式)

兼做美工之导航条制作过程分享

JS 控制CSS样式表

Html5实现首页动态视频背景的示例代码

热门文章

热门精品源码

最新VIP资源