【react全家桶学习】初始化react脚手架及项目结构讲解

目录

react 脚手架介绍

创建项目并启动

一、全局安装  npm i create-react-app -g 

二、切换到想创项目的目录，使用命令:create-react-app hello-react(自定义项目名)

项目结构介绍 

 主要分析public-->index.html文件 

 分析src文件夹

项目执行流程 

---

react 脚手架介绍

• xxx脚手架用来帮助程序员快速创建一个基于xxx库的模板项目
•         1、包含了所有需要的配置 (语法检查、jsx 编译、devServer...)
•         2、下载好了所有相关的依赖
•         3、可以直接运行一个简单效果
• react提供了一个用于创建react 项目的脚手架库: create-react-app
• 项目的整体技术架构为： react + webpack + es6 + eslint
• 使用脚手架开发的项目的特点：模块化、组件化、工程化

创建项目并启动

• 第一步，全局安装:npm install -create-react-app
• 第二步，切换到想创项目的目录，使用命令:create-react-app hello-react(自定义项目名)
• 第三步，进入项目文件夹:cd hello-react
• 第四步，启动项目:npm start

一、全局安装  npm i create-react-app -g 

二、切换到想创项目的目录，使用命令:create-react-app hello-react(自定义项目名)

注意：项目名不能有大写字母，否则会报错

报错翻译：

  

 换成小写字母或者下划线即可

 然后就创建好了，进入到项目目录启动一下

看到这个小花花就是成功了~ 

项目结构介绍 

 

 主要分析public-->index.html文件 

 补充：manifest.json是在应用加壳技术后的配置文件。

        那应用加壳技术是啥？其实就是当我们想要编写移动端的时候，如果使用专门开发android或者ios的人员去开发，代价及技术成本相对较高，因此我们会使用应用加壳技术来实现，通过编写移动端html网页，然后编写完之后套一个壳最终打包为apk文件，当我们在手机上安装之后，其实打开时是我们的壳，里面嵌套的是html网页。这样就极大节省了人力，提升了开发效率也能达到同样的效果。因此manifest.json就是为了配置加壳后的apk应用的名字、权限、图标以及访问应用设备权限。

下面是manifest.json的基础配置，实际应用中配置项会更多。 

 分析src文件夹

app.js ：作用是创建一个App组件

app.css ：app组件的样式文件

app.test.js : 测试文件，几乎不用

index.css : 全局样式文件

index.js : webpack入口文件

 

 参考这位博主的文章  React中StrictMode严格模式_react.strictmode_前端精髓的博客-CSDN博客

 reportWebVitals.js ：页面性能分析文件（需要web-vitals库的支持）

 setupTests.js ：组件单元测试的文件（需要jest-dom库）

项目执行流程 

 了解了react脚手架及项目结构后，就进入正式的学习啦~