DEV Community

loading...

React #1: Hello, Bulma

ninankara profile image Ninan Kara Updated on ・1 min read

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
Enter fullscreen mode Exit fullscreen mode

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

Install Bulma package

npm install bulma
Enter fullscreen mode Exit fullscreen mode

instal node-saas

npm install node-sass
Enter fullscreen mode Exit fullscreen mode

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"> 
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode
  • 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"));
Enter fullscreen mode Exit fullscreen mode

banner

Link

Bulma
CRA Boilerplate
Project Github

Discussion

pic
Editor guide