hello react

yarn global add create-react-app

리액트를 사용하려면 node가 필요하다. 

나의 os는 window 이므로 window만 사용할 것이다.

물론 vscode를 사용할 것이고 여기서 사용하는 터미널을 사용할 것이다. 

 

vsc 실행

기본적으로 나는 sourcetree를 이용해서 git에 올리고 있다. ( 작은 것도 일단 올리고 나면..)

새로운 폴더를 열었다 개인적으로는 studyreact라는 폴더를 만들었다.

 

터미널에서 새로운 터미널 열기

 

새로운 터미널을 열어서 리액트를 시작할 것이다. node.js를 설치했다면 npm이 자동 설치될 것이다.

(npm이란 모듈을 패키지로 만들어 관리하는 것이다. 자세한 것은 생략한다.)

 

npm을 이용해서 yarn을 설치해 사용할 것이다.

(yarn은 npm보다 안정성과 속도 높기도 하며 권장된다고 여기저기서 본 것 같지만... 뇌피셜이기에 자세한 것은 더 찾아봐야겠다.)

 

설명은 이 정도로 끝내고 이제 터미널 창을 열면 아래와 같은 화면이 나온다. (경로는 자세히 볼 필요가 없다.)

터미널 실행후.

yarn을 설치하기 위해 아래와 같은 명령어를 입력

yarn 설치 명령어.

yarn이 다설치 되었다면 이번엔 yarn의 프로젝트를 만들어야 한다. 아래와 같은 명령어를 입력

yarn init

 

(자세한 것은 나중에 찾아보기로 하고 일단은 그냥 넘어가도록 하기 위해 입력하지 않고 enter를 누르자.)

계속넘어가다면 아래와같이 성공한다.

 

이제 yarn을 이용해 프로젝트를 만들었다면 이제 react를 만들어주는 모듈을 설치하자

yarn global add create-react-app

이제 거의 다했다. create-react-app을 이용해 react 프로젝트 만들면 아래와 같이 성공했다고 나온다. 

(create-react-app은 바벨과 웹팩의 설정이 되어있어 쉽게 리액트를 만들어줄수있다)

 

yarn start

명령어를 실행하면 아래와 같이 리액트 화면을 볼 수 있다.