react基础知识创建hell

作者：System 时间：2024年08月19日分类：所有,react native 字数：979

这篇文章距离上次修改已过187天，其中的内容可能已经有所变动。

在React中创建一个简单的“Hello”组件可以通过以下步骤完成：

引入React库和ReactDOM库（用于渲染组件到DOM）。
创建一个函数组件或类组件。
使用ReactDOM.render方法将组件渲染到DOM中的某个元素内。

以下是一个简单的React组件示例，它显示“Hello”文本：




// 引入React和ReactDOM
import React from 'react';
import ReactDOM from 'react-dom';
 
// 创建一个函数组件
function Hello() {
  return <h1>Hello</h1>;
}
 
// 将组件渲染到DOM中的某个元素
ReactDOM.render(<Hello />, document.getElementById('root'));

确保你的HTML文件中有一个具有id="root"的元素，这是React将要挂载的地方：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Hello Example</title>
</head>
<body>
    <div id="root"></div>
    <!-- 引入React和React组件的脚本 -->
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="script.js" defer></script>
</body>
</html>

请确保你已经安装了React和ReactDOM，如果没有，可以使用npm安装：




npm install react react-dom

这样就创建并渲染了一个简单的React组件。

react基础知识创建hell

评论已关闭

推荐阅读