리액트 설치

리액트를 설치하기전, node.js 설치가 필요하다.

node.js 설치가 완료되었다면 순서대로 진행해보자.

 

 

npx create-react-app 프로젝트명

본인은 코딩애플 강의를 보고 참고하여 blog라는 프로젝트명을 가진 프로젝트를 만들었다.

성공하면 위와 같은 프로젝트 폴더 구조를 가진다.

App.js가 메인페이지라고 생각하면 된다.

 

 

위의 사진은 node_modules의 디렉토리 구조이다.

구동에 필요한 모든 라이브러리들의 소스코드를 모아놓은 폴더이다. (너무 많아서 사진은 중간에서 잘랐다)

 

 

위의 사진은 public의 디렉토리 구조이다.

html 파일, 이미지 파일등을 잠깐 보관하고 싶을 때 사용하는 곳이다.

static 파일 보관함이라고 생각하면 된다.

 

 

직접적으로 코드를 짜는 곳이다.

App.js가 메인 페이지인데, 여기서 코드를 짜면 index.html로 주입이된다.

(index.html은 위의 public 폴더에 존재한다)

이 기능은 index.js가 담당한다.

 

 

package.json은 프로젝트 설정에 관한 파일이다.