react 설치

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 

 

1. node js 가 안정된 버전인지 확인(node js 공홈)

왼쪽의 안정적 버전인지 확인(2020.1월 기준)

터미널에 아래와 같이 입력하여 node 가 최신의 안정적 버전인지 확인한다. 

node --version

그렇지 않다면 왼쪽의 버튼을 클릭하여 업데이트 해준다.

 

2. vs code 설치 + extension 추가(babel javascript, vscode-icons)

어떤 에디터를 사용하여도 상관없지만 나는 vscode를 사용하였다. 그리고, "babel javascript"이라는 extension을 설치해주었다.

vs code 왼쪽 패널 맨 아래의 extension 버튼을 클릭해준 뒤, babel javascript이라 입력하고 설치해준다.

babel javascript는 변수와 함수, 등등 색을 구분하여 개발을 편리하게 해준다. 또, "vscode-icons"라는 extension을 추가하여 extension마다 다른 icon을 쓸 수 있게 하였다.

 

 

 

3. react 설치

react 공식 홈페이지 문서에 나와있는대로 아래 코드를 차례로 터미널에 입력해준다.

 

npx create-react-app my-app

cd my-app

npm start

성공적으로 설치되었다면 이런 화면이 뜰것이다.

 

my-app이 저장된 경로로 가서 vs code로 open 해준다.

1) 그 후, public 폴더 아래에 있는 파일들 중에서 index.html만 남겨놓고 삭제한다.

2) src 폴더 아래에 있는 파일들 중에서 index.js만 남겨놓고 삭제한다.

최종 파일 구조는 위와 같다.

3)index.html을 열고, head 태그안에 있는 내용을 title 태그 안에 있는 부분만 빼고 지워준다. 그리고, body 태그 안에 있는 부분 중에서 id가 root인 div만 빼고 지워준다. 최종 내용은 아래와 같다.

이후, app이 생성되면 id가 root인 div 아래로 삽입된다. div 태그 아래에, 아래 코드를 넣어서 script를 연결해준다.

<script src="../src/index.js" type="text/jsx"></script>

4) index.js를 열고 react와 react-dom을 import 하는 부분만 빼고 지워준다.

5) 그 후 아래 코드를 입력해준다.

ReactDOM.render(
    <h1>Hello World!</h1>,
    document.getElementById("root")
);

6)크롬에 가서 localhost:3000로 접속해주면 hello world가 잘 출력된 것을 볼 수 있다.

 

 

* 다운받으면 좋은 구글 확장 extension : React Developer Tools