리액트 TODO 리스트 만들기 : #1 리액트 설치와 셋팅

https://nodejs.org/en/

Node.js

사이트 접속해서 제일 최신 버전 다운로드 !

 

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

편집기는 Visual Studio Code 를 이용할 것이므로 사이트 접속 후 다운로드 !

 

 

 

원하는 경로에 원하는 폴더명으로 생성 한다. 저는 React Class 로 했습니다.

 

 

Visual Studio Code 를 열고 File > Open Folder 를 통해 위에서 만든 폴더를 열어줍니다.

 

 

리액트 프로젝트 생성을 위해 Terminal > New Terminal 을 통해 새 터미널 창을 엽니다.

 

 

터미널 창에 npx create-react-app blog 입력 

blog = 생성할 프로젝트 명

npx create-react-app = 리액트 셋팅이 다 된 boilerplate 만들기 쉽게 도와주는 라이브러리

 

# # ['npx' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다] 오류가 발생했다면! ##

Ctrl + Shift + P 를 눌러 검색창을 띄운후 terminal: select default profile 를 검색.

 

Command Prompt 로 설정하고 Visual Studio Code 를 종료했다가 다시 열어주면 된다. 그리고 다시 npx~~ 입력!

 

 

 

 

y 를 입력하라하면 y 입력 후 설치가 완료된다.

 

 

설치가 완료됐으면 File > Open Folder 해서 위에서 만들어준 폴더를 다시 선택해준다.

그럼 이제 코딩 할 준비 완료

 

 

터미널 창 하나를 띄워주고, 이렇게 나와야 정상적으로 된것이다.

 

 

터미널 창에 npm start 를 해서 미리보기를 띄워보자.

브라우저가 자동으로 열리면 해당 창이 뜰 것이다.

브라우저가 자동으로 안열리면 크롬 브라우저 설치 바람!

 

 

App.js > 메인페이지에 들어갈 HTML 을 쓰는곳

 

public > index.html 이 메인페이지

 

App.js 를 index.html 에서 그려준다.

 

node_modules : 라이브러리 모은 폴더

public : static 파일 보관함

src : 소스코드 보관함

package.json : 설치한 라이브러리 목록, npm 으로 설치할때마다 여기 기록됨