[React] React 작업 환경 설정

1. 도구

• NodeJS
• NVM 
• NPM / Yarn (속도 향상)
• VSCode

 

 

 

2. 프로젝트 생성

1) Create React App

npx create-react-app my-app
cd my-app
npm start

2) 설정 파일

일반적으로 프로젝트를 만들게 되면, 웹팩, 바벨 설정 등 다양한 설정으로 프로젝트가 복잡해지는데 create-react-app으로 프로젝트를 생성할 경우, 모든 설정이 node-modules/react-scripts에 숨어있다. 만약 그러한 설정들을 커스터마이징을 할 경우에는 'yarn eject' 명령어를 수행하면 된다. 단, 한번하고 나면 되돌릴 수 없기에 주의해야한다.

3) VSCode 플러그인

Reactjs code snippets 플러그인을 설치하게 되면 보다 쉽게 함수형 혹은 클래스 형태로 만들어진 컴포넌트를 만들 수 있다.

// 클래스
rcc

// 함수형
rsc