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


바로 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가 루트 컴포넌트이다.. 다른 컴포넌트를 생성한 후, 이 곳에서 불러다 사용할 것이다.

 








Posted by sungho88
,