Web开发基础学习——HTML中\＜div＞元素的理解

Web开发基础学习系列文章目录

第一章 基础知识学习之HTML中<div>元素的理解

---

文章目录

• Web开发基础学习系列文章目录
• 前言
• [一、在 React 中的使用](#一、在 React 中的使用)
• [二、React组件中，index.js的挂载点为什么没有 \](#二、React组件中，index.js的挂载点为什么没有 )？
• 总结

---

前言

<div> 元素

• 定义：<div> 是一个块级元素，用于将内容分组或容器化。它没有特定的语义含义，通常用于布局和样式目的。
• 全称：<div> 是 "division" 的缩写，表示一个分区或部分。
• 用途：<div> 元素通常用于创建页面布局、包裹其他元素、应用 CSS 样式或 JavaScript 行为。

---

一、在 React 中的使用

在 React 应用中，
元素通常用于包裹组件或元素。例如，在你的 index.html 文件中，有一个 div 元素作为 React 应用的挂载点：

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

在 index.js 文件中，React 会将组件渲染到这个 div 元素中：

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

二、React组件中，index.js的挂载点为什么没有 <script src="index.js">？

在现代的 React 项目中，通常使用构建工具（如 Create React App、Webpack、Vite 等）来处理 JavaScript 文件的打包和注入。这些工具会自动处理 JavaScript 文件的引用，因此你不需要手动在 HTML 文件中添加<script src="index.js"></script>。

---

总结

• <div> 元素 是一个块级元素，用于将内容分组或容器化。它没有特定的语义含义，通常用于布局和样式目的。
• 用途：
  元素通常用于创建页面布局、包裹其他元素、应用 CSS 样式或 JavaScript 行为。
• 在 React 中的使用：
  元素常用于包裹组件或元素，并作为 React 应用的挂载点。