React 기초 :: 01 작업환경 구축 및 시작하기

---

01  React 기초 :: 작업환경 구축 및 시작하기

---

리액트를 시작하기 앞서, 다운로드하여줘야 하는 것이 있습니다.

 

1. 소스 코드 에디터(Visual Studio code 추천)

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

다른 에디터를 사용해도 무관하지만,  비쥬얼 스튜디오 코드를 추천드립니다 :)

 

 

2. Node.js 

https://nodejs.org/ko/download/

Node.js는 웹브라우저 환경이 아니여도, 자바스크립트를 사용하여 연산을 할 수 있게 해 주기 때문에 꼭 받아줍니다!

 

3.yarn

https://classic.yarnpkg.com/en/docs/install#windows-stable

Yarn

npm은 라이브러리의 개수가 많으면 속도가 저하되기 때문에 yarn을 설치해줍니다.

 

 

[ 프로젝트 생성 ]

비쥬얼스튜디오코드 다운로드가 끝났다면,

확장에서 Reactjs code snippents을 다운로드하여줍니다.

이것을 설치하게 되면 React 관련 템플릿을 단축키로 빠르게 작성할 수 있게 됩니다.

 

 

우선, 작업할 폴더를 열어줍니다.

파일 > 폴더 열기 > 작업 폴더 선택

 

그다음 터미널을 열어줍니다.

기본으로 열려있을 텐데, 혹시 터미널이 열려있지 않는다면

상단의 터미널 > 새 터미널을 눌러 활성화시켜주세요.

 

 

터미널에 yarn create react-app 프로젝트명(폴더명)을 적어줍니다.

저는 예시로 한글로 적었지만, 영문으로 적어주셔야 하고 대문자는 불가합니다 :)

 

그럼 이렇게 리액트가 다운받아집니다 :)

 

 

다운로드가 끝나면 cd(폴더이동) ex1(프로젝트명)을 눌러서 

<react/프로젝트명>이 되도록 해주시고,

yarn start를 입력해주시면 작업환경 구축이 끝납니다!

 

 

완료되면 자동으로 React App이 열리고

작업환경 구축이 끝났습니다!

 

다음은 리액트 기초 문법과 구조에 대해 알아보겠습니다:)