[React] 02) 리액트(React) 설치 방법 및 구조

리액트를 간단히 설치하는 방법이 존재한다.

바로 create-react-app을 사용하는 것이다.

사이트로 들어가서 살펴보자.

create-react-app을 설치한 뒤

(설치를 하지 않았을 경우 찾을 수 없다<command not found> 에러남)

 

$npm install -g create-react-app 

//위에 한 줄이면 설치끝!

설치가 정상적으로 되었다면 create-react-app을 통해 리액트 프로젝트를 만들수 있게 되었다.

$create-react-app test

// 이 명령어를 입력하면 해당 경로에 test라는 폴더를 생성 후 그 안에 리액트를 설치하게 된다.

$create-react-app .  

// 폴더를 굳이 생성하고 싶지 않다면 이렇게 .을 입력한다.

// 이렇게 하면 다른 디렉토리 생성 없이 그 위치에 세팅된다. 

$cd test

// 이 명령어로 설치된 test 폴더로 이동한다.

// 만약 create-react-app . 으로 했다면 안 해도 된다.

$npm start

// 리액트 프로젝트를 실행하는 명령어다.

그러면 웹페이지가 자동으로 열리며, 페이지가 하나 뜬다. 만약 안 뜨면 주소창에 

http://localhost:3000/

을 입력해보자. 기본 포트가 3000이기 때문에, Express.js에서 Port를 바꿔줘야한다. 

얘도 기본 포트가 3000이기 때문이다.

에러없이 문제없이 진행했다면 웹 브라우저 화면에 리액트 로고 및  글자가 뜬다.

그럼 설치는 성공이다!

감사하게도, 설명도 나온다.

시작하려면 

src/App.js를 수정하라고 한다.

구조는 다음과 같다.

App.js가 루트 컴포넌트이다.. 다른 컴포넌트를 생성한 후, 이 곳에서 불러다 사용할 것이다.