\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Cash (CashM)}
\pdfinfo{
  /Title (react-and-material-ui-project-startup.pdf)
  /Creator (Cheatography)
  /Author (Cash (CashM))
  /Subject (React \& Material UI Project startup Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{6E00EE}
\definecolor{LightBackground}{HTML}{F5EFFD}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{React \& Material UI Project startup Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Cash (CashM)} via \textcolor{DarkBackground}{\uline{cheatography.com/123081/cs/27983/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Cash (CashM) \\
  \uline{cheatography.com/cashm} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 16th May, 2021.\\
   Updated 16th May, 2021.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.


\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Setup}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{Create your react application project folders and files:} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{`npx create-react-app \textless{}project\_name\textgreater{}`} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{Navigate into your newly created project folder} \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{`cd \textless{}project\_name\textgreater{}`} \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{Launch VS Code (or preferred IDE) using `code .` and press Enter} \tn 
% Row Count 7 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{In your terminal window, install the Material UI package:} \tn 
% Row Count 9 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{`npm install @material-ui/core`} \tn 
% Row Count 10 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Add Fonts \& Icons}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{Material UI defines Roboto as the default font. Edit index.html and add the following statement inside your \textless{}head\textgreater{} block:} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{`\textless{}link rel="stylesheet" \seqsplit{href="https://fonts.googleapis.com/css?family=Roboto:300},400,500,700\&display=swap" /\textgreater{}`} \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{Modify the global style sheet index.css and place Roboto in the first position (see below)} \tn 
% Row Count 8 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{`body \{  ... font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', ... \}`} \tn 
% Row Count 10 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{Add a link for the FONT Icons. Place it just below the 'Roboto' link} \tn 
% Row Count 12 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{`\textless{}link rel="stylesheet" \seqsplit{href="https://fonts.googleapis.com/icon?family=Material+Icons"} /\textgreater{}`} \tn 
% Row Count 14 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{Install SVG icons:} \tn 
% Row Count 15 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{`npm install @material-ui/icons`} \tn 
% Row Count 16 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Default Styles and use of the App component.}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Since Material-UI provides a default theme of baseline components, styles, colors, and typography, we will not need the definitions found in the App.css created during the initial setup. \newline % Row Count 4 (+ 4)
{\bf{Edit the App.css file and clear its contents.}} \newline % Row Count 5 (+ 1)
-{}-{}- \newline % Row Count 6 (+ 1)
By convention for React development, your App component should be placed under the .src directory. \newline % Row Count 8 (+ 2)
  {\bf{1) Create a folder named 'App' in your src director}} \newline % Row Count 10 (+ 2)
  {\bf{2) Next move your 'App.*' files into this directory.}} \newline % Row Count 12 (+ 2)
  {\bf{3) Modify the import statement in your index.js file to correctly find your App.js file.}} \newline % Row Count 14 (+ 2)
      {\bf{(ex. `import App from './App/App';`)}}% Row Count 15 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Baseline Component Wrappers}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Material UI promotes the functional component design. Although it also support classed based component design. The implementation is 'different' and can be confusing if you are just getting started. \newline % Row Count 4 (+ 4)
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 consistently no matter which component design method you want to use. \newline % Row Count 10 (+ 6)
  {\bf{1) Create a subfolder named "components" in your src directory.}} \newline % Row Count 12 (+ 2)
  {\bf{2) Inside this new folder, create another folder named 'controls'.}} \newline % Row Count 14 (+ 2)
  {\bf{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', 'datepicker', etc.).}} \newline % Row Count 18 (+ 4)
  {\bf{4) Also, to make importing these items easier and to keep your code 'clean', create a controls.js.file.}}% Row Count 21 (+ 3)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Sample Button wrapper}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{import React from 'react' \newline import \{ Button as MuiButton, makeStyles \} from '@material-ui/core' \newline  \newline const useStyles = makeStyles((theme) =\textgreater{} (\{ \newline     root: \{ \newline         margin: theme.spacing(0.5) \newline     \}, \newline     label: \{ \newline         textTransform: "none" \newline     \} \newline \})) \newline  \newline const Input= (props) =\textgreater{} \{ \newline     const \{ text, size, color, variant, onClick, ...other\} = props \newline     const classes = useStyles(); \newline  \newline     return ( \newline         \textless{}MuiButton  \newline             variant=\{variant || "contained"\} \newline             size=\{size || "small"\} \newline             color=\{color || "primary"\} \newline             onClick=\{onClick\} \newline             \{...other\} \newline             classes=\{\{ root:classes.root, label:classes.label \}\} \newline         \textgreater{} \newline             \{text\} \newline         \textless{}/MuiButton\textgreater{} \newline     ) \newline \} \newline  \newline export default Input \newline  \newline  \newline -{}-{}- \newline `{\bf{Example use of this component}}` \newline      \textless{}Controls.Button \newline            text="Cancel" \newline            onClick=\{handleCancel\} \newline       /\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{This example demonstrates how to "wrap" around the baseline button component. It provides "default" variant, size and color properties. The only props that you need to supply will be the text and the click handler.  \newline Note: the `...other` parameter will allow to make use of ALL available properties. \newline Note: In order to prevent naming colisions, the 'Button' import from Material UI was given an alias of 'MuiButton'. Thus we can now call our wrapped component 'Button'.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Control.JS File}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{import Button from './Button' \newline import Input from './Input' \newline import Select from './Select' \newline  \newline const Controls = \{ \newline     Button, \newline     Input, \newline     Select \newline \} \newline  \newline export default Controls; \newline  \newline -{}-{}- \newline `{\bf{Now in your other components, simply import everything using the following:}}` \newline import Controls from \seqsplit{'../../components/controls/Controls';}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{This file will make importing your wrapped baseline components easier and will help to keep your code 'clean'. \newline For each component in your controls folder, add an import statement and the component name in the const definition.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}



\end{document}