为啥 create-react-app 会同时创建 App.js 和 index.js？

Posted 2023-02-22

【中文标题】为啥 create-react-app 会同时创建 App.js 和 index.js？

【英文标题】：Why does create-react-app creates both App.js and index.js?为什么 create-react-app 会同时创建 App.js 和 index.js？

【发布时间】：2018-11-02 17:17:40

【问题描述】：

我开始学习 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 的问题，但我想知道一般的反应。

【问题讨论】：

App 是一个根组件，索引将事物粘合在一起：注册 service worker，初始化 store 等

【参考方案1】：

index.js 是所有节点应用程序的传统和实际入口点。在 React 中，它只有要渲染的内容和渲染位置的代码。

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

除此之外，您可以在index.js 文件本身中包含应用程序逻辑。但它与使用库或框架的社区所遵循的约定有关。与社区相处总是感觉很好。

【讨论】：

是的，App 真的只是另一个组件！ index.js 是规范文件

【参考方案2】：

很好的问题。答案是 App.js 不是必需的，我个人删除它，只使用 Index.js 作为根。

人们“说”它使它看起来更好/更容易，但它只是添加了一个不必要的额外步骤。我希望他们最终会从 npx create-react-app 中删除 App.js，而只使用 index.js。

App.js 不是必需的，尽管人们经常使用它，但您可以并且可能应该删除它并通过 index.js 简化所有内容。

【讨论】：

如果您可以提供一些代码来说明您的意思，那将有所帮助。如果没有 App 组件，index.js 会是什么样子？

@VivekDev 字面意思一样。只需取出APP组件，然后将您的App内容放入其中即可。

【参考方案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'));

【参考方案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 直接实现的示例。

【参考方案5】：

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 文件。

【讨论】：

我猜这不是很精确，html-webpack-plugin 使用的是 webpack 配置中的entry。

@EvgenyTimoshenko 根据 this quesitonRedux 的创建者 Dan Abramov 说的。

@EvgenyTimoshenko 还有this configuration

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