持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

前言

在上篇文章中启动了一个脚手架，自动打开了浏览器并打开了一个页面，显示知道我们编辑src/App.js来保存并自动重载，之前都初略的介绍了目录结构和文件的基本信息，下面就研究下主要文件内容

这里推荐使用了一个叫Simple React Snippets的浏览器插件，输入一些关于React的关键字能够自动补全。因为React的一些语法糖单词非常的长

index.html

先看下public/index.html这个文件

%PUBLIC_URL% 指定的就是public这个文件夹

meta是html语言head区的一个辅助性标签，位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

<meta name="viewport" content="width=device-width, initial-scale=1" /> 这段代码作用就是开启理想化窗口，用于做移动端网页的适配。 viewport表示视窗，width=device-width表示宽度=设备宽度，
<meta name="theme-color" content="#000000" />:## 当前页面的建议颜色，浏览器页签地址栏的颜色（兼容性很差）
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 用于移动端应用内嵌网页的一些设置文件（目前用不到）
<noscript></noscript> 浏览器不支持JavaScript标签运行，就会显示这个标签里面的内容
<div id="root"></div> 组件要挂载的Html节点。

index.js

import React from 'react';和import ReactDOM from 'react-dom/client';使用import 引入了一些React的和辛苦，之间是直接写script标签，然后是文件路径，这样就简单很多。
import App from './App';引入相关的css文件和，APP组件，这个APP组件在src/App.js中

这个APP组件是一个函数式组件，引入了一个svg图片和css样式,使用export default App; ，主动暴露APP这个组件供其他组件使用

import reportWebVitals from './reportWebVitals'; 和reportWebVitals();用于记录性能测试
React.StrictMode 表示启用严格模式

补充，一个最简单的例子

做一个简单的hello组件，目的是了解脚手架之前文件调用关系，引入规则，目前没有CSS，我们需要删掉很多文件，例如App.test.js，App.css，index.css，logo.svg，reportWebVitals.js，setupTests.js。

在src目录下新建一个专门存放组件的文件夹components,因为组件可以共用，我们再在这个文件夹下新建Hello的文件夹，再在这个Hello下新建一个Hello.js一个Hello.css文件。
Hello.js:

import React,{Component} from "react";
import './Hello.css'
export default class Hello extends Component{
    render(){
        return <h2 className='hello'>Hello,React!!!</h2>
    }
}

Hello.css:

.hello{
    color: blue;
}

当前的src的目录结构为：

然后修改App.js：


import React,{Component} from "react";
import Hello from './components/Hello/Hello'
export default class App extends Component{
  render(){
    return (
      <div>
        <Hello/>
      </div>
    )
  }
}

App.js组件是把其他子组件挂载到APP这个组件当中，暴露给index.js让它挂载到页面上

随后修改index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

index.js主要作用是把APP这个组件挂载在public/index.html的root节点上。
最后的效果当然是正常显示啦：

React 学习笔记（18）React 脚手架主要文件介绍

前言

index.html

index.js

补充，一个最简单的例子