반응이 컴포넌트 js 파일을로드하는 방법

Question

나는 몇 가지 기본 개념을 리얼리시하고 코딩하려고합니다. 그러나 몇 가지, 나는 이해할 수 없다. 다른 구성 요소에 대해 별도의 파일을 사용할 때 브라우저 네트워크 탭 (구성 요소 js 파일 용)에 항목이없는 이유는 무엇입니까? react가 구성 요소 js 파일이나 파일 내용을로드하여 브라우저에 제공하는 방법 (예 : "script"태그를 사용하는 경우 해당 특정 파일에 대한 요청 항목이 있습니다.)

실행하려면 npm start를 사용하고 있습니다.

하는 index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './css/output.css'; 
import App from './App.js'; 
import registerServiceWorker from './registerServiceWorker'; 

ReactDOM.render(<App />, document.getElementById('root')); 
registerServiceWorker(); 

App.js

import React, { Component } from 'react'; 
import { Fragment } from 'react'; 
import logo from './logo.svg'; 
import Header from './Header'; 

class App extends Component { 
    render() { 
    return (
     <div> 
      <Fragment> 
       <Header/> 
      </Fragment> 
     </div> 
    ); 
    } 
} 

export default App; 

Home.js

import React, { Component } from 'react'; 
import { Fragment } from 'react'; 

class Home extends Component { 
    render() { 
    return (
     <h1> 
     Inside Home 
     </h1> 
    ); 
    } 
} 

export default Home; 

Answer 1

"create-react-app"를 사용하고있는 것처럼 보입니다. 실제로 JS를 빌드하고 JS 파일을 하나의 파일로 작성하는 몇 가지 스크립트가 있습니다 (실수하지 않은 경우). 문서 당으로

: https://github.com/facebookincubator/create-react-app

당신이 시작하는 경우 반작용, 앱 빌드를 자동화하기 위해 만드는-반응-응용 프로그램을 사용합니다. 구성 파일이 없으며 react-scripts 만 package.json의 추가 빌드 종속성입니다. 환경에는 최신 React 앱을 구축하는 데 필요한 모든 것이 있습니다.

React, JSX, ES6 및 Flow 구문 지원. 객체 스프레드 연산자처럼 ES6 을 능가하는 언어 확장. 공통적 인 내용을 담은 dev 서버. 오류. JavaScript에서 직접 CSS 및 이미지 파일 가져 오기. 자동 접두어가 붙은 CSS이므로 -webkit 또는 다른 접두사는 필요하지 않습니다. 빌드 소스 맵을 사용하여 프로덕션을 위해 JS, CSS 및 이미지를 번들링하는 스크립트입니다. 오프라인 우선 서비스 작업자 및 웹 앱 매니페스트로, 모두 Progressive Web App 기준을 충족합니다.

내가 생각하기에/dist 폴더에서 빌드 JS를로드하는 템플릿이 있습니다. 거기를 확인하십시오. 또한 빌드 된 이슈를 열면 Webpack 빌드에서 생성 된 코드가 표시됩니다.