ReactでのBulma導入方法

npmからBulmaをインストール

$ npm install bulma

Reactでの書き方

className=に続けて、BulmaのCSSのクラス名を指定する。

hello.jsx

import React from 'react';
import 'bulma/css/bulma.css';

const HelloPage = () => {
    return (
        <section className="section">
            <main className="container">                         
                <div className="columns">
                    <div className="column">
                        <div className="content">
                            <h1 className="title is-1">Hello, World!!!</h1>                                                
                            <h2>はじめてのBulma</h2>                          
                        </div>
                    </div>                 
                </div>
            </main>
        </section>
    )
}

export default HelloPage

参考サイト

• ReactでBulma CSSを直接使うのがお気に入り
• Getting started with Bulma