[리액트] 초기 세팅

나경·2024년 7월 9일
0

시작할 때

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

실행화면 이렇게 아무것도 없는 흰 창이 뜨면 성공이다!

0개의 댓글