[react] 리액트 시작하기

기본적으로 node.js 와 vscode 에디터가 있다는 전제 하에 진행!

node package modules을 사용해야하기 때문에 node.js가 필요하다.

 

작업용 폴더 하나 생성한 후 터미널에 아래 명령어 입력하기

npx create-react-app 프로젝트명

이번 프로젝트는 블로그랍니다.

그래서 npx create-react-app blog로 ㄱㄱㄱ

모든 설치가 끝난 후 폴더를 보면 자동으로 프로젝트 폴더가 생성이 되어있다

 

 

그 폴더를 vscode로 가져가서 오픈! 

blog 폴더가 최상위 폴더여야한당 안그러면 명령어 입력시 오류들이 나당

이처럼 blog라 잘 뜨면 성공

 

그리고 프로젝트 화면ㄴ을 실시간 미리보기로 보고싶으면 terminal에서 아래 명령어 입력!

npm start

 

화면이 뜬 후 텍스트를 수정해보면 바로바로 바뀌는걸 확인해볼 수 있을것이다!

 

 

자동으로 생성된 프로젝트의 파일들을 설명해드리자면,

 

*package.json : 프로젝트 정보 (라이브러리 설치ㅣ시 자동으로 작성됨)

*node_modules 폴더 : 라이브러리 소스 코드 보관함 -> 건들 ㄴㄴㄴ (에러날거에요)

*public 폴더 : static파일 보관한 (htlm, 이미지 등)

*src 폴더 : @@@젤 중요@@@ 우리가 작업할 폴더. App.js가 메인이다

→ 어케 js파일인데 화면에 뜨지? 싶은데  public에 있는 index.html에서 app.js를 집어넣고있기 때문에 가능하다.

→ 그 작업은 index.js에서 이루어지고 있다