React JS 배우기 - React 앱 만들기 - 파트 2(시리즈)

안녕하세요 여러분 👋,

이전 기사에서는 JSX, React Element, Rendering the element 등을 다룬 React의 기본 개념에 대해 배웠습니다.

Learn React JS 시리즈 2부에서는 Create React App 도구를 사용하여 React 앱 만들기에 대해 다룹니다.

Create React App으로 React 앱 만들기

이 시리즈의 1부에서는 React & React DOM CDN URL을 <script> 태그에 직접 추가하여 React 앱을 만들었습니다. 위의 방법보다 Create React App 도구를 사용하는 이유는 다음과 같은 작업에 도움이 되기 때문입니다.

많은 파일 및 구성 요소로 확장됩니다.

npm의 타사 라이브러리를 사용합니다.

일반적인 실수를 조기에 감지합니다.

실시간 편집 CSS 및 JS가 개발 중입니다.

생산을 위한 출력 최적화.

더 이상 지체하지 않고 Create React App 도구를 사용하여 앱을 만들어 봅시다.

터미널에서 아래 명령을 실행하여 Create React App 패키지를 설치합니다.

npm install -g create-react-app

아래 명령은 새 앱을 만듭니다. 따라서 두 번째 인수를 업데이트하십시오. 응용 프로그램 이름입니다.

create-react-app first-app

앱이 성공적으로 생성되면 아래와 같은 화면을 볼 수 있습니다.

그런 다음 프로젝트 폴더로 이동하여 앱을 실행합니다.

cd first-app
yarn start

명령yarn start은 자동으로 서버를 시작하고 포트3000에서 수신 대기합니다. 이것은 http://localhost:3000/에서 보게 될 첫 번째 화면입니다.

내용을 수정하려면 App.js 폴더 아래의 src/ 파일을 열고 return 블록 내부의 코드 업데이트를 시작합니다. 첫 번째 앱으로 표시되도록 h1 태그만 유지하도록 코드를 업데이트했습니다. 파일을 저장하면 자동으로 새로운 변경 사항이 UI에 반영됩니다.

원본 콘텐츠

import logo from './logo.svg';
import './App.css';

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>
  );
}

export default App;

수정된 내용

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>First App</h1>
    </div>
  );
}

export default App;

수정된 내용이 포함된 출력:



다음은 part-2 분기에서 파일을 찾을 수 있는 내 github 저장소입니다. 우리는 모든 부분에 대해 이 저장소를 계속 업데이트할 것입니다. 그러니 즐겨찾기 해두세요.

yuvgeek / 학습-반응

다음 기사에서는 구성 요소를 만드는 방법과 기능적 구성 요소와 클래스 구성 요소의 차이점에 대해 알아봅니다.

기사를 읽어 주셔서 감사합니다!