React脚手架结构介绍
Posted 一杯清泉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React脚手架结构介绍相关的知识，希望对你有一定的参考价值。
Create React App 是一个官方支持的创建 React 单页应用程序的方法，如下：
npx create-react-app my-app
cd my-app
npm start
结构如下：
一、public文件夹
该文件是react项目的入口文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!--代表public文件夹的路径，也可以使用 ./相对路径-->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!--开启理想视口，开启移动端的适配-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--用于配置浏览器页签的颜色，仅针对android手机，ios无效，兼容性不好-->
<meta name="theme-color" content="#000000" />
<!--描述网页信息的-->
<meta
name="description"
content="Web site created using create-react-app"
/>
<!--移动端添加桌面页面的快捷方式的图标，支持IOS手机-->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--应用加壳，生成App，指定权限等-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--标题-->
<title>React App2</title>
</head>
<body>
<!--如果浏览器JS不支持脚本的执行时候的提示-->
<noscript>You need to enable javascript to run this app.</noscript>
<!--react组件容器-->
<div id="root"></div>
<!--爬虫规则文件：robots.txt-->
</body>
</html>
二、src文件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
//可以检查App.js和子组件合法和合理性，以及过时的API
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
//用于记录页面的性能
reportWebVitals();
1、index.js入口文件。
2、App.js函数组件，App.css样式文件，App.test.js测试文件，几乎不用。
3、index.css通用样式。也可以放在public/css/index.css下，通过<link rel="stylesheet" href="./css/index.module.css" />引用。
4、React.StrictMode：可以检查App.js和子组件合法和合理性，以及过时的API。
5、reportWebVitals：用于记录页面的性能。
6、setupTests：组件测试。
7、index.jsx：不能随便任意改，webpack会自动配置。
以上是关于React脚手架结构介绍的主要内容，如果未能解决你的问题，请参考以下文章
前端学习（3153）：react-hello-react之脚手架文件介绍