开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第34天，点击查看活动详情

写在前面

本篇是react学习的第二篇，了解并整理项目结构

了解并整理项目结构

上篇文章我们已经创建了一个简单的react项目，我们先将项目结构梳理一下：

src\index.js 是入口文件，什么意思呢？因为我们使用create-react-app创建的react项目是单页面应用，所以整个项目中只有一个html文件和一个js文件，而src\index.js文件就是我们这个项目的总入口

src\index.js 文件内容如下，我们需要了解的是import './index.css';和import App from './App';，其他要么是创建项目的一些配置，要么是为了让我们更好更快更方便开发做的一些配置，以后深入的时候再去了解。

import './index.css';说明引入了一个css文件，可以把他理解为一个全局的css，因为他是在总入口被引入的，这应该很好理解，我们把index.css里面的代码先清空

import App from './App';是引入App组件，下面我们去到App.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>
);

reportWebVitals();

App.js代码如下，import logo from './logo.svg';表示引入svg，import './App.css';表示引入css，我们将<header>...</header>这部分代码先删除，同时将import logo from './logo.svg';这段代码删除，外部的logo.svg文件也删除，因为我们用不到这个svg了

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;

然后我们在src目录下新建一个App文件夹，将App.css、App.js、App.test.js都移到这个文件夹下面，同时修改src\index.js下的代码为import App from './App/App';，清空App.css文件下的代码

此时我们的src目录的结构已经比较干净了，同时项目内容都已清空，下篇文章我们就可以开始上手写代码了。

写在最后

以上就是了解并整理项目结构全部代码和说明