create-react-app와CodeSandbox로React 응용 프로그램 개발을 가볍게 준비

tl;dr

최근에 리액트에 들어갔는데 로컬 환경에서도 리액트 앱을 쉽게 개발할 수 있도록 사용create-react-app과 CodeSandbox리액트 앱을 쉽게 개발할 수 있는 환경을 준비했다.

컨디션

Mac OS X 10.13.4

NodeJS v9.7.1

npm 5.6.0

yarn 1.5.1

로컬 React 개발 환경 준비

프로그램 개요

대체로 세 걸음이면 완성된다.소요 시간은 5~10분 정도다.

create-react-app 명령 설치

React 응용의 초기 제작

React 애플리케이션 시작 확인

명령 설치

create-react-app는 페이스북이 공식적으로 제공하는 리액트 앱의 초기 형태인 단순 제작 명령이다.
GitHub - facebook/create-react-app: Create React apps with no build configuration.
웹팩이나 바벨 같은 포장 관리 도구는 필요 없고 프로젝트를 만들면 코드 개발에 집중할 수 있다.(이하 참조create-react-app의 README
Get Started Immediately
You don’t need to install or configure tools like Webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.
Just create a project, and you’re good to go.npm 에 전역 설치를 수행하여 설치되었는지 확인합니다.

$ npm install -g create-react-app
$ create-react-app -V
1.5.2

React 응용 프로그램의 초기 제작

간단히create-react-app 한 번에 응용 프로그램의 초기 형태를 만들 수 있다.

$ create-react-app react-practice

...

Success! Created react-practice at /path/to/react-practice
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-practice
  yarn start

React 애플리케이션 시작 확인

대화상자에 마지막으로 표시된 명령을 실행하고 프로그램을 시작합니다.

$ cd react-practice
$ yarn start

웹 브라우저http://localhost:3000/에 액세스하면 샘플 화면이 표시됩니다.

CodeSandbox에서 React의 샘플 코드 찾기

개발이 준비됐기 때문에 나중에 실제로 만들고 싶은 앱을 만들 거예요.나는 CodeSandbox부터 그때 참고할 샘플 코드를 찾는 것이 좋다고 생각한다.

코드샌드박스에서는 온라인 편집기에서 리액트 코드를 쓸 수도 있고, 다른 사람이 쓴 코드를 검색·읽을 수도 있다.따라서 로컬에서 개발 환경을 준비하지 않더라도 웹 브라우저가 있으면 온라인에서만 개발할 수 있다.
편집기와 화면의 인상은 이렇다.

Sandbox search에서 Templates를 create-react-app 집중해서 검색하면 create-react-app 초기 형태로 만든 프로그램을 검색할 수 있다.
검색된 프로그램의 코드를 샘플로 읽으면 어떻게 개발을 확장했는지 쉽게 상상할 수 있을 것 같습니다.

끝맺다

리액트를 확인하는 동작과 코드 개발에 집중할 수 있는 크레이트-react-app, 샘플 코드를 찾기 쉬운 코드샌드박스 등 편리한 도구가 있다.앞으로 나는 각양각색의 것을 시도하고 싶다.

사이트 축소판 그림

페이스북의 공식 create-react-app 명령인 React를 사용합니다.폭발 속도로 js 프로그램 만들기

Add React to an Existing Application - React

JS의 개발 환경을 몰라서 CodeSandbox-Qiita를 추천하고 싶어요.