React에서 Bulma CSS를 사용하는 방법

안녕하세요 개발자님, 오늘 섹션에서는 vite 도구와 typescript를 사용하여 Bulma css를 설치 및 설정하는 방법을 살펴보겠습니다. 반응에 bulma css를 추가하기 위해 Bulma 프레임워크용 React 구성 요소를 사용합니다.
view

React js에 Bulma CSS 설치

vite 도구를 통해 반응 프로젝트를 생성합니다.
NPM 사용:

npm create vite@latest

털실로:

yarn create vite

PNPM 사용:

pnpm create vite

다음으로 프로젝트 이름을 지정하고 반응 프로젝트를 선택해야 합니다.

✔ Project name: … bulma-reactjs
? Select a framework: › - Use arrow-keys. Return to submit.
  vanilla
  vue
❯  react
  preact
  lit
  svelte

이제 타이프스크립트를 선택합니다.

✔ Project name: … bulma-reactjs
✔ Select a framework: › react
? Select a variant: › - Use arrow-keys. Return to submit.
  react
❯  react-ts

프로젝트로 이동하고 노드 종속성을 설치합니다.

cd bulma-reactjs
npm install
npm run dev

React Bulma 구성 요소 설치
NPM 사용:

npm install react-bulma-components

털실로:

yarn add -E react-bulma-components

이제 import import 'bulma/css/bulma.min.css'; main.tsx에서.
main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
// import './index.css'
import 'bulma/css/bulma.min.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

App.tsx

import { useState } from 'react';

import { Button } from 'react-bulma-components';

function App() {
  return (
    <div className="App has-text-centered">
      <div className="mt-5">
        <Button color="primary">Primary Button</Button>
        <Button color="success">Success Button</Button>
        <Button color="danger">My Bulma button</Button>
      </div>
      <div className="mt-4">
        <button className="button is-primary is-light">Primary</button>
        <button className="button is-link is-light">Link</button>
        <button className="button is-info is-light">Info</button>
        <button className="button is-success is-light">Success</button>
        <button className="button is-warning is-light">Warning</button>
        <button className="button is-danger is-light">Danger</button>
      </div>
    </div>
  );
}

export default App;

서버를 실행합니다.

npm run dev