[React] 리액트 프로젝트 생성 및 초기 셋업하기 (정리)

1. CRA boilerplate로 프로젝트 생성

npm ,yarn 등 입맛대로
yarn create react-app projectName

 

 

2. 지울 거 지우기

App.css 

App.test.js

logo.svg

reposrtWebVital.js

setupTests.js

 

 

2-2 App.js / index.js 내부 안쓰는 코드 정리 (방금지운것들, return문 안쪽 등)

 

 

2-3 App.js / index.js는 jsx문법이 들어가므로 jsx로 확장자 변경해주는 편

 

 

3. 폴더 구성 (마음대로)

assets/

components/ 

pages/

shared/ 

 

4. 절대 경로 설정 (해도되고)

루트폴더 아래에 jsconfig.json 파일 생성

{
	"compileOptions": {
    	"baseUrl": "src"
    },
	"include": ["src"]
}

 

5. index.html에서 타이틀 변경해주기

<title> 내 프로젝트 </title>

 

 

6. 설치할 라이브러리들 설치 해주기

yarn add react-router-dom styled-components  등등등

 

 

7. 전역스타일링 (편리한 css를 위한 것들 ?)

reset.css 설정 / box-szing 등
아래 포스팅으로 정리 잘해놓았다!!

2023.12.14 - [react] - [React] 프로젝트에 global style 설정 (styled components) + reset style

 

8. 커밋한번 해줘요~

git add .

git commit

 

 

9. 프로젝트 진행 ~

라우터 세팅 등 ~

💡 라우터 세팅 중 꿀팁 : 모르는 URL 입력시 홈으로 리다이렉팅 하는 법

replace 를 써야 이상한 경로 썼을 때 뒤로가기 눌러도 무한루프 안걸리고 뒤로 가짐

<Router path="*" element={<Navigate replace to="/" />} />