[React] create-react-app으로 리액트 프로젝트 생성하기

1. node.js 최신 설치

2. npx create-react-app blog

터미널에 npx create-react-app blog하여 blog라는 이름의 리액트 프로젝트를 생성한다.

create-react-app은 리액트가 셋팅이 완료된 환경이다.

npx 명령은 node.js가 설치되어 있으면 할 수 있는 명령이다.

 

3. npm start  || yarn start

미리보기 띄워보고 싶으면 npm start를 입력한다.

yarn은 1.xx버전을 설치하는 것이 좋다. (인터넷에 yarn1로 검색하면 됨!)

yarn이 npm이나 npx보다 더 빠르게 설치해주는 고마운 툴이다!

설치 후에 yarn --version으로 잘 설치되었는지 확인하면 된다. 👍🏻

 

4. App.js

메인페이지에 들어갈 HTML을 짜는 곳이고,

public/index.html이 실제 메인페이지이다.

App.js에 있는 것을 index.html에 갖다 넣는다고 생각하면 됨. 넣는 역할은 index.js에서 진행한다.

 

5. node_modules

라이브러리 모은 폴더. create-react-app을 실행하기 위해서는 수많은 라이브러리들이 필요한데, 여기에 모아져있다.

 

6. public

웹 사이트의 static 파일 있는 곳. 이미지 파일, text, favicon 파일..

 

7. src

소스코드 보관함. css, js있음

 

8. package.json

내가 설치한 라이브러리명과 버전들을 쭉 모아놓음