如何创建⼀个React组件并渲染到DOM中？

露露在前端

已于 2024-10-10 12:22:31 修改

阅读量215

点赞数 5

分类专栏：前端面试场景题【React篇】文章标签： react.js 前端深度学习前端框架面试

于 2024-10-10 12:18:52 首次发布

本文链接：https://blog.csdn.net/2401_86337335/article/details/142818215

版权

前端面试场景题【React篇】专栏收录该内容

10 篇文章 0 订阅

订阅专栏

要创建⼀个React组件并将其渲染到DOM中，你需要遵循以下步骤：

1. 安装React和ReactDOM

⾸先，你需要确保已经安装了React和ReactDOM。你可以使⽤npm（Node.js的包管理器）来安

装它们：

1 npm install react react-dom

2. 创建⼀个React组件

React组件可以是函数组件或类组件。以下是使⽤函数组件和类组件创建React组件的⽰例：

函数组件：

1 import React from 'react';
2
3 function MyComponent() {
4 return <h1>Hello, React!</h1>;
5 }
6
7 export default MyComponent;

类组件：

1 import React from 'react';
2
3 class MyComponent extends React.Component {
4 render() {
5 return <h1>Hello, React!</h1>;
6 }
7 }
8
9 export default MyComponent;

3. 渲染组件到DOM

使⽤ ReactDOM.render() ⽅法将React组件渲染到DOM中的指定元素。以下是⼀个⽰例，展⽰如

何将上述函数组件渲染到ID为 root 的HTML元素中：

1 import React from 'react';
2 import ReactDOM from 'react-dom';
3 import MyComponent from './MyComponent'; // 假设你的组件⽂件名为MyComponent.js
4 
5 ReactDOM.render(<MyComponent />, document.getElementById('root'));

在这个⽰例中，你需要确保你的HTML⽂件中有⼀个ID为 root 的元素，例如：

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>React App</title>
7 </head>
8 <body>
9    <div id="root"></div>
10   <!-- 引⼊你的React和ReactDOM脚本，这⾥通常是编译后的构建⽂件 -->
11  <script src="path/to/your/compiled/bundle.js"></script>
12  </body>
13  </html>

注意：在实际项⽬中，你通常会使⽤构建⼯具（如Webpack）和打包器（如Babel）来编译和打包你的React代码，以便在浏览器中运⾏。上述⽰例中的 <script> 标签只是⼀个占位符，表⽰你应该引⼊编译后的构建⽂件。