1. Node.js /npm, yarn설치하기
※ yarn은 MacOS환경이므로 Windows에서는 설치 안해도 됩니다.
- Node.js 최신버전을 설치합니다. Node.js를 설치하면 자동으로 npm도 설치됩니다.
2. 코드 에디터 설치하기
- visual Code를 설치해주세요
3. windows에서 bash 애뮬레이터 사용하기
※ *권장합니다. 주목적은 터미널에서 사용할 명령어를 macOS, 리눅스에서 사용하는 명령어와 통일하기 위해서입니다.
3. Git설치하기
cmd bash에서 입력한다. sudo apt-get install git-all
4. create-react-app으로 프로젝트 만들기
비어 있는 프로젝트부터 시작하여 피요한 도구들을 설치하고 일일이 설정하는 것이 정석이지만, 리액트 입문자에게 이 과정은 좀 골칫덩어리입니다. 리액트를 배우기도 전에 개발 도구 설정을 익히느라 시간을 투자해야 합니다. 따라서 초반에는 복잡하게 설정하는 부분을 모두 생략하고, 바로 리액트 프로젝트를 만들수 있는 create-react-app 도구를 사용합니다. 이 도구를 사용하면 프로젝트 핵심 기능들의 설정을 미리 완료한 채 리액트 프로젝트를 만들 수 있습니다.
$yarn global add creat-react-app -- macOS에서의 명령어
npm install -g create-react-app -- windows cmd창에 입력
5. 프로젝트 생성
프로젝트를 만들 때는 create-react-app <프로젝트 이름> 명령어를 사용합니다. 터미널을 열어서 다음 명령어를 입력합니다. 이 작은 1~3분 정도 소요됩니다.
create-react-app hello-react
6. 프로젝트 서버 실행
리액트 프로젝트를 만들면 npm start 명령어로 프로젝트 개발 서버를 실행할 수 있습니다. 개발 서버는 포트 3000번으로 열리며, 파일을 수정할 때마다 프로젝트를 다시 빌드하고 웹 브라이저를 리로딩합니다.
cd hello-react -- hello-react 폴더로 이동
npm start -- 실행
∇ 초기 프로젝트 페이지
