react 생성하기

1. 프로젝트 폴더를 만들고 shift+우클릭 후 

여기에 powershell 창 열기 클릭!

2.  npx create-react-app <프로젝트이름>

create react 라는 라이브러리를 이용해 프로젝트 생성을 쉽게 해준다.

이 라이브러리를 이용하기 위해서는 npm을 사용해야하니까 node.js 설치해줘야함

성공적인 생성..!

 

3.  vscode에 해당 폴더 불러오기!

 

4. 미리보기 띄우기는 터미널에서 npm start

Terminal > new terminal 클릭하고 

터미널에 npm start를 입력해주면 된다.

미리보기가 잘뜬당

---

<폴더들 설명>

node_modules

프로젝트 구동에 필요한 모든 라이브러리들의 소스코드를 모아놓은 폴더

 

public 폴더 

static 파일을 모아놓는 곳

html, 이미지 파일 등 잠깐 보관하고 싶을때 쓰는 파일

 

src 폴더

제일 중요함 소스코드 보관함!

여기서 코드를 짠다~~ 

 

package-lock.json

 

package.json

전체 프로젝트에 대한 정보가 담겨있다. 

 

*App.js에다 html코드를 짜도 되는이유!*

App.js에 있는 html들을 index.js가 public폴더의 index.html(메인페이지)에 집어 넣어주기 때문!

 

package.json 

프로젝트 정보들을 쭉 기입해둔곳! 

 

 

 

---

*다른 방법*

프로젝트를 만들려는 빈 폴더에 터미널을 열고,

npm init react-app <프로젝트이름> 을 입력해주면 자동으로 리액트  프로젝트를 쉽게 만들어준다! 

 

완성!

 

---

* 또! 다른 방법*

npx create-react-app <프로젝트 이름>

 

npm으로 하는 방법과 npx를 이용해서  만드는 방법...무슨 차이가 있는지 알아봐야겠다..!