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元素是，它是应用程序的主要组件。要将其呈现到的DOM节点是document.getElementById('root')，它是在public/index.html文件中定义的id为root的div元素。
————————————————
版权声明：本文为CSDN博主「天界程序员」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_36362721/article/details/129840884
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
最后，该文件还包含了一些用于开发和调试的代码。例如，它使用了React.StrictMode组件，这个组件可以帮助您在开发过程中发现潜在的问题。它还使用了console.log()方法，这个方法可以将消息记录到浏览器的控制台中，以帮助您调试应用程序。
