React

리액트 설치 및 파일 설명

해말그미 2023. 3. 24. 15:20

폴더 만들고

터미널에서 npx cteate-react-app 프로젝트명(npx는 프로젝트 생성해주는 명령어 제공. 즉, react 프로젝트를 한 개 만든 것임)

방금 만든 리액트 프로젝트 폴더

 

3. 에디터에서 file -open folder로 'blog'(만든 프로젝트)폴더 오픈

만든 프로젝트 명이 잘 떠야 한다.

 

npm start하면 미리보기 화면을 띄우는 것이 가능하다.

미리보기 화면

<프로젝트 파일들 설명>

node_modules 폴더 : 프로젝트 구동에 필요한 모든 라이브러리 코드 보관함(건들일 없다)

public폴더 : static 파일 모아 놓는 곳(이미지, html 파일들 잠깐 보관해 놓는 곳)

src 폴더 : 코드 짜는 곳 (src 에 app.js가 메인 페이지 이다)

=> js파일에 html짜도 되는데 app.js에 있는 html파일들을 index.html이라는 메인 페이지에다가 집어넣어주어서

package.json : 프로젝트 정보(프로젝트명, 버전, 라이브러리 명들)