[STYLED COMPONENTS] styled-components project

학습일 : 2023. 03. 27

---

 

새로운 리액트 프로젝트를 생성하며

이번에는 Styled-component 를 사용해보고자 한다.

시작!

 

---

 

<create-react-app 설치 + 프로젝트 생성 + 깃허브 연동>
cmd 창에 npx create-react-app 만들프로젝트명 입력

(만약 이미 만들어진 폴더 안에서 cra를 설치해주고 싶다면 터미널에 바로 npx create-react-app . 명령어를 실행하면 된다)

생성된 프로젝트 폴더를 찾고 VSC에서 열어줌
 F1 -> gitclone 클릭 ->  깃허브에 미리 만들어 놓은 repo 클릭해서 연동

 

 

 

<필요없는 파일 + 필요없는 코드 지우기>
App.js, index.js 빼고 파일을 다 지워준다 (src 폴더 내에 있는 파일만)

파일 속 필요없는 코드를 지워 주면 아래와 같다.

 

<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>

function App() {
  return null;
}

export default App;

<styled-components 설치>
터미널에 npm i styled-components 엔터
하면 설치가 완료된다

 

 

 

 

 -준비 끝-