Почему create-response-app создает и App.js, и index.js?
Я начал изучать React и теперь пытаюсь понять, для чего предназначены 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, но я хочу знать об этом в целом.
Ответы 4
create-react-app использует плагин для веб-пакета с именем html-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 использует entry из конфигурации webpack.
@EvgenyTimoshenko согласно этот вопрос Об этом сказал создатель Redux Дэн Абрамов.
@EvgenyTimoshenko, а также эта конфигурация
верный. html-webpack-plugin использует все, что указано в конфигурации webpack. мой первый комментарий неверен, html-webpack-plugin не использует ни entry, ни index.js, он использует output
index.js - это традиционная и актуальная точка входа для всех узловых приложений. Здесь, в React, просто есть код того, что и где рендерить.
App.js, с другой стороны, имеет корневой компонент приложения React, потому что каждое представление и компонент обрабатываются с помощью иерархии в React, где <App /> является самым верхним компонентом в иерархии. Это дает вам ощущение, что вы поддерживаете иерархию в своем коде, начиная с App.js.
Помимо этого, вы можете иметь логику приложения в самом файле index.js. Но это что-то связано с соглашениями, которых придерживается сообщество, использующее библиотеку или фреймворк. Всегда приятно идти вместе с сообществом.
Да, App - это просто еще один компонент! index.js - это канонический файл
Отличный вопрос. Ответ заключается в том, что в App.js нет необходимости, и я лично удаляю его и просто использую Index.js в качестве корневого.
Люди «говорят», что это делает его лучше / проще, но это просто добавление лишнего шага, в котором нет необходимости. Я надеюсь, что они со временем удалят App.js из npx create-response-app и просто воспользуются index.js.
App.js не нужен, и хотя люди его часто используют, вы можете и, вероятно, должны удалить его и оптимизировать все с помощью index.js.
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.
Приложение является корневым компонентом, индекс склеивает все вместе: регистрирует сервис-воркера, инициализирует хранилище и т. д.