(React.js) 누구보다 쉽게 react.js설치해보기

이번 포스팅은 react.js(쉽게 리액트라고 부를게요) 설치하는 방법과 간단하게 구동하는 방법에 대해서 알아보도록 하겠습니다.

 

react.js란 무엇일까요?

 

=> 컴퓨팅에서 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지 보수된다. 리액트는 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다. 

 

 

리액트 로고입니당

 

 

당연히 js이기 때문에 자바스크립트를 기반으로 하고 있습니다. 그러므로 기본적으로 코딩을 할 수 있는 프로그램들이 필요합니다. vs code같은. 

 

우리는 리액트를 사용할때 얀(yarn)을 사용할 예정입니다.

얀의 설치방법은 일단 얀 사이트에 접속하시면

https://yarnpkg.com/lang/en/

Yarn

여기 메인페이지에서

 

install yarn클릭!

 

클릭을 한다면

 

버전을 확인하신후

Download installer을 눌러서 설치하시면 됩니다.

 

And

 

뷰. js때랑 마찬가지로 node가 설치되어 있어야 합니다.

 

노드 설치방법은 

https://crucifi.tistory.com/50?category=799884

node.js설치방법과 node.js를 이용해서 웹서버만들기

여기 이 글을 참조해서 설치하시면 됩니다. 

 

자 이제 준비가 다 되었다면 설치하러 가볼까요?(설치기준은 윈도 10 64bit입니다.)

 

첫 번째로 노드를 켜주시면 됩니다.

 

윈도 창을 열어서

 

Node.js command prompt입니다.

저것을 켜주시면 됩니다.

 

cd를 누르고 자신이 원하는 경로를 지정하시면 됩니다.

 

킨 후에

 

첫 번째

 

npm install -g create-react-app

 

이것을 프롬프트 창에 적으시고 엔터!!

 

 

두 번째

 

create-react-app 폴더이름

 

create-react-app을 적은 후에 스페이스바를 누르고 자신이 만들고자 하는 폴더 이름을 지정하면 됩니다.

 

그러면 밑의 사진처럼 쭉 자동으로 설치가 돼요.

 

냅두시면 알아서 설치합니당.

 

설치가 완료된다면

 

이렇게 파란색 글씨로 두줄이 나오는데 차례대로 하나씩 복사해서 불어넣기 하면 됩니다.

 

이렇게 yarn start를 입력하고 엔터를 누르면

 

영롱합니다!!!

이렇게 생긴 화면이 나온다면 성공하신 겁니다!!! 축하드려요~~~~

 

다음 포스팅 때는 간단하게 적용하는 코드를 적어서 보여드리도록 하겠습니다

 

긴 글 읽어주셔서 감사합니다.