我们常见的前端框架有 ,等，那这些框架有什么作用：框架在现代Web开发中扮演着核心角色，帮助开发者高效地组织和管理代码，以及创建交互式的用户体验。
简单来说，React和Vue这类框架就像是网页搭建的高效工具箱。它们让我们能够将网页拆分成小的、可复用的部件（组件），每个部件都可以独立开发和维护。需要构建页面时，就像挑选合适的零件拼装，大大节省时间和精力。而且，这些部件可以在多个页面间自由复用，保持了网站的一致性和开发效率。框架还自动处理了很多底层细节，让页面显示更快，开发更简便。
下面我们进入主题
打开控制台终端输入：
打开创建位置控制台终端输入：create-react-app （文件名）my_react
文件夹是 Node.js 项目中一个非常重要的目录，它存储了项目依赖的所有外部模块（或称为“包”）。当您使用 npm（Node Package Manager）或 yarn 等包管理工具安装第三方库时，这些库就会被下载并放置在 文件夹内。
目录存放的是公共资源，这些资源在构建过程中会被直接复制到构建输出目录中，不经过任何转换。它包含的通常是：
- index.html: 这是React应用的基本HTML模板，所有的React组件都会被插入到这个HTML文件中的指定div元素中。
- static: 静态资源。存放图片、字体文件或其他静态资源，这些资源可以通过绝对路径访问，例如 。
- manifest.json、favicon.ico 等：这些文件对于Web应用的配置和图标显示非常重要，但不属于React的直接源代码部分。
（源代码）目录是React应用的主要部分，包含了构成应用的所有源代码文件。这个目录下的文件在构建过程中会被编译、打包和优化。以下是目录中常见的一些“大文件”及其作用：
- index.js 或 App.js: 通常作为React应用的入口文件，负责启动整个应用。 index.js 入口文件,这里会导入React库，创建根组件，并使用ReactDOM.render()将其渲染到DOM中。
- components: 这个文件夹包含所有自定义的React组件。按照功能或页面划分子组件，每个组件可能是一个或多个小文件，以便于复用和维护。
- styles: 放置CSS文件或CSS-in-JS模块，用于应用的样式管理。随着项目的增长，样式文件也可能被细分为模块化的小文件。
- 和 是与 Create React App (CRA) 项目相关的两个不同方面，分别服务于性能监控和测试配置，这个对于入门暂时还用不到。
- 文件是用来告诉Git哪些文件或目录不应该被版本控制系统跟踪（即不纳入Git的提交历史中）。这对于保持仓库整洁、避免泄露敏感信息（如密码或密钥）、以及排除构建过程中生成的中间文件非常有用。
- 是Node.js项目的配置文件，包含了项目元数据（如名称、版本、作者）、依赖关系（dependencies和devDependencies）、脚本命令（scripts）、以及其他配置信息。
- 是从npm 5开始引入的，它记录了安装时确切的依赖版本和子依赖的树状结构。这意味着每次后，都会更新以反映当前安装的确切软件包版本。
创建项目于之后我们启动一下项目，打开文件终端:
运行正确的话，到了这一步项目便初始化成功了。
打开App.js文件，将你的逻辑代码直接在App.js中书写即可。需要注意的是：return中的标签并不是我们普通的JS语言而是JSX。只需要知道JSX是React库中用于编写用户界面的一种语法扩展，它是JavaScript和XML样式的结合体。
因为我们是基于root根节点来进行全局配置的挂载。下面的图可以看到我们在index.html中有一个id为root的标签，然后在index.js文件中进行了获取，然后使用将进行挂载在root下面。
因为直接在调用中挂载一个简单的React元素（如）是可以的，同时方法在一个给定的DOM容器中只能挂载一个React组件实例。如果你尝试在同一DOM节点上再次调用方法，后调用的组件将会替换之前挂载的组件。这是因为React设计为单根渲染模型，即应用有一个单一的根组件，它负责管理并渲染所有子组件。
组件复用我们首先需要创建一个组件，但是在React中创建组件并不是直接创建就完成了，而是需要将组件Git提交才能让React框架与它联系。
-
- 添加文件到索引：首先，你需要使用git add命令将新文件添加到Git的索引中。这一步骤实际上是告诉Git你想要开始跟踪这个文件的改动。可以使用下面的命令： 或者，如果你想添加当前目录下的所有新文件（包括子目录中的），可以使用：
-
- 提交更改：添加文件到索引后，你需要通过git commit命令提交这次更改，这样Git才会永久保存这次添加文件的操作，并记录一条提交信息描述这次改动的目的。例如：
创建成功后当光标悬停在文件上时不会再在尾部出现：未跟踪的
这里我们创建一个简单的组件。--》 tools.js文件中，在js文件中注意我们将逻辑写入return ( )中,而里面使用的是JSX语法。并且在JS文件的最底下需要用将函数导出
tools.css文件中
完成之后我们转回App.js文件中将我们在tools.js中写好的函数Tools()进行导入 之后我们便可以在内部使用标签，与vue是十分相似的 
打开页面看一下。 
我们实现便了第一个组件效果。本节到这里就结束了，欢迎关注阅读下节，谢谢阅读。
到此这篇reactJS组件（react组件框架）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdreactjs/76156.html