当我们想要在一个 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 的完整攻略和两个示例。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:你知道怎么在 HTML 页面中使用 React吗 - Python技术站