[React] 📚 리액트 생성 후 필요 없는 것들 정리하기

오늘은 리액트 프로젝트를 생성한 후 필요없는 파일들을 정리해보겠습니다.

 

CRA (Create - React - App) 으로 만든 프로젝트를 사용하겠습니다.

(CRA : 웹팩, 바벨과 같이 리액트 실행에 필요한 패키지를 함께 포함하여 설치해준다.)

 

아래의 명령어로 설치해줍니다. (typescript) (javascript는 --template typescript 를 제거해줍니다.)

npx create-react-app for_blog --template typescript

 

설치를 하고 나면 이런 폴더구조가 생성됩니다.

그리고 필요하지 않은 파일들을 제거해주겠습니다.

• App.css
• app.test.tsx
• App.tsx
• index.css
• logo.svg
• react-app-env.d.ts
• reportWebVitals.ts
• setupTests.ts

를 제거해주세요.

 

그 후 index.tsx를 들어가서 코드를 수정합니다.

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <></>
  </React.StrictMode>
);

이렇게 수정해주면 빈 화면이 나오겠졍!

 

<></> 부분에 컴포넌트들을 넣으면 리액트의 시작입니다 우히히

 

즐거운 코딩하세용