为什么 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 的问题，但我想知道一般的反应。

Answer 1

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

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

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

Answer 2

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

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

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

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'));

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 直接实现的示例。

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