Почему create-реакция-приложение создает как App.js, так и index.js?

Question

Я начал изучать React, и теперь я пытаюсь понять, для чего предназначены index.js и App.js, которые создаются путем запуска create-реакции-app .

Почему мы не можем просто использовать, например.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();

Я видел похожие вопросы для реагировать на нативных, но я хочу знать об этом в целом реагировать.

Answer 1

index.js - это традиционная и фактическая точка входа для всех приложений узла.Здесь, в реакции, он просто имеет код того, что рендерить и где рендерить.

App.js, с другой стороны, имеет корневой компонент приложения реагировать, поскольку каждый вид и компонент обрабатываются в React с иерархией, где <App /> - самый верхний компонент в иерархии.Это дает вам ощущение, что вы поддерживаете иерархию в своем коде, начиная с App.js.

. Кроме этого, вы можете иметь логику приложения в самом файле index.js.Но это что-то, связанное с соглашениями, которым следует сообщество, использующее библиотеку или структуру.Всегда приятно идти по сообществу.

Answer 2

create-react-app используйте плагин для веб-пакета с именем html-webpack-plugin , и этот плагин использует 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.