React App을 생성해보자.

React가 자바스크립트의 라이브러리로, 그냥써도 좋지만

더 간편하고 효율적인 코딩환경을 지원하는 기술이 있다.

 

 

 

리액트 팀에서 지원하는  Creat-React-App 기능이다. 

 

 

얻을수 있는이점

1.코드의 변경이있으면  브라우저 화면에 컴파일없이 즉시 반영을 해준다.

2.리액트에서 자동으로 서버를켜줌

3.빌드도 지원해줌.

4. 테스트도 지원해줌 

등등..

 

 

 

즉시 사용해보자.

 

우선 사전작업으로 Node.js라는걸 설치해야한다.

npm이란 패키지 관리자를 사용하기위함이다.

 

https://nodejs.org/en/

Node.js

 

여기서 LTS버전을 다운받는걸 추천한다.

 

 

설치를 끝냇으면 명령프롬포트를 꺼내서 확인을해보자

 

npm -v 로 버젼을 확인하는 코드를 입력해보자.

 

 

 

npm설치가 완료했다면,

 

설치하고 싶은 경로에  npm create-react-app  {이름}  을 입력하자.

 

바로 VScode로 열어보고싶으면  code {이름} 을 입력합시다.

 

 

처음 들어올때 화면입니다.  

우선 package.json을 까보면

 

리액트에서 깔아준 스크립트가 등장합니다.

 

"start" , "build" , "test" , "eject"를 기본 지원합니다.

 

한번 start로 리액트를 실행해봅시다.  해당 프로젝트 터미널을 열고 , npm start를 입력합니다.

 

 

이렇게 화면이 잘 나오면 성공!

 

덤으로 다른 하나도 테스트해봅시다. 

아까 말한 이점중에,  프로젝트내에서 변경점이 있으면 바로 화면에 반영이된다고 하였는데,

이것도 테스트해봅시다.

 

 

이렇게 설명부분 코드를 바꾸고 Ctrl+S 로 반영을 해주고 난뒤,

켜둔 브라우저를 보면 즉시 반영되는 모습을 보면 성공입니다.

 

리액트가 알아서 컴파일을 자동적으로 해준다.

 

리액트 앱을 만들어보았습니다. 

이제부터 리액트의 문법을 사용해서 하나의 어플리케이션을 만들어 볼 예정입니다!