1. 사전에 설치해야 하는 툴 두가지
Node.js
VScode
2. vscode에서 폴더생성
(여기서는 폴더명 tc_REACT 로 설정함 )
3. 프로젝트 및 React 설치
vscode에서 아래 명령어 한줄을 터미널에서 입력하면 react가 자동 설치된다.
npx create-react-app 원하는프로젝트명
( 여기서는 npx create-react-app study01 )
조금 기다리면 설치가 완료되고 아까 만들었던 tc_React라는 폴더안에 터미널에서 만들었던 프로젝트명study01이 생성되고 그안에 자동으로 필요한 라이브러리가 생성된 것을 볼 수 있다.
4. 웹화면체크
터미널에서 아래 두줄을 입력 ( cd 이동할프로젝트명 , npm start 실시간웹확인 )
cd study01
npm start
localhost:3000으로 리액트설치시 설정된 웹 초기화면을 확인 할 수 있다.
작동원리 App.js가 ----(index.js)를 통해 ---> index.html 메인페이지에서 표현
5. React 구조 설명
node_modules : node.js 설치시 생성되며, 수 많은 라이브러리를 모은 폴더
public : static 파일 보관
src : 실질적 코드입력
package.json : 내가 설치한 라이브러리명이 적혀있다.