Material design by Google is one of the greatest theme ever, it has taken over the Android 5.0 and all google’s apps. It was launched in Google I/O 2014. This a fresh, clean, modern and simple design theme.
Material design is based as its name implies in real objects, items placed in space and time. Many factors play a key role in the overall look like: deep, borders, shadows and colors.
In this post I’ll show you how to get Material UI running in your ReactJS app. This method is pure CSS which doesn’t require any library to work, this way we can keep our app code separate from the styling and we won’t be depending in a npm library but our code only.
This time we will be using a base code BaseReactApp which you can copy, clone or download from GitHub:
https://github.com/Xourse/BaseReactApp
As for the Material UI CSS we will be using the MUI — MUICSS at:
https://www.muicss.com/
Add the MUI CSS and JS to your app
The first think to do is to include the CSS styling and the js in the index.html file. Inside the <head></head> Tag.
Something like this:
<head> … <link href=”//cdn.muicss.com/mui-0.9.4/css/mui.min.css” rel=”stylesheet” type=”text/css” /> <script src=”//cdn.muicss.com/mui-0.9.4/js/mui.min.js”></script> … </head>
ReactJS Components
We will create the first ReactJS component, a button component which will call a simple function. Like the one shown below:
Create the src/components/common/ButtonExample.jsx
import React, { Component } from ‘react’;export default class ButtonExample extends Component {
constructor(props) {
super(props);
}
onClick(){
alert(‘Button has been clicked’);
}
render() {
let defaultClasses = ‘mui-btn mui-btn — raised mui-btn — primary’;
let onClick = this.onClick.bind(this);
return (
<button onClick={this.onClick} className={defaultClasses}>
{this.props.text}
</button>
);
}
}To see the button we just created we need to include it in the component being render at the index.
edit src/components/IndexComponent.jsx
import React, { Component } from ‘react’;
import ButtonExample from ‘./common/ButtonExample’;export default class IndexComponent extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div>Hello World!</div>
<div class=”mui-divider”></div>
<ButtonExample text=’Click Me!’ />
</div>
);
}
}now we can go to our app root folder and run the execution command:
npm start
and go to any Web Browser at:
localhost:8080/
Your changes should be visible there, including the created ButtonExample with the text ‘Click Me’ and the alert onClick function.
To continue with examples for the MUI in ReactJS we are going to add a dropdown component and check the result. The dropdown will look like the shown below:
Create the src/components/common/DropdownExample.jsx
import React, { Component } from ‘react’;
import { connect } from ‘react-redux’;
import { setField } from ‘../../actions/Actions’;class DropdownExample extends Component {
constructor(props) {
super(props);
}
handleClick(name){
this.props.setField(this.props.location, this.props.input, name);
}
render() {
let { location, input, options, selected, label} = this.props;
let handleClick = this.handleClick.bind(this);
console.log(options);
return (
<div className=’Dropdown-container’>
<span className=’Dropdown-label’>{label}</span>
<div className=”mui-dropdown”>
<button className=”mui-btn mui-btn — primary” data-mui-toggle=”dropdown”>
{ (selected === ‘’) ?
‘Selecciones’
:
selected
}
<span className=”mui-caret”></span>
</button>
<ul className=”mui-dropdown__menu Dropdown-scroll”>
{options.map((option, i) => {
return <li key={i} onClick={handleClick.bind(this, option)}>{option}</li>;
})}
</ul>
</div>
</div>
);
}
}
export default connect(null, { setField })(DropdownExample);Now we need to render this new component
edit src/components/IndexComponent.jsx
import React, { Component } from ‘react’;
import { List, ListItem, ListItemAction } from ‘react-mdl’;
import ButtonExample from ‘./common/ButtonExample’;
import DropdownExample from ‘./common/DropdownExample’;export default class IndexComponent extends Component {
constructor(props) {
super(props);
}
render() {
//For testing purpose we will define the options here
let options = [‘option1’, ‘option2’, ‘option3’];
let selected = this.props.state.get(‘selectedDropdown’);
return (
<div>
<div>Hello World!</div>
<div class=”mui-divider”></div>
<DropdownExample label=’Selections’ location=’IndexComponent’ input=’selectedDropdown’ selected={selected} options={options}/>
</div>
);
}
}Now we have rendered the component but we need to add the property to the immutable state
edit src/state.js
import { Map, fromJS, List } from ‘immutable’;
import moment from ‘moment’;export default Map({
User: Map({
name: ‘TestName’
}),
IndexComponent: Map({
selectedDropdown: ‘’
}),
ComponentA: Map({
radioSample: ‘’,
checkboxSample: ‘’,
dropdown: ‘’,
sampleDate: ‘’
}),
ComponentB: Map({
radioSample: ‘’,
checkboxSample: ‘’,
dropdown: ‘’,
sampleDate: ‘’
})
});now we can go to our app root folder and run the execution command:
npm start
and go to any Web Browser at:
localhost:8080/
This is it for now, hope you find the post useful.
Our love for Google’s material design guidelines and ReactJS has come together.
By Alberto Cerrato — Xourse Developer