day03—React脚手架

Evelyn627

已于 2023-06-29 08:27:32 修改

阅读量421

点赞数

分类专栏： react 文章标签： javascript 前端 react.js

于 2023-06-19 17:43:23 首次发布

本文链接：https://blog.csdn.net/2301_77202544/article/details/131288036

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、React脚手架搭建

1、xxx脚手架：用来帮助程序员快速搭建一个基于xxx库的模板项目。

（1）脚手架包含了所有需要的配置（语法检查、jsx编译、devServer…）;
（2）下载好了所有相关的依赖；
（3）直接运行一个简单的效果；

2、React提供了一个用于创建React项目的脚手架库；（create-react-app 目录名称）
3、项目的整体技术架构：react+webpack+es6+eslint
4、使用脚手架开发项目的特点是：模块化、组件化、工程化

Step1：全局安装create-react-app库 npm i create-react-app -g
Step2：切换到你想要创建项目的目录 create-react-app xxx(目录名称最好不要使用中文以及符号)
Step3：cd 目录名称
Step4：启动项目 npm start

二、脚手架目录说明

1、public目录（静态资源文件夹）

脚手架服务的网站的根目录（静态资源目录，页面、样式、公共图片，但js不放在这儿）

【注】在public目录中，于我们而言，只有index.html文件是最重要的，组件内容就放在root容器元素中，最终呈现在页面上，只在root容器元素中放入一个组件——App组件（其他组件都作为App组件的子组件）
public文件夹

<!DOCTYPE html>
<!-- index.html文件 -->
<html lang="en">
<head>
  <meta charset="utf-8" />
  <!-- %PUBLIC_URL% 表示public文件夹的路径 -->
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <!-- 用于开启理想视口，做移动端网页的适配-->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器)，兼容性不好，很少用-->
  <meta name="theme-color" content="#000000" />

  <!-- 描述网站信息，搜索引擎在收录网站时需要看描述信息-->
  <meta name="description" content="Web site created using create-react-app" />

  <!-- link标签引入文件时，type一般都是stylesheet -->
  <!-- 用于指定网页 添加到 手机主屏幕后 的显示图标-->
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

  <!-- manifest.json：用于应用加壳，指定应用的名字、图标、访问设备的权限的配置文件 -->
  <!-- 将html文件，加壳，生成.apk文件，安卓的安装包 -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>React App</title>
</head>

<body>
  <!-- 浏览器不支持js运行时，则展示标签中的内容 -->
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

【注】robots.txt文件：爬虫规则文件，爬虫爬取页面时，可以指定规则，哪些内容允许被爬取，

2、src目录（源码文件夹）

src文件夹
【注】项目启动时，首先执行src目录的index.js文件（入口文件），根据根元素对象root，找到public目录下的index.html文件中的root结点，然后App组件显示在页面上(App.js文件)

【注】整个React项目中，只有一个html文件（React和Vue框架写的应用都是SPA应用，单页面应用，Singular Page Application，单页面应用）若有其他功能，拆分功能模块。

App.js文件：创建了App组件（定义函数组件App）
App.css文件：App.js文件的样式
index.css文件：通用的样式
index.js文件：webpack入口文件（引入react、react-dom、index.css、App组件，在root元素中渲染App组件）找到index.html文件中的root根元素对象。
logo.svg文件：logo图（引入时以模块的形式）
reportWebVitals.js文件：记录页面的性能，使用web-vitals库检测页面性能
setupTest.js文件：组件单元测试性能的文件（需要jest-dom库的支持）