리엑트를 시작하면 초기에 설치를 해줘야할 것들이 있다.

1. CRA 설치

---

• React 프로젝트를 시작하기 위해서는 아래의 명령어를 입력하기

// <react-project> 에는 프로젝트명 입력
// ex. npx create-react-app westudy-front
npx create-react-app <react-project>
//프로젝트명은 임의대로 지정할 수 있다. 

// <react-project> 디렉토리 진입
cd <react-project>

// 로컬 서버 띄우기
npm run start

• npm run start 입력 후 브라우저 접속창에서 http://localhost:3000 로 접속
  

2. react-router 설치

npm install react-router-dom --save 설치하기 

2-1. Router 컴포넌트 구현하기⚡

<예제>

import React from "react";
⚡**import { BrowserRouter, Routes, Route } from "react-router-dom";** 
//<- 입력해주기⚡
import Nav from "./components/Nav/Nav";
import Footer from "./components/Footer/Footer";
import Login from "./pages/Login/Login";
import Signup from "./pages/Signup/Signup";
import Main from "./pages/Main/Main";

function Router() {
  return (
    ⚡<BrowserRouter> <- //라우터 지정 해주기⚡
      <Nav />
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/main" element={<Main />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default Router;

2-2. index.js

ReactDOM.render(<Router /⚡>, document.getElementById('root'));

컴포넌트 대신에 routing을 설정한 컴포넌트()로 변경

3. Sass 설치하기

3-1. 설치

npm install sass --save // 설치하기