[React] react project 생성하기

React로 프로젝트를 시작해보려 한다 !

Backend 개발자라 앞단은 해 볼 기회가 없어 개인 프로젝트로 경험해 보면 좋을 듯 하였다 =) 

잘 모르지만.. START !

 

 

React Project 만들기

react project는 npm 이나 yarn을 통해 설치할 수 있다. 나는 npm 으로 설치해 보았다.

아래는 react project를 생성해 주는 명령을 설치하는 커맨드이다.

npm install -g create-react-app

 

이렇게 설치하고 원하는 디렉토리로 옮겨 아래와 같이 react project를 생성해 준다.

npx create-react-app my-app
cd my-app
npm start

 

여기서, npx는 npm의 패키지 실행도구이다.

만들어진 프로젝트 디렉토리로 이동하여 npm start를 실행해 주면 default 3000 포트로 react project가 실행되게 된다.

 

실제로, localhost:3000에 접속하면 react project가 실행되었다는 페이지가 뜬다.

 

 

 

Hot Loader 설정하기

코드를 수정하고 프로젝트를 재실행 하는 것이 아니라 수정하면 실행되고 있는 상태에서 컴파일 되고 다시 로드해 주는 패키지이다.

해당 프로젝트 디렉토리로 이동하여 아래와 같이 설치해 준다.

npm install --save-dev react-hot-loader

 

그 후, 가장 최상단의 컴포넌트를 아래와 같이 설정해 준다. 나의 경우엔, App.js이다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { hot } from 'react-hot-loader'

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload!
        </p>
      </div>
    );
  }
}

export default hot(module)(App);

 

가장 하단에 hot(module)을 적용한 것을 볼 수 있다.

위와 같이 적용 후 코드를 수정하여 save하면 아래와 같이 실행 중단없이 재컴파일 되고 수정한 코드가 반영되는 것을 알 수 있다.

 

 

 

이제 프로젝트를 생성하였으니 만들어볼까 !