何为框架？

我们常见的前端框架有Vue ,React等，那这些框架有什么作用：框架在现代Web开发中扮演着核心角色，帮助开发者高效地组织和管理代码，以及创建交互式的用户体验。

简单来说，React和Vue这类框架就像是网页搭建的高效工具箱。它们让我们能够将网页拆分成小的、可复用的部件（组件），每个部件都可以独立开发和维护。需要构建页面时，就像挑选合适的零件拼装，大大节省时间和精力。而且，这些部件可以在多个页面间自由复用，保持了网站的一致性和开发效率。框架还自动处理了很多底层细节，让页面显示更快，开发更简便。

下面我们进入主题

准备工作

安装React

打开控制台终端输入：

npm i -g create-react-app

创建一个React项目

打开创建位置控制台终端输入：create-react-app （文件名）my_react

create-react-app my_react

每个文件的作用

node_modules

node_modules 文件夹是 Node.js 项目中一个非常重要的目录，它存储了项目依赖的所有外部模块（或称为“包”）。当您使用 npm（Node Package Manager）或 yarn 等包管理工具安装第三方库时，这些库就会被下载并放置在 node_modules 文件夹内。

public

public 目录存放的是公共资源，这些资源在构建过程中会被直接复制到构建输出目录中，不经过任何转换。它包含的通常是：

1. index.html: 这是React应用的基本HTML模板，所有的React组件都会被插入到这个HTML文件中的指定div元素中。
2. static: 静态资源。存放图片、字体文件或其他静态资源，这些资源可以通过绝对路径访问，例如 /logo.png。
3. manifest.json、favicon.ico 等：这些文件对于Web应用的配置和图标显示非常重要，但不属于React的直接源代码部分。

src

src（源代码）目录是React应用的主要部分，包含了构成应用的所有源代码文件。这个目录下的文件在构建过程中会被编译、打包和优化。以下是src目录中常见的一些“大文件”及其作用：

1. index.js 或 App.js: 通常作为React应用的入口文件，负责启动整个应用。 index.js 入口文件,这里会导入React库，创建根组件，并使用ReactDOM.render()将其渲染到DOM中。
2. components: 这个文件夹包含所有自定义的React组件。按照功能或页面划分子组件，每个组件可能是一个或多个小文件，以便于复用和维护。
3. styles: 放置CSS文件或CSS-in-JS模块，用于应用的样式管理。随着项目的增长，样式文件也可能被细分为模块化的小文件。

其他

1. reportWebVitals 和 setupTests 是与 Create React App (CRA) 项目相关的两个不同方面，分别服务于性能监控和测试配置，这个对于入门暂时还用不到。
2. .gitignore 文件是用来告诉Git哪些文件或目录不应该被版本控制系统跟踪（即不纳入Git的提交历史中）。这对于保持仓库整洁、避免泄露敏感信息（如密码或密钥）、以及排除构建过程中生成的中间文件非常有用。
3. package.json 是Node.js项目的配置文件，包含了项目元数据（如名称、版本、作者）、依赖关系（dependencies和devDependencies）、脚本命令（scripts）、以及其他配置信息。
4. package-lock.json 是从npm 5开始引入的，它记录了安装时确切的依赖版本和子依赖的树状结构。这意味着每次npm install后，package-lock.json都会更新以反映当前安装的确切软件包版本。

运行

创建项目于之后我们启动一下项目，打开文件终端:

npm run start

运行正确的话，到了这一步项目便初始化成功了。

使用

1.我们去哪里编写我们的代码呢？

打开App.js文件，将你的逻辑代码直接在App.js中书写即可。需要注意的是：return中的标签并不是我们普通的JS语言而是JSX。只需要知道JSX是React库中用于编写用户界面的一种语法扩展，它是JavaScript和XML样式的结合体。

2.为什么是在App.js中书写而不是index中呢？

因为我们是基于root根节点来进行全局配置的挂载。下面的图可以看到我们在index.html中有一个id为root的标签，然后在index.js文件中进行了获取，然后使用root.render()将App进行挂载在root下面。

3.既然可以挂载，为什么还只在App.js写？

因为直接在root.render调用中挂载一个简单的React元素（如<div>Hello World</div>）是可以的，同时ReactDOM.render()方法在一个给定的DOM容器中只能挂载一个React组件实例。如果你尝试在同一DOM节点上再次调用render()方法，后调用的组件将会替换之前挂载的组件。这是因为React设计为单根渲染模型，即应用有一个单一的根组件，它负责管理并渲染所有子组件。

4.组件的复用怎么实现？

创建一个新文件

组件复用我们首先需要创建一个组件，但是在React中创建组件并不是直接创建就完成了，而是需要将组件Git提交才能让React框架与它联系。

• 1. 添加文件到索引：首先，你需要使用git add命令将新文件添加到Git的索引中。这一步骤实际上是告诉Git你想要开始跟踪这个文件的改动。可以使用下面的命令： git add component.js 或者，如果你想添加当前目录下的所有新文件（包括子目录中的），可以使用： git add .
• 1. 提交更改：添加文件到索引后，你需要通过git commit命令提交这次更改，这样Git才会永久保存这次添加文件的操作，并记录一条提交信息描述这次改动的目的。例如： git commit -m "Add new component: component.js"

创建成功后当光标悬停在文件上时不会再在尾部出现：未跟踪的

将写好的模块组件进行导入

这里我们创建一个简单的组件。--》 tools.js文件中，在js文件中注意我们将逻辑写入return ( )中,而里面使用的是JSX语法。并且在JS文件的最底下需要用将函数export default导出

import './tools.css'
function Tools(){
  return (
    <div className="component">
      <h1 className='title1'>组件1</h1>
    </div>
  )
}
export default Tools

tools.css文件中

.component {
  position: absolute;
  left: 20px;
}
.title1{
  font-size: 42px;
  color: rgb(15, 132, 234);
}

完成之后我们转回App.js文件中将我们在tools.js中写好的函数Tools()进行导入import Tools from './tools' 之后我们便可以在内部使用<Tools></Tools>标签，与vue是十分相似的

打开页面看一下。

我们实现便了第一个组件效果。本节到这里就结束了，欢迎关注阅读下节，谢谢阅读。