React 리액트 초기 설정 네비 페이지화 기초 세팅 / 리액트 앱 생성

😎리액트 앱 생성

create-react-app my-app

터미널에서 리액트 앱을 생성 합니다.

매번 하는 실수지만 전 항상 npm create-react-app my-app

npm을 앞에 붙여서 오류를 냅니다.

 

 

😎 App 실행

npm start

😎 App.js 정리

 

App.js 파일에 return 코드 싹 날리셔야합니다.

 

😎 네비 생성

App.js

import React from "react";
 
//npm install react-router-dom --save
import {
  BrowserRouter,
  Route,
  Link,
  Routes
} from "react-router-dom";
import Home from "./view/home/Home";
import Main from "./view/main/Main";
 
 
 
function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/main">Main</Link></li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />}/>
          <Route path="/main" element={<Main />}/>
        </Routes>
      </div>
    </BrowserRouter>
  );
}
 
export default App;

react-router-dom 사용하여 간단한 네비 바 + 화면 분리 를 합니다

 

 

😎화면 생성

기본적 폴더 구조는 이렇게 됩니다.

Home.js

import React from 'react';
 
const Home = () => {
    return (
        <div>
            home
        </div>
    );
};
 
export default Home;

%주의% 매우 기본적인 개념이지만 흔히 하는 실수

components의 파일명 시작은 대문자

cosnt 파일명 과 export defult 파일명 은 같아야 합니다.

 

 

각 메뉴 클릭시 나오는 화면입니다.

 

React Nav 완전 기초 기본 세팅입니다.

실제론 layout을 나눠 Route를 불러와 활용하지만

 

전 이런 리액트 앱 만들어서

stg프로젝트 코드 변경전 

Test나 불안정할수 있는 라이브러리 개발 진행하곤 합니다.