React 组件示例

无向弦

已于 2022-06-24 15:44:11 修改

阅读量527

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2022-01-06 23:13:54 首次发布

本文链接：https://blog.youkuaiyun.com/lihuiocean/article/details/122355137

版权

本文主要介绍React组件的概念和重要性。通过创建React应用并解析目录结构，强调了`src`目录在React开发中的核心地位。文章探讨了组件作为React应用程序的基本构建块，并提供了《深入React技术栈》中组件元素构建的示例，展示如何将HTML转换为组件元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一节，我们使用 create-react-app 生成示例程序的代码，这一节我们详细介绍下如何进行修改代码

看了一些 React 的书籍，其实 React 使用 JSX 语法，将程序的模块化和抽象做的很好。

我们新建立的程序的目录如下

moz-todo-react
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

关于目录结构的表述我这里直接引用 Mozilla 的描述

目录 src 是我们花费时间最多的地方，因为它是我们 React 应用源码存放的目录。

目录 public 包含了开发应用时浏览器会读取的文件，其中最重要的就是 index.html。React 将目录 src 中的代码嵌入这个文件，从而浏览器才能运行此文件。 index.html 中的有些内容关乎 create-react-app 的运作，因此除非你知道自己在做什么样的修改，否则不建议编辑这个文件。当然，你可以修改 index.html 中的元素的内容来表现此应用程序通俗易懂的名称。

package.json 与 react 工程并无直接关联，这个是 node modules 的管理的文件。其他的 node 版本管理的软件都会有这个文件。

React 中最小的就是组件，那何为组件呢

最低0.47元/天解锁文章