Objectives
Create hello world page with ReactJS and Bulma.
Prerequisites
- Have npm package installed
- 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"));
Top comments (0)