我开始学习 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的问题，但我想在一般react中了解这一点。
index.js是所有节点应用程序的传统和实际入口点。在 React 中，它只有关于渲染内容和渲染位置的代码。
App.js另一方面，具有 React 应用程序的根组件，因为在 React 中每个视图和组件都使用层次结构处理，层次结构中<App />最顶层的组件在哪里。这让您感觉您在代码中维护从App.js.
除此之外，您可以在index.js文件本身中包含应用程序逻辑。但它与使用库或框架的社区遵循的约定有关。与社区同行的感觉总是很好。
很好的问题。答案是 App.js 不是必需的，我个人删除了它，只使用 Index.js 作为根。
人们“说”它使它看起来更好/更容易，但它只是添加了一个不必要的额外步骤。我希望他们最终将 App.js 从 npx create-react-app 中删除，只使用 index.js。
App.js 不是必需的，尽管人们经常使用它，但您可以并且可能应该删除它并通过 index.js 简化所有内容。
是的，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'));
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 的情况下直接实现。