[Tutorial]2.Tutorial 환경설정

※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※

이 tutorial을 진행하는 2가지 방법이 있다. 하나는 browser에 코드를 입력하는 것이고, 또 하나는 PC에 개발 환경을 설치하는 것이다.

1. Browser에 코드 입력

---

  - tutorial을 시작하는 가장 빠른 방법이다. 우선 여기로 이동한다. 비어있는 tic-tac-toe 게임보드와 React code가 나타날 것이다. 이 tutorial에서 이 코드를 수정할 것이다.

2. PC에 환경 설정(1번이 쉽게 때문에 2번은 넘어가도 상관없다.)

---

  1) 최신 버전의 Node.js가 인스톨 되어 있어야 한다. (6버전보다 높은 Node, 5.2이상의 npm)

  2) react를 설치한다.

       npx create-react-app my-app

  3) src 폴더를 지운다. ( 모든 src 폴더가 아니라 안에 있는 원본 소스 파일을 지운다. 다음 단계에서 예제 파일로 원본 소스 파일을 대체할 것이다. )

       cd my-app

       cd src

       del *     #mac이나 linux 사용자면  rm -f *

       cd ..

  4) index.css 파일을 src에 추가한다.

  5) index.js 파일을 src에 추가한다.

  6) 아래 코드를 index.js 파일의 맨 위에 추가한다.

   

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css';

이제 프로젝트 폴더 안에서 npm start 하고 브라우저에서 http://localhost:3000을 입력하면 비어있는 tic-tac-toe 게임을 확인할 수 있다. syntax highliting을 위해 이것을 설치하는 것을 추천한다.