웹팩의 로더는 원래 직접 설치하고 설정해야 하지만 리액트 프로젝트를 만들 때 사용했던 create-react-app이 번거로운 작업을 모두 대신해 주기 때문에 우리는 별도의 설정을 할 필요가 없습니다. 이 설정을 커스터마이징하는 것은 나중에 설명하겠습니다.

그다음 코드를 보겠습니다.

function App() {
return (
  <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
);
}

이 코드는 App이라는 컴포넌트를 만들어 줍니다. function 키워드를 사용하여 컴포넌트를 만들었지요? 이러한 컴포넌트를 함수형 컴포넌트라고 부릅니다. 프로젝트에서 컴포넌트를 렌더링하면(렌더링이란 ‘보여 준다’는 것을 의미합니다) 함수에서 반환하고 있는 내용을 나타냅니다. 함수에서 반환하는 내용을 보면 마치 HTML을 작성한 것 같지요? 하지만 이 코드는 HTML이 아닙니다. 그렇다고 문자열 템플릿도 아닙니다. 이런 코드는 JSX라고 부릅니다.