Dapp Styling
Lesson 12 Chapter 3 Module 2
Web development has come a long way since the days of plain html, css, and javascript. While one can still go that route if they wish, many frameworks and libraries have been released that are free to use that make web development and user interface development much quicker and easier. This is especially important if you haven't got a design bone in your body and need a way to make the things you built on the backend functional and appealing.
I certainly fall into that category.
Most of the libraries/frameworks for React are similar in that they provide a set of components and styling that you can use in your apps that cover the most common use cases or provide starting points that you can extend and customize as required. I've used several in the past semantic-ui-react, antd, materializecss, and react bootstrap to name a few of the more popular ones. To the uniformed, these offerings make you look like you have super powers with the speed you can put together a decent, professional, and appealing front end or website.
For our fungible token dapp we're going to use Material-UI.
There's two steps to installing Material-UI so we can start using all its prebuilt goodness to interact with fungible token contract we built on the backend. Both are super easy.
Step 1 - install the package. From the root directory of your project in a terminal, type:
npm install --save @material-ui/core
Step 2 - open up index.html in your root directory and add the following inside the <head></head> section - under the last <link> tag is fine. This loads Google's Roboto font which is used extensively in the components provided by Material-UI.
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap” />
Now, anytime we want to use a component, we simply import it and use it in accordance with the code and examples provided in the Material UI components library. For instance, to include a nicely styled primary button, it's as easy as:
import React from 'react';
import { Button } from '@material-ui/core';
function App() {
return <Button color=”primary”>Hello World</Button>;
}
And now we should have everything we need to make a nice, clean easy to use blockchain Dapp on NEAR.
Next up - App.js - the Dapp control center.