React脚手架结构介绍

最新推荐文章于 2022-06-20 17:28:08 发布

一杯清泉

最新推荐文章于 2022-06-20 17:28:08 发布

阅读量1.2k

点赞数

分类专栏： react 文章标签： create-react react

本文链接：https://blog.csdn.net/yoonerloop/article/details/123949124

版权

react 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

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会自动配置。

一杯清泉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React脚手架结构介绍

Create React App 是一个官方支持的创建 React 单页应用程序的方法，如下：npx create-react-app my-appcd my-appnpm start结构如下：一、public文件夹该文件是react项目的入口文件：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"...
复制链接

扫一扫

专栏目录