[ React ] 리액트 Window 환경 설치

 

React 란?

프론트엔드 라이브러리 중 하나로 '컴포넌트'에 집중이 되어있는 facebook이 만든 라이브러리이다.

 

자바스크립트가 아닌 JSX 문법으로 작성한 컴포넌트를 여러 파일로 나눠 생성후 이를 한개로 결합해주는 구조다.

 

이 때 컴포넌트를 합쳐주는 Webpack이라는 도구와 JSX 등의 문법을 사용하기 위해 Babel이라는 도구를 사용한다.

​

 

React를 사용하기 앞서 다음 항목들을 설치해야한다.

​

 

1. Node.js

 

위에서 언급한 Webpack과 Babel은 Node.js 기반으로 만들어져있다. 그러기에 Node.js를 필수적으로 설치해야 한다.

 

 

2. Yarn

 

Node.js를 설치할 때 같이 묶여오는 패키지 매니저 도구가 있는데 이를 더 나은 속도로 사용하기 위해 설치한다.

 

 

 

* Node.js 설치

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

다운로드 | Node.js

 

 

 

 

 

* Yarn 설치

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

Yarn

 

 

 

 

 

* Node.js 및 Yarn 설치 확인

명령 프롬프트(CMD) 열어서 확인

> node --version
> yarn --version

 

 

 

 

* Yarn 으로 create-react-app 설치

명령 프롬프트에서 하면 된다.

> yarn global add create-react-app

 

 

 

 

* 사용해보기

명령 프롬프트에서 아래 소스 입력

> create-react-app hello-react

//위처럼 그냥해줘도 되지만 모듈을 명시해 사용도 가능
//npx
npx create-react-app 프로젝트명

//yarn
yarn create-react-app 프로젝트명

 

설치가 진행될건데 성공적으로 마치면 아래처럼 뜬다

 

 

아래소스를 순서대로 입력한다

> cd hello-react
> yarn start

 

 

정상 실행 된 모습