react入门学习笔记（1）

1 本文内容简介

1. 如何创建一个react项目
2. 介绍react项目的基本目录结构

1.1 如何创建一个react项目

如同vue可以借助脚手架vue/cli快速创建一个vue项目一般，react也可以借助脚手架create-react-app来创建一个react项目。

1. 首先，确保电脑上已经安装了Node.js和npm（Node.js的包管理工具）
2. 打开终端或命令提示符窗口。
3. 运行以下命令来安装create-react-app脚手架工具（如果之前没有安装过）：

npm install -g create-react-app

4. 创建一个新的React项目（例如，项目名为"react-base"）：

npx create-react-app react-base

5. 进入项目目录：

cd react-base

6. 启动项目

npm start

1.2 介绍react项目的基本目录结构

按照1.1中步骤创建的react-base项目的项目结构可以简要整合如下：

react-base/
├── node_modules/  存放项目所需的依赖包
├── public/ 
│   ├── index.html 入口HTML文件
│   ├── favicon.ico 
│   └── ...  其他静态资源
├── src/
│   ├── App.js  默认的应用组件，可以在这里开始编写项目
│   ├── index.js  应用的入口文件，将React应用渲染到DOM中
│   ├── index.css 全局样式文件
│   ├── logo.svg 
│   └── ... 其他自定义组件和逻辑文件
├── package.json 项目的配置文件，包含项目依赖和脚本等信息
├── README.md  项目说明文档
├── .gitignore Git  版本控制忽略配置文件，用于指定不需要上传到版本控制的文件或目录
└── ...

• node_modules/：存放项目所需的依赖包。
• public/：存放静态资源和入口HTML文件。
• src/：存放项目的源代码。
  • App.js：默认的应用组件，可以在这里开始构建你的应用。
  • index.js：应用的入口文件，将React应用渲染到DOM中。
  • index.css：全局样式文件。
  • 其他自定义组件和逻辑文件。
• package.json：项目的配置文件，包含项目依赖和脚本等信息。
• README.md：项目的说明文档。
• .gitignore：Git版本控制忽略配置文件，用于指定不需要上传到版本控制的文件或目录。