create-react-app은 App.js와 index.js를 모두 생성하는 이유는 무엇입니까?

create-react-app은 App.js와 index.js를 모두 생성하는 이유는 무엇입니까?

저는 React를 배우기 시작했고, 이제 그 목적이 무엇인지 이해하려고 합니다.index.js그리고.App.jscreate-module-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();

리액션 네이티브에 대해서도 비슷한 질문을 보았지만, 대체적으로 리액션에 대해 알고 싶습니다.

index.js는 모든 노드 어플리케이션의 기존 및 실제 엔트리 포인트입니다.여기 React에는 렌더링 대상과 렌더링 위치에 대한 코드만 있습니다.

App.js반면 모든 뷰와 컴포넌트는 React에서 계층 구조로 처리되기 때문에 react 앱의 루트 컴포넌트가 있습니다.<App />는 계층 내 최상위 컴포넌트입니다.이를 통해 코드 내의 계층 구조를 다음부터 유지할 수 있습니다.App.js.

그 이외의 어플리케이션 로직은index.js파일 자체입니다.하지만 그것은 도서관이나 틀을 사용하는 커뮤니티가 따르는 관습과 관련된 것입니다.지역사회를 따라가는 것은 언제나 기분 좋은 일이다.

좋은 질문입니다.답변은 App.js는 필요없고 제가 직접 삭제하고 Index.js를 루트로 사용합니다.

사람들은 그것이 그것을 더 좋게 보이게 하거나 쉽게 보이게 한다고 말한다. 하지만 그것은 단지 필요하지 않은 추가 단계를 추가하는 것일 뿐이다.npx create-react-app에서 App.js를 삭제하고 index.js만 사용했으면 좋겠습니다.

편집: 원래 코멘트는 변경하지 않지만 App.js 삭제를 포기했습니다.이제 App.js를 통해 모든 것을 전송하고 Index.js를 사용합니다.index.js의 장점은 Import를 모두 그곳에서 실행할 수 있으며 App.js를 통해 Import할 수 있다는 것입니다.

네, 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를 사용하지 않고 직접 구현할 수 있는 샘플입니다.

App.js는 응용 프로그램의 논리를 포함하는 "상위 컴포넌트"인 반면 index.js는 서버의 "엔트리 포인트"로 서버의 논리를 포함합니다.

또, 서버내의 아무것도 변경하지 않고, 1개의 애플리케이션을 다른 애플리케이션으로 전환할 필요가 있는 경우에도, 복수의 애플리케이션을 설정할 수 있습니다.

create-react-app이름이 html-webpack-module인 웹 팩에 플러그인을 사용하고 이 플러그인은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 파일을 생성하는 데 사용됩니다.

언급URL : https://stackoverflow.com/questions/50493069/why-does-create-react-app-creates-both-app-js-and-index-js