[React] 리액트 프로젝트 설치, 세팅

 

🔎 리액트 프로젝트 설치

 npx create-react-app 폴더명

🔎 불필요한 파일 삭제

1. index.js와 App.js만 두고 삭제
2. 해당 파일에서 import 구문들도 함께 삭제

 

🔎 styled component 설치

npm i styled-components

 

🔎 리액트 프로젝트 폴더로 진입 후 웹브라우저 실행

cd 폴더명
npm start

 

🔎 styled components를 사용하는 이유

1. 사용하지 않는다면 style을 하나하나 들여다봐야함
2. styled components를 사용하면 div를 여러번 지저분하게 사용하지 않을 수 있다.
3. styled components가 자동으로 class명을 만들어준다.

 

🔎 styled component css 적용 시 자동완성  확장프로그램

• vscode-styled-components