React Components & Bulma

Introduction

Do you know Bulma, a very nice alternative to Bootstrap as a CSS framework? We are going to create a simple website with Bulma and React!

Requirements

• Fork this repo
• Clone this repo

Submission

• Upon completion, run the following commands

  git add .
  git commit -m "done"
  git push origin master
  

• Create Pull Request so your TAs can check up your work.

Setup

First let's get set up:

Run

create-react-app lab-bulma-react || my-app-name
cd lab-bulma-react || my-app-name
npm start

The strcuture of the files should be similiar to the following:

├── package-lock.json
├── package.json
├── .gitignore
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js

In your index.js, have ReactDOM render just the App component:

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Bulma installation

To get Bulma, install the npm package:

$ npm install bulma

Now import the Bulma CSS in your index.js:

import 'bulma/css/bulma.css';

Instructions

Iteration 1 | Navbar Component

Create a Navbar component, very simple, that displays a link to "Home", "Login" and "Signup" like in the following example:

To help you, you can use the code from the Bulma Transparent Navbar.

In the end, you will just need to write Navbar in your JSX to display your navbar.

Iteration 2 | FormField Component

Now it's time to create a new component FormField we will use multiple times in the future.

// JSX version
<FormField label="Name" type="text" placeholder="e.g Alex Smith" />
<FormField label="Email" type="email" placeholder="e.g. [email protected]" />

<!-- What is rendered in the DOM -->
<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="e.g Alex Smith">
  </div>
</div>
<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="e.g. [email protected]">
  </div>
</div>

What is visually rendered

Iteration 3 | CoolButton Component

The goal is to create a component called CoolButton that creates a <button> with the nice Bulma classes.

You will find the Bulma buttons documentation here: https://bulma.io/documentation/elements/button/

// JSX version
<CoolButton isSmall isDanger className="is-rounded my-class">Button 1</CoolButton>
<CoolButton isSmall isSuccess>Button 2</CoolButton>

<!-- What is rendered in the DOM -->
<button class="button is-rounded my-class is-danger is-small">Button 1</button>
<button class="button is-small is-success">Button 2</button>

What is visually rendered

Because there are many cases to code, focus on the following classes: is-primary, is-success, is-danger.

If you need any help, you can have a look how to take the content between an opening tag and a closing tag: Children in JSX

Change your Navbar component so it uses the CoolButton component for the "Login" and "Signup" buttons.

Bonus

If you want, you can do all the cases by using the following object:

{
  isActive: 'is-active',
  isBlack: 'is-black',
  isCentered: 'is-centered',
  isDanger: 'is-danger',
  isDark: 'is-dark',
  isFocused: 'is-focused',
  isGrouped: 'is-grouped',
  isHovered: 'is-hovered',
  isInfo: 'is-info',
  isInverted: 'is-inverted',
  isLarge: 'is-large',
  isLight: 'is-light',
  isLink: 'is-link',
  isLoading: 'is-loading',
  isMedium: 'is-medium',
  isOutlined: 'is-outlined',
  isPrimary: 'is-primary',
  isRight: 'is-right',
  isRounded: 'is-rounded',
  isSelected: 'is-selected',
  isSmall: 'is-small',
  isStatic: 'is-static',
  isSuccess: 'is-success',
  isText: 'is-text',
  isWarning: 'is-warning',
  isWhite: 'is-white',
}

Iteration 4 | A Signup Page

Create a Signup component that contains:

• A Navbar
• A form with
  • A FormField for name
  • An FormField for email
  • A FormField for password
  • A CoolButton for submitting the form

Iteration 5 | Bonus

Before continuing, ask for feedback from one of your teachers, they will give you a feedback about what you've done.

Then, you can:

• Refactor your code
• Create a Container component (for the class "container")
• Create a Message component (see the following explanation)

Message Component

Now, we are going to create Message component. You can find the documentation on Bulma's website: https://bulma.io/documentation/components/message/

// JSX version
<Message isInfo title="Hello World">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>.
</Message>

What is visually rendered

Happy coding! ❤️