[React] React App 만들기

◈ Create React App

우선 우리는 React를 사용하기 위해 누군가가 만들어놓은 패키지를 설치해줄 것이다. 

부수적인 패키지들을 설치하지 않고 한 번에 패키지들이 묶여있어 이미 세팅이 완료된 패키지를 Boiler Plate이라고 한다.

따라서 우리는 Create React App이라는 Boiler Plate을 사용해 리액트 어플리케이션을 만든다.

 

Vscode의 터미널에서 npx를 설치해 줄 것이다. 이때 npx란 설치돼있지 않은 패키지를 딱 한번만 사용하고 싶을  때 사용한다.

npm install -g npx

npx가 설치되었다면 준비 끝!

 

이름이 reactexam1이라는 프로젝트를 만들어주기 위해 터미널에 명령어를 입력한다.

npm create react-app reactexam1

3~5분 정도 기다리면 프로젝트가 만들어진다.

 

터미널에 npm start를 입력하면 웹 브라우저에서 우리가 만든 프로젝트를 볼 수 있다.

 

App.js로 들어가서 내용을 수정해보자.

내용을 저장해서 보면 웹 브라우저가 수정된 것을 볼 수 있다.

 

¿ 어떻게 동작하는 것일까? 

→ 리액트 앱이 실행되면 src 디렉토리 밑에 index.js가 실행 되면 index.html 아래에 있는 id가 root인 div 아래로 App.js안에 있는 App 함수가 리턴하는 값들이 들어간다.

 

+ React는 HTML과 javascript의 기능을 합쳐놓은 jsx 문법을 사용한다.

javascript의 변수나 함수 등을 HTML에 포함해서 사용할 수 있도록 고안되었다.