[React] React 설치 및 시작하기 (로컬 개발 환경 만들기)

리액트는 자바스크립트 라이브러리 중에 인기 있는 라이브러리입니다.

리액트를 사용하시려면 사전에 설치되어 있어야 하는 게 몇 가지 있습니다.

 

사전 설치 프로그램과 리액트 시작하는 방법에 대해서 알아봅니다.

 

 

리액트 설치 전

 

리액트를 설치하려면 먼저 nodejs, npm이 필요합니다.

nodejs.org/ko/

Node.js

위 링크로 들어가셔서 nodejs를 먼저 설치하셔야 합니다.

 

두 가지 버전이 있는데 왼쪽은 안정적인 버전, 오른쪽은 최신 버전으로 새로운 기능이 포함되어 있지만 불안정할 수도 있습니다.

다운로드하여 설치합니다.

설치 후에 cmd 명령 창에 node를 입력하면, 아래처럼 나오면 성공적으로 설치된 것입니다.

저는 이전에 설치했었기 때문에 버전이 12.16.3 입니다.

 

nodejs를 설치하셨으면, npm은 자동으로 설치됩니다.

cmd 명령 창에 npm -v를 입력하면, 아래처럼 npm 버전 정보가 나타납니다.

 

지금 nodejs를 설치하신다면, npx도 자동으로 설치됩니다.

cmd 명령 창에 npx -v를 입력하면, 아래처럼 npx 버전 정보가 나타납니다.

 

여기까지 확인하셨으면 리액트를 설치하기 위한 준비 단계는 끝났습니다.

 

 

리액트 설치 및 시작하기 (로컬 개발 환경 만들기)

 

리액트 홈페이지의 Docs를 이용하셔도 됩니다.

저는 npm으로 리액트를 설치하면 로컬 유저 폴더 쪽으로 패키지가 설치되는 이슈가 있었기에 npx로 진행했습니다.

 

cmd 명령 창을 열고 리액트를 설치하고자 하는 상위 폴더로 이동합니다.

그리고 새로운 리액트 애플리케이션을 생성합니다.

명령어는 아래와 같습니다.

 

> npx create-react-app [생성할 폴더명]

 

설치가 끝난 화면입니다. 생성된 폴더로 들어가서 아래의 명령어들을 입력하면 해당 설명과 같이 동작합니다.

 

 

위 화면의 마지막의 제안과 같이 test 폴더로 들어가서 npm start를 입력해보겠습니다.

 

> cd test > npm start

 

아래 화면이 등장하면 성공적으로 설치되고 시작된 것입니다.

 

 

 

어러 블로그와 리액트 공식 홈페이지에서 리액트 사용법을 배울 수 있습니다.

reactjs-kr.firebaseapp.com/

React – A JavaScript library for building user interfaces