Show Menu
Cheatography

React & Material UI Project startup Cheat Sheet by

Material UI React Project startup

Setup

Create your react applic­ation project folders and files:
npx create­-re­act-app <pr­oje­ct_­nam­e>
Navigate into your newly created project folder
cd <pr­oje­ct_­nam­e>
Launch VS Code (or preferred IDE) using code . and press Enter
In your terminal window, install the Material UI package:
npm install @mater­ial­-ui­/core

Add Fonts & Icons

Material UI defines Roboto as the default font. Edit index.html and add the following statement inside your <he­ad> block:
<link rel="st­yle­she­et" href="h­ttp­s:/­/fo­nts.go­ogl­eap­is.c­om­/cs­s?f­ami­ly=­Rob­oto­:30­0,4­00,­500­,70­0&­dis­pla­y=s­wap­" />
Modify the global style sheet index.css and place Roboto in the first position (see below)
body { ... font-f­amily: 'Roboto', -apple­-sy­stem, BlinkM­acS­yst­emFont, 'Segoe UI', 'Oxygen', ... }
Add a link for the FONT Icons. Place it just below the 'Roboto' link
<link rel="st­yle­she­et" href="h­ttp­s:/­/fo­nts.go­ogl­eap­is.c­om­/ic­on?­fam­ily­=Ma­ter­ial­+Ic­ons­" />
Install SVG icons:
npm install @mater­ial­-ui­/icons

Default Styles and use of the App component.

Since Materi­al-UI provides a default theme of baseline compon­ents, styles, colors, and typogr­aphy, we will not need the defini­tions found in the App.css created during the initial setup.

Edit the App.css file and clear its conten­ts.
---
By convention for React develo­pment, your App component should be placed under the .src directory.
1) Create a folder named 'App' in your src director
2) Next move your 'App.*' files into this direct­ory.
3) Modify the import statement in your index.js file to correctly find your App.js file.
(ex. import App from './App­/Ap­p';)

Baseline Component Wrappers

Material UI promotes the functional component design. Although it also support classed based component design. The implem­ent­ation is 'diffe­rent' and can be confusing if you are just getting started.

An easy way to handle this is to create wrappers for all of the baseline components that implement the function component design. This way you can use your wrapper based components consis­tently no matter which component design method you want to use.

1) Create a subfolder named "­com­pon­ent­s" in your src direct­ory.
2) Inside this new folder, create another folder named 'contr­ols'.
3) Inside your controls folder, you will create a JS/JSX fille for every baseline component that you wish to use (ex: 'button', 'input', 'select', 'datep­icker', etc.).
4) Also, to make importing these items easier and to keep your code 'clean', create a contro­ls.j­s.f­ile.

Sample Button wrapper

import React from 'react'
import { Button as MuiButton, makeStyles } from '@material-ui/core'

const useStyles = makeStyles((theme) => ({
    root: {
        margin: theme.spacing(0.5)
    },
    label: {
        textTransform: "none"
    }
}))

const Input= (props) => {
    const { text, size, color, variant, onClick, ...other} = props
    const classes = useStyles();

    return (
        <MuiButton 
            variant={variant || "contained"}
            size={size || "small"}
            color={color || "primary"}
            onClick={onClick}
            {...other}
            classes={{ root:classes.root, label:classes.label }}
        >
            {text}
        </MuiButton>
    )
}

export default Input


---
Example use of this component
     <Controls.Button
           text="Cancel"
           onClick={handleCancel}
      />
This example demons­trates how to "­wra­p" around the baseline button component. It provides "­def­aul­t" variant, size and color proper­ties. The only props that you need to supply will be the text and the click handler.
Note: the ...other parameter will allow to make use of ALL available proper­ties.
Note: In order to prevent naming colisions, the 'Button' import from Material UI was given an alias of 'MuiBu­tton'. Thus we can now call our wrapped component 'Button'.

Control.JS File

import Button from './Button'
import Input from './Input'
import Select from './Select'

const Controls = {
    Button,
    Input,
    Select
}

export default Controls;

---
Now in your other components, simply import everything using the following:
import Controls from '../../components/controls/Controls';
This file will make importing your wrapped baseline components easier and will help to keep your code 'clean'.
For each component in your controls folder, add an import statement and the component name in the const defini­tion.
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          React Reusability Cheat Sheet

          More Cheat Sheets by CashM

          Firebase-Express Template with User Auth Cheat Sheet