React 설치와 개발환경 셋팅

리액트 프로젝트 생성

자신이 원하는 프로젝트 만들기 원하는 지정 위치로 가서 터미널을 열고 

 

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

 

프로젝트 생성. 에디터에 생성된 리액트 프로젝트를 열어 코드작성하면 됨

 

npx create-react-app으로 프로젝트를 생성한 이유는 html파일을 이용하여 react 라이브러리를 설치해도 되지만 복잡하고 시간이 오래 걸려 creact React App이라는 라이브러리에 도움을 받아 프로젝트 생성

 

npm은 라이브러리를 모아놓은 플랫폼. Node.js를 다운으로 npm도 사용할 수 있음. npm이 설치가 잘 되면 npx 명령어를 사용할 수 있음

 

※ 버전 문제로는 전역설치가 안된다고 오류

npm 제거 -g 생성 반응 앱을 하여 없앤 후 다시 프로젝트 생성

 

※ 프로젝트 이름 설정 오류

프로젝트명에는 대문자와 특수문자 사용않됨. 프로젝트명 소문자로 변경

 

사이트를 브라우저로 미리보기 띄우기

새 터미널을 열음

 

npm start

 

미리보기가 뜸

프로젝트 만들고 미리보기 처음화면

 

프로젝트 파일 

 

node_modules폴더: 라이브러리 코드 보관함

public 폴더: static 파일 모아놓는 곳

src 폴더: 코드 짜는 곳(소스코드 보관함)

               App.js가 메인 페이지

package.json: 프로젝트 정보

               react프로젝트 구동에 필요한 라이브러리도 명시되어있음

 

 

App.js가 js파일인데 메인 페이지인 이유

웹페이지는 Html파일로 이루어져 있어야 함. js 파일에 html을 짜도 브라우저가 잘 띄어줌

App.js에 있는 Html을 public폴더에 있는 index.html이라는 메인페이지에다가 집어넣어달라고 index.js에 말해놓았기 때문