React #6 (CSS - bootstrap)

 

 

 

※ 사전 작업

프로젝트 생성

npx create-react-app ch03_1 --template typescript

 

패키지 설치

npm i chance luxon
npm i -D @types/chance @types/luxon

 

 컴포넌트 파일 만들기

// ch03_1/src/pages 디렉토리 안에 들어가는 컴포넌트 파일 생성 (폴더 없으면 만들기)

Bootstrap.tsx
Icon.tsx
Style.tsx
UsingIcon.tsx
UsingIconWithCSSClass.tsx

 

 

템플릿

export default function ModifyMe() {
  return <div>ModifyMe</div>;
}

 

 

 src/App.tsx

import "./App.css";
import Bootstrap from "./pages/Bootstrap";
import Icon from "./pages/Icon";
import Style from "./pages/Style";
import UsingIcon from "./pages/UsingIcon";

export default function App() {
  return (
    <div>
      <Bootstrap />
      <Icon />
      <Style />
      <UsingIcon />
    </div>
  );
}

 

 

bootstrap을 사용하기 위해서는 세팅을 해줘야 한다. (파일 다운로드 x)

 

https://getbootstrap.com/docs/5.3/getting-started/download/

Download

 

위 링크로 가서 link href~ 부분을 복사해서 아래처럼 붙여 넣는다.

 

/public/index.html

 

준비 완료.

 

 

 

간단하게 폼 형식으로 실습

 

src/pages/Bootstrap.tsx

export default function Bootstrap() {
  return (
    <form>
      <div className="mb-3">			// margin-bottom : 3만큼
        <label htmlFor="exampleInputEmail1" className="form-label">
          Email address
        </label>
        <input type="email" className="form-control" id="exampleInputEmail1" />
        <div id="emailHelp" className="form-text">
          We'll never share your email with anyone else.
        </div>
      </div>
      <div className="mb-3">
        <label htmlFor="exampleInputPassword1" className="form-label">
          Password
        </label>
        <input
          type="password"
          className="form-control"
          id="exampleInputPassword1"
        />
      </div>
      <div className="mb-3 form-check">			// form-check 속성
        <input
          type="checkbox"
          className="form-check-input"
          id="exampleCheck1"
        />
        <label htmlFor="exampleCheck1" className="form-check-label">
          Check me out
        </label>
      </div>
      <button type="submit" className="btn btn-success">		// btn-success 스타일
        Submit
      </button>
    </form>
  );
}