React #1: Hello, Bulma

Objectives

Create hello world page with ReactJS and Bulma.

Prerequisites

1. Have npm package installed
2. Have IDE (for me Visual Code)

Steps

Generate react project with CRA (create-react-app) tool

npx create-react-app my-app

run npm start to check whether the boilerplate is installed correctly.

Install Bulma package

npm install bulma

instal node-saas

npm install node-sass

Delete/ clean CRA boilerplate

delete every file under /src/ file except index.js.

Import Bulma and FontAwesome library

• First, open index.js, delete unused import header.
• Second, open index.html under /public/ folder, add

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> 

Hello, Bulma!

• create new folder named component under /src/ folder
• create new file, Banner.jsx
• add following script

import React from "react";
import "bulma";

class Banner extends React.Component {
  render() {
    return (
      <section class="hero is-primary is-fullheight">
        <div class="hero-body">
          <div class="container has-text-centered">
            <h1 class="title">Hello, Bulma!</h1>
            <h2 class="subtitle">This is react app feat. Bulma</h2>
          </div>
        </div>
      </section>
    );
  }
}

export default Banner;

• render the banner by defining its component in index.js

import React from "react";
import ReactDOM from "react-dom";
import "bulma";
import Banner from "./component/Banner";

ReactDOM.render(<Banner />, document.getElementById("root"));

Link

Bulma
CRA Boilerplate
Project Github