시작할 때
npx create-react-app .
실행하는 명령어이다
npm start
실행하면 빙글빙글 돌아가는 로고가 나오는 이런 화면이 나온다
public 폴더에서 favicon.ico와 index.html을 제외한 모든 파일을 삭제한다
public/index.html의 코드를 지우고 !를 입력하고 엔터를 눌러서 기본 틀을 불러오고 body 태그 안에 id가 root인 div를 하나 만든다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>
src 폴더에서 App.js와 index.js를 제외한 모든 파일을 삭제한다
index.js에서 불필요한 코드를 지우고 아래의 코드만 남긴다
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
app.js에 있는 모든 코드를 다 지우고 rafce를 입력한 후 엔터를 눌러서 아래의 코드로 세팅한다
//app.js
import React from 'react'
const App = () => {
return (
<div>
</div>
)
}
export default App
src폴더 안에 components 폴더를 만든다 앞으로 이 components폴더 안에 jsx 파일을 만들 것이다
src폴더 안에 img 폴더와 assets 폴더를 만든다
scss를 사용하기 위해 이 명령어를 통해서 sass를 설치한다
npm i sass
설치가 제대로 되었는지 확인하고 싶다면 package.json에 들어가서 sass가 추가되었는지 확인하면 된다
그리고 다시 실행해본다!
npm start
이렇게 아무것도 없는 흰 창이 뜨면 성공이다!