为什么create-react-app会创建App.js和index.js两个文件？

Question

我开始学习React，现在我试图理解由运行create-react-app创建的index.js和App.js的目的是什么。

为什么我们不能只使用 App.js？

我已经阅读过，App.js通常用作应用程序的主要入口点，但是index.js的自动生成代码似乎是主入口点的一部分。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

我看到有关React Native的类似问题，但我想了解一般情况下React的情况。

- Artem Malchenko

---

应用程序是根组件，索引将各个部分粘合在一起：注册服务工作者，初始化存储等。 - Evgeny Timoshenko

Answer 1

index.js是所有Node应用程序的传统和实际入口点。在React中，它只包含代码来指定要渲染什么以及在哪里渲染。

另一方面，App.js具有React应用程序的根组件，因为每个视图和组件都按层次结构处理，其中<App />是层次结构中最顶层的组件。这让你觉得你从App.js开始在代码中维护了一个层次结构。

除此之外，你也可以将App的逻辑放在index.js文件中，但这与使用该库或框架的社区遵循的惯例相关。跟随社区总是让人感觉良好。

- Hariharan L

---

没问题，「App」其实只是另一个组件！「index.js」是官方文件。 - information_interchange

index.js 意在仍处于“DOM世界”，并链接到“React世界”，而App.js是一个百分之百的“React世界”组件。你可能会在index.js中有其他“DOM世界”的代码（虽然这很不常见），但在App.js中没有。 - kca

Answer 2

好问题。答案是App.js并不是必需的，我个人会删除它并直接使用Index.js作为根（组件）。

有些人认为这样可以让代码看起来更漂亮/更容易，但实际上这只是增加了一个不必要的步骤。希望他们最终能够从npx create-react-app中删除App.js并只使用index.js。

编辑：虽然我不会修改原始评论，但我已经放弃了删除App.js。现在我只是通过App.js进行所有的导入和处理，然后将它们引入Index.js中。Index.js的好处是你可以在那里做所有的导入，并通过App.js进行处理。

- Evan Erickson

---

如果您能提供一些代码来展示您的意思，那将会很有帮助。如果没有App组件，index.js会是什么样子？ - VivekDev

@VivekDev 没错，就是这样。只需去掉 APP 组件，然后将您的应用程序内容放入其中即可。 - Evan Erickson

App.js并不是“必须”的，但也不是“必须”以任何方式组织应用程序，你可以把所有东西都放在一个大文件中。这两个文件的目的是在纯JS和React之间保持清晰的分离。（如果不需要或不想要，则可以以不同的方式组织代码，没有问题）。 - kca

Answer 3

是的，App.js并不是必需的。你可以仅使用以下的index.js文件。

// Import React and ReactDOM Libraries.
import React from 'react';
import ReactDOM from 'react-dom';
import CommmentDetail from './CommentDetail';

function getLabelText() {
  return 'Enter Name: ';
}

// Create React Components 
const App = () => {
  const buttonText = {text: 'Submit'};
  const buttonStyle = {backgroundColor: 'blue', color: 'white'}; 
  return (
    <div>
      <label className="label" htmlFor="name">{getLabelText()}</label>  
      <input id="name" type="text" />
      <button style={buttonStyle} >{buttonText.text}</button>

      // You can have other components here as follows.
      // CommmentDetail is someOther component defined in another file.
      // See the import statement for the same, 4th line from top

      <CommmentDetail author='Nivesh' timeAgo='3 months ago at 4.45 PM' commentText='Good Point' } />
    </div>
  )
}

// Take the react component and show it on the screen
// ReactDOM.render(<App />, document.getElementById('root'));
// You can use the following as well.
ReactDOM.render(<App />, document.querySelector('#root'));

- VivekDev

---

开始使用GOTO会非常酷；这是意大利面的完美配方！ ;) - Marcelo Scofano Diniz

Answer 4

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <h2>How are you!</h2>
    </div>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

这是一个示例，我们可以直接实现，而不需要使用App.js。

- Bluefin zen

Answer 5

App.js 是包含应用程序逻辑的“顶级组件”，而 index.js 是服务器的“入口点”，包含服务器逻辑。

如果需要在不更改服务器任何内容的情况下切换应用程序，则可以使用此方法来拥有多个应用程序。

- Rodrigo Balibrera

Answer 6

create-react-app 使用一个名为html-webpack-plugin的插件来处理webpack，该插件使用index.js作为入口点，如下所示：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 entry: 'index.js',
 output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
 plugins: [
new HtmlWebpackPlugin()
 ]
}

这个插件用于生成HTML文件。

- MBehtemam

---

我猜这不是很精确，因为html-webpack-plugin正在使用webpack配置中的“entry”。 - Evgeny Timoshenko

根据这个问题，Redux的创始人Dan Abramov说过这句话。 - MBehtemam

@EvgenyTimoshenko 和这个配置。 - MBehtemam

正确。html-webpack-plugin使用webpack配置中指定的内容。我的第一个评论是不正确的，html-webpack-plugin既不使用entry也不使用index.js，它使用的是output。 - Evgeny Timoshenko