Next, let’s create another component for displaying the notes as tiles in the dashboard.
Let’s import Material-UI
npm install @material-ui/core --save
Let’s implement dashboard UI using Material-UI components
.../src/components/Dashboard.js
import React, { Component } from 'react';import Container from './Container';import Grid from '@material-ui/core/Grid';import AppBar from '@material-ui/core/AppBar';import Toolbar from '@material-ui/core/Toolbar';class Dashboard extends Component {constructor(props) {super(props);this.state = {notes: [{title: 'Hello, World',content: "This is your first note",},{title: 'Hey There',content: "This is your second note",},],};}render () {return (<div className="Dashboard"><Grid container spacing={0}><Grid item xs={12} className="NavBar"><AppBar className="AppBar" position="fixed"><Toolbar><h1>My Notes</h1></Toolbar></AppBar></Grid><br /><br /><br /><Grid item xs={12} className="Notes">{ this.state.notes.map(note =><div><h1>{note.title}</h1>{note.timestamp}{note.content}</div>) }<br /><br /></Grid></Grid></div>);}}export default Dashboard;
On adding a simple navbar and some styling, our dashboard now looks like this:
If you have worked with HTML and CSS, you might find that Material-UI seems familiar.
Material-UI has a really impressive documentation. Head over to Material-UI to view their official page. On expanding the side bar, you can see all the different components it provides us.
On the left side, if you click on any link it, it takes you to the documentation page of that component which contains easy to read explanations and examples. Usually, that’s all you’ll ever need. But if you want to make your own customisations, you can go further and take a look at their theming section.
For creating the above dashboard view, we'll look at use the following components:
The Material-UI Grid
Grid is a component which helps you place objects on the screen in a grid according to your needs. If you head over to the grid’s documentation here: Grid, you will be able to see all the different examples of grid layouts which can be made with the component. For this example, we will be using code snippets from the Simple Grid example.
import React from 'react';import PropTypes from 'prop-types';import { withStyles } from '@material-ui/core/styles';import Paper from '@material-ui/core/Paper';import Grid from '@material-ui/core/Grid';const styles = theme => ({root: {flexGrow: 1,},paper: {padding: theme.spacing.unit * 2,textAlign: 'center',color: theme.palette.text.secondary,},});function CenteredGrid(props) {const { classes } = props;return (<div className={classes.root}><Grid container spacing={24}><Grid item xs={12}><Paper className={classes.paper}>xs=12</Paper></Grid><Grid item xs={6}><Paper className={classes.paper}>xs=6</Paper></Grid><Grid item xs={6}><Paper className={classes.paper}>xs=6</Paper></Grid><Grid item xs={3}><Paper className={classes.paper}>xs=3</Paper></Grid><Grid item xs={3}><Paper className={classes.paper}>xs=3</Paper></Grid><Grid item xs={3}><Paper className={classes.paper}>xs=3</Paper></Grid><Grid item xs={3}><Paper className={classes.paper}>xs=3</Paper></Grid></Grid></div>);}CenteredGrid.propTypes = {classes: PropTypes.object.isRequired,};export default withStyles(styles)(CenteredGrid);
If you take a look at the example code, you will begin to understand how this type of grid should be set up.
For our dashboard view, we won’t be needing all these components.
<Grid> </Grid>: This is react’s context feature. It provides a way of passing data through the component tree without having to pass props down manually at every level. Everything inside the Grid element tag would receive the props.
The Grid tag has 2 main attributes (props):
container: The container is the main block which holds other Grid components. The black box which holds all the little components is the container. Container has the attribute spacing which defines how much space to leave between each grid item.
items: items is an attribute of grid which forms the little elements inside of the black box. The items are highlighted in different colors. Boxes with the same color are from the same item.
<AppBar> </AppBar> and <Toolbar> </Toolbar> are used to make the NavBar for our website. The AppBar and Toolbar components are placed on the topmost Grid item element. The position of the AppBar is specified as fixed so that it does not scroll along with the other elements in the window. We want the AppBar displayed even if the user scrolls.
Let us now create a separate component for showing each note.
../src/components/Container.js
import React, { Component } from 'react';import '../css/Container.css';import Paper from '@material-ui/core/Paper';class Container extends Component {render() {console.log(this.props);return(<div className="Note"><Paper className="NotePaper" style={{ background:'lightgreen'}}><br /><span id='title' > { this.props.note.title } </span><br /><span id='timestamp' > { this.props.note.timestamp } </span><br /><br /><span id='content' > { this.props.note.content } </span><br /><br /></Paper></div>);}}export default Container;
We have applied some CSS styling for the Container component
../src/css/Container.css
.Note {padding-top: 20px;padding-left: 20px;padding-right: 20px;}.NotePaper {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);min-height: 100px;}.NotePaper:hover {box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);}#title {padding: 30px 20px 0px 30px;font-weight: bold;font-size: 30px;}#content {font-size: 20px;padding: 0px 20px 20px 30px;}#timestamp {font-size: 10px;padding: 0px 20px 20px 30px;}
We need to make a few changes in our Dashboard component to accommodate the Container component.
../src/components/Dashboard.js
import React, { Component } from 'react';import Container from './Container';import Grid from '@material-ui/core/Grid';import AppBar from '@material-ui/core/AppBar';import Toolbar from '@material-ui/core/Toolbar';class Dashboard extends Component {constructor(props) {super(props);this.state = {notes: [{title: 'Hello, World',timestamp: '11 June 2018',content: "This is your first note",},{title: 'Hey There',timestamp: '22 May 2016',content: "This is your second note",},],};}render () {return (<div className="Dashboard"><Grid container spacing={0}><Grid item xs={12} className="NavBar"><AppBar className="AppBar" position="fixed"><Toolbar><h1>My Notes</h1></Toolbar></AppBar></Grid><br /><br /><br /><Grid item xs={12} className="Notes" style={{ marginTop:'20px' }}>{ this.state.notes.map(note => <Container note={ note } /> )}<br /><br /></Grid></Grid></div>);}}export default Dashboard;
After using Material-UI, the webpage looks like this:
Now let’s take a look at the code,
In Dashboard.js, we use the JSX feature of React to pass each element of the notes array to the Container component by:
{ this.state.notes.map(note => <Container note={ note } /> )} We pass the note object to the Container component.
Syntax for passing: <component_name propname={ note } />
You can then use the name this.props.propname inside the component to access this variable. The props variable is read-only.
Then, in Container.js I have used another Material-UI component called Paper.
Paper is another type of element which creates a depth effect to our Container component. You can give CSS styles using attributes.
style={{ background:'lightgreen'}}A hover effect has also been provided for the Container component using css property :hover