React-(2)React主要文件介绍

浪浪山的猿

已于 2022-09-15 10:40:51 修改

阅读量896

点赞数

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

于 2022-09-14 22:30:00 首次发布

本文链接：https://blog.csdn.net/qq_44936392/article/details/126853531

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

React主要文件介绍

react脚手架构成的工程核心有index.html，indes.js和App.js这三个主要文件，接下来详细介绍下这几个文件中的具体内容和作用。

1.index.html

index.html–项目的入口文件，一切从这里开始，这里是代码执行的源头。其中的div是项目的总容器，所有的内容都存储在这个容器中，一个项目里有且只能有一个。我们把这个div称为“根DOM节点”，在此div下的所有内容都由 React DOM 来管理。

<!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="#000000" />
    <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>
    <!-- 若llq（浏览器）不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div id="root"></div>
  </body>
</html>

2.index.js

index.js–是和index.html文件关联的唯一接口。

ReactDOM.render()方法的作用就是将的内容渲染到根DOM节点中去。document.getElementById(‘root’)中的"root"便是index.html中的"root"了， />便是引用页面内容了。

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(
  //在APP外侧包裹这个东西后的作用是检擦代码中一些不符合语法规范的东西
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

3.App.js

该类是继承react提供的component，export default App;是为了将App公开，index.js才能够引用。App.js继承了component的话，必须使用render进行渲染。return的内容是类似于html结构的内容，就是jsx，jsx语法是react的主要语法。内部的div的className是为了区分html语法的一个类名，这个是div的样式引用。在这个文件中，只能用一个div容器，如果在div的同级目录添加别的内容，便会报错。 className=“App”，是引用到App.css的样式。注意，页面内容样式是就近原则，首先用App.css的样式，App.css是组件的样式，index.css是全局的样式。

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;