react项目脚手架文件目录
public ---- 静态资源文件夹
|-------favicon.icon ------ 网站页签图标
|-------index.html -------- 主页面
|-------logo192.png ------- logo图
|-------logo512.png ------- logo图
|-------manifest.json ----- 应用加壳的配置文件
|-------robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
|-------App.css -------- App组件的样式
|-------App.js --------- App组件
|-------App.test.js ---- 用于给App做测试
|-------index.css ------ 全局样式
|-------index.js ------- 入口文件
|-------logo.svg ------- logo图
|-------reportWebVitals.js ---- 页面性能分析文件(需要web-vitals库的支持)
|-------setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)
public/index.html
<!DOCTYPE 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="red" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<!-- 用于指定网页添加到手机主屏幕后的图标 -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- 应用加壳时的配置文件 -->
<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>
public/index.html
文件是React
应用程序的入口点,负责提供HTML
文档的基本结构,并包含一个id
为root
的div
元素,这是React
应用程序将呈现的地方。
src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
src/index.js
文件是React应用程序的主要入口点,负责将应用程序呈现到DOM
中。
1:首先,该文件导入了React
和ReactDOM
库
import React from 'react';
import ReactDOM from 'react-dom';
2: 然后,它导入了应用程序的主要组件,即src/App.js
文件中定义的组件:
import App from './App';
3: 接下来,它使用ReactDOM.render()
方法将应用程序呈现到DOM
中。这个方法需要两个参数:要呈现的React
元素和要将其呈现到的DOM
节点。在这个例子中,要呈现的React
元素是<App />
,它是应用程序的主要组件。要将其呈现到的DOM
节点是document.getElementById('root')
,它是在public/index.html
文件中定义的id
为root
的div
元素。文章来源:https://www.toymoban.com/news/detail-408091.html
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
最后,该文件还包含了一些用于开发和调试的代码。例如,它使用了React.StrictMode
组件,这个组件可以帮助您在开发过程中发现潜在的问题。它还使用了console.log()
方法,这个方法可以将消息记录到浏览器的控制台中,以帮助您调试应用程序。文章来源地址https://www.toymoban.com/news/detail-408091.html
到了这里,关于第十六章 脚手架文件介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!