前端第一学习框架--react基础

React前端框架简介

React是目前最流行的前端JavaScript库之一，用于构建用户界面。它鼓励开发者采用组件化的开发方式，将UI拆分成一个个独立的、可复用的组件。

安装React项目脚手架

React项目脚手架create-react-app是一个官方提供的工具，用于快速搭建React开发环境。以下是安装和使用步骤：

1. 全局安装create-react-app

   使用npm（Node.js的包管理器）全局安装create-react-app，以便在任何地方创建React应用。

   	npm install -g create-react-app

   安装完成后，你可以通过create-react-app --version来检查其版本。 （注意命令是create-react-app而不是creat-react-app）

2. 创建React项目

   使用create-react-app命令后跟你的项目名称来创建一个新的React项目。 在这里我取名为 my-react

   	create-react-app my-react

   这个命令会从GitHub拉取一个标准的React项目模板，并设置好所有必要的依赖和配置。

项目结构

创建的项目通常包含以下结构：

• src目录：这是你的开发目录，包含所有的源代码。

  • 入口文件 ：通常是src/index.js,这是React应用的入口点。
  • 组件 ：在src目录下，你可以创建多个文件夹来组织你的组件components。React组件可以是类组件或函数组件，通常每个组件都对应一个.js或.jsx文件。
  • 样式 ：React组件的样式可以通过CSS文件来实现，并通过import语句引入到组件中。你也可以使用CSS-in-JS解决方案如Styled-components等。

React核心概念

1. 组件化开发

   React应用由多个组件组成，每个组件都是UI的一个独立、可复用的部分。组件可以接收props（属性）作为输入，并返回React元素作为输出。

2. Props

   props是一个对象，它允许你将数据从父组件传递到子组件。props是只读的，组件不能修改自身的props。

3. 状态（State）

   与props不同，状态是组件内部的数据，它允许组件根据用户的输入、服务器响应等因素动态地改变自己的输出。在React中，状态是通过this.state（在类组件中）或useState Hook（在函数组件中）来管理的。

4. MVVM（Model-View-ViewModel）模式

   MVVM模式是一种强大的软件设计模式，它通过分离UI逻辑与业务逻辑、实现数据的双向绑定和重用视图逻辑等方式，提高了应用程序的可维护性、可测试性和可重用性。在现代前端开发和移动应用开发中，MVVM已经成为一种非常流行的架构模式。vue.js就遵循MVVM模式。

   React虽然不直接遵循MVVM模式，但它通过组件化和状态管理（如Redux或Context API）实现了类似的效果。React鼓励开发者关注业务逻辑，而不是直接操作DOM，从而提高了开发效率和应用的性能。

通过以上步骤和概念，我们可以开始使用React和create-react-app来构建我们的前端应用了。

React应用的骨架

完成上面步骤，可以看到我们的文件夹中引入了很多文件，我将为你讲解他的目录结构和文件

目录结构

1. node_modules：

-   存放所有通过npm或yarn安装的第三方依赖包。这个目录通常不需要手动更改。

2. public：

-   存放静态资源文件，如HTML文件、图片、字体等。
-   其中，`index.html`是React应用的主HTML文件，它负责加载和渲染React应用。
-   可能还包含`favicon.ico`（网站图标）、`manifest.json`（移动应用配置文件，对于Web应用可选）等文件。

3. src：

-   存放所有源代码文件，是React项目最核心的目录。
-   **components**：存放React组件的目录。每个组件通常由一个独立的文件夹组成，包含组件的JavaScript代码、样式文件（如CSS或SCSS）和其他相关资源。
-   **pages**：存放页面级组件的目录。与components目录类似，但这里的组件通常代表整个页面或页面的一部分。
-   **utils**：存放工具函数或辅助类的目录。这些函数或类可以在项目的多个地方被复用。
-   **App.js/App.tsx**：React应用的主组件文件，通常包含整个应用的路由配置和布局结构。
-   **index.js/index.tsx**：React应用的入口文件，负责渲染App组件到页面上。
-   可能还包含其他目录，如`hooks`（存放自定义Hooks）、`styles`（存放全局样式文件）、`assets`（存放静态资源如图片、字体等）等，具体取决于项目的需求和组织方式。

文件

1. .gitignore：

用于指定哪些文件或目录不需要被Git跟踪，如node_modules、本地配置文件等。

2. package.json：

package.json文件一般位于每个Node.js项目的根目录下,，它定义了项目所需要的各种模块以及项目的配置信息，如名称、版本、许可证、依赖模块等元数据

主要内容

• 项目信息 ：包括项目名称（name）、版本号（version）、描述（description）、作者（author）、许可证（license）等。
• 依赖信息 ：分为dependencies（生产环境依赖）和devDependencies（开发环境依赖），分别列出了项目运行和开发所需的所有npm包及其版本号。
• 脚本 ：通过scripts字段，可以定义一系列可以在项目根目录下通过npm命令运行的脚本，如启动项目、测试等。
• 其他配置 ：如repository（代码仓库信息）、bugs（问题跟踪器信息）、homepage（项目主页URL）等。

3. package-lock.json

package-lock.json文件是在执行npm install命令时自动生成的文件，它记录了当前状态下实际安装的各个npm包的具体来源、版本号和依赖关系。

主要内容

• 依赖树 ：package-lock.json文件以树状结构记录了项目依赖的所有npm包及其依赖关系。
• 版本和来源 ：对于每个依赖包，都记录了其精确版本号、下载地址（resolved字段）和完整性哈希（确保下载的包未被篡改）。

4. README.md：

项目的说明文件，用于介绍项目的功能、安装步骤、使用说明等信息。这个文件对于其他开发者理解和使用项目非常有帮助。