\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{sally sung}
\pdfinfo{
  /Title (full-stack-dev-with-js-quiz1.pdf)
  /Creator (Cheatography)
  /Author (sally sung)
  /Subject (Full Stack Dev With JS - Quiz1 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}{382BF0}
\definecolor{LightBackground}{HTML}{F2F1FE}
\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{Full Stack Dev With JS - Quiz1 Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{sally sung} via \textcolor{DarkBackground}{\uline{cheatography.com/216190/cs/47627/}}}
\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}sally sung \\
  \uline{cheatography.com/sally-sung} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 28th January, 2026.\\
   Updated 25th February, 2026.\\
   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{multicols*}{2}

\begin{tabularx}{8.4cm}{x{2.64 cm} x{5.36 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Week3 \seqsplit{React\_Introduction\_Vite\_Terminal}}}  \tn
% Row 0
\SetRowColor{LightBackground}
1. create & npm create vite@latest my-app -{}- -{}-template react \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
2. move directory & cd my-app \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
3. install & npm install \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
4. run & npm run dev \tn 
% Row Count 6 (+ 1)
% Row 4
\SetRowColor{LightBackground}
5. install bootstrap & npm i bootstrap \tn 
% Row Count 8 (+ 2)
% Row 5
\SetRowColor{white}
6. import bootstrap & main.jsx \textgreater{} import \seqsplit{'bootstrap/dist/css/bootstrap}.css'; \tn 
% Row Count 11 (+ 3)
% Row 6
\SetRowColor{LightBackground}
7-1. adding routing & npm i react-router-dom \tn 
% Row Count 13 (+ 2)
% Row 7
\SetRowColor{white}
7-2. import routing & main.jsx \textgreater{} import \{BrowserRouter as Router\} from "react-router-dom" \tn 
% Row Count 16 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Week4 \seqsplit{React\_Components\_State\_EventHandling}}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{import Book from "./book"; \newline const BooksList = (\{books={[}{]}, onDelete=f=\textgreater{}f\}) =\textgreater{} \{ \newline     if(books.length===0) return \textless{}h2\textgreater{}Currently there are no books\textless{}/h2\textgreater{} \newline     return ( \textless{}section\textgreater{} \newline         \textless{}h6\textgreater{}Showing \{books.length\} books\textless{}/h6\textgreater{} \newline         \textless{}table className="table"\textgreater{} \newline             \textless{}thead\textgreater{} \newline                 \textless{}tr\textgreater{} \newline                     \textless{}th\textgreater{}Id\textless{}/th\textgreater{} \newline                     \textless{}th\textgreater{}Title\textless{}/th\textgreater{} \newline                     \textless{}th\textgreater{}Category\textless{}/th\textgreater{} \newline                     \textless{}th\textgreater{}Author\textless{}/th\textgreater{} \newline                     \textless{}th\textgreater{}Number in Stock\textless{}/th\textgreater{} \newline                     \textless{}th\textgreater{}Price\textless{}/th\textgreater{} \newline                     \textless{}th\textgreater{}Year\textless{}/th\textgreater{} \newline                     \textless{}th\textgreater{}Liked\textless{}/th\textgreater{} \newline                     \textless{}th\textgreater{}Action(s)\textless{}/th\textgreater{} \newline                 \textless{}/tr\textgreater{} \newline             \textless{}/thead\textgreater{} \newline             \textless{}tbody\textgreater{} \newline                 \{books.map(book=\textgreater{}\textless{}Book  \newline                 key=\{book.\_id\}  \newline                 book = \{book\} \newline                 onDelete = \{onDelete\} \newline                 /\textgreater{})\} \newline             \textless{}/tbody\textgreater{} \newline         \textless{}/table\textgreater{} \newline         \textless{}/section\textgreater{} ); \newline \} \newline   \newline export default BooksList;} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.36 cm} x{4.64 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Week5 Rendering Images}}  \tn
% Row 0
\SetRowColor{LightBackground}
Rendering Images - assets (1) & const images = \seqsplit{import.meta.glob("../assets/images/*}.\{jpg,png,svg\}", \{eager: true\}); \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
Rendering Images - assets (2) & const imageList = \seqsplit{Object.values(images).map((img)} =\textgreater{} img.default); \tn 
% Row Count 7 (+ 3)
% Row 2
\SetRowColor{LightBackground}
Rendering Images - public & \textless{}img src=\{`/images/\$\{img\}`\} alt=\{title\} width=\{100\} height=\{100\} /\textgreater{} \tn 
% Row Count 10 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Week5 \seqsplit{React\_Hooks\_StateInTrees\_Forms\_Code}}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{//sfc \newline import \{ useState \} from "react"; \newline const AddColor = (\{onAdd=f=\textgreater{}f\}) =\textgreater{} \{ \newline     const {[}title,setTitle{]} = useState(""); \newline     const {[}color,setColor{]} = useState("\#000000") \newline  \newline     const submitColor=(event)=\textgreater{}\{ \newline         event.preventDefault(); \newline         onAdd(title,color); \newline         setTitle(""); \newline         setColor("\#000000") \newline     \} \newline     return (\textless{}\textgreater{} \newline     \textless{}h4\textgreater{}You can add a new color here.\textless{}/h4\textgreater{} \newline     \textless{}form onSubmit=\{submitColor\}\textgreater{} \newline         \textless{}input type="text"  \newline         value = \{title\} \newline         required \newline         placeholder="color title" \newline         onChange=\{(event)=\textgreater{}setTitle(event.target.value)\} \newline         /\textgreater{} \newline         \textless{}input type="color" \newline         value=\{color\} \newline         onChange=\{(event)=\textgreater{}setColor(event.target.value)\} \newline         required/\textgreater{} \newline         \textless{}button\textgreater{}Add Color\textless{}/button\textgreater{} \newline     \textless{}/form\textgreater{} \newline     \textless{}/\textgreater{} ); \newline \} \newline   \newline export default AddColor;} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Week6 React Routers - Define Router}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{// main.jsx  \newline import \{BrowserRouter as Router\} from "react-router-dom" \newline  \newline createRoot(document.getElementById('root')).render( \newline   \textless{}StrictMode\textgreater{} \newline    \textless{}Router\textgreater{} \newline      \textless{}App /\textgreater{} \newline    \textless{}/Router\textgreater{} \newline   \textless{}/StrictMode\textgreater{}, \newline )} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Week6 React Routers - 404}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{import \{useLocation\} from "react-router-dom" \newline const Whoops404 = () =\textgreater{} \{ \newline     const location = useLocation(); \newline     return ( \textless{}div\textgreater{} \newline         \textless{}h1\textgreater{}Page not Found at \{location.pathname\}\textless{}/h1\textgreater{} \newline     \textless{}/div\textgreater{} ); \newline \} \newline   \newline export default Whoops404;} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Week5 \seqsplit{React\_Hooks\_StateInTrees\_Forms\_Code}}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{function App() \{ \newline   const {[}colors, setColors{]} = useState(colorData) \newline  \newline   //function to remove a color \newline   const deleteColor = (id)=\textgreater{}\{ \newline     const updatedColors = colors.filter(color=\textgreater{}color.id!==id); \newline     \seqsplit{setColors(updatedColors);} \newline   \} \newline  \newline   //function to change rating \newline   const rateColor= (nRating,id)=\textgreater{}\{ \newline     const updatedColors = colors.map(color=\textgreater{}( \newline       color.id===id?\{...color,rating:nRating\}:color )); \newline       setColors(updatedColors) \newline   \} \newline  \newline   //function to add new Color \newline   const addColor = (title,color)=\textgreater{}\{ \newline     const newColors = {[}...colors,  \newline       \{id:v4(), \newline        title,color, rating:0, img:"yellow.jpg"  \newline       \} \newline     {]} \newline     setColors(newColors); \newline   \} \newline  \newline   return ( \newline       \textless{}div\textgreater{} \newline         \textless{}Header title="This is my Color List."/\textgreater{} \newline         \textless{}AddColor onAdd = \{addColor\}/\textgreater{} \newline         \textless{}ColorList  \newline         colors=\{colors\}  \newline         onDelete = \{deleteColor\} \newline         onRate = \{rateColor\}   \newline         /\textgreater{} \newline         \textless{}Footer/\textgreater{} \newline       \textless{}/div\textgreater{} \newline   ) \newline \} \newline  \newline export default App} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Week6 React Routers - Adding Routing}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{import \{ Routes, Route, Navigate, useNavigate \} from "react-router-dom"; \newline  \newline function App() \{ \newline     return ( \newline         \textless{}div\textgreater{} \newline             \textless{}NavBar /\textgreater{} \newline  \newline             \textless{}Routes\textgreater{} \newline                 \textless{}Route path="/" element=\{\textless{}Home /\textgreater{}\} /\textgreater{} \newline                 \textless{}Route path="/about" element=\{\textless{}About /\textgreater{}\}\textgreater{} \newline                     \{/{\emph{ nested routes }}/\} \newline                     \textless{}Route path="history" element=\{\textless{}History /\textgreater{}\} /\textgreater{} \newline                     \textless{}Route path="services" element=\{\textless{}Services /\textgreater{}\} /\textgreater{} \newline                     \textless{}Route path="locations" element=\{\textless{}Locations /\textgreater{}\} /\textgreater{} \newline                 \textless{}/Route\textgreater{} \newline                 \{/{\emph{ Muliple route/path parameters -{}- REQUIRED}}/\} \newline                 \{/{\emph{ \textless{}Route \seqsplit{path="/events/:month/:year"} element=\{\textless{}EventDetails/\textgreater{}\}/\textgreater{} }}/\} \newline                 \textless{}Route path="/events" element=\{\textless{}Events /\textgreater{}\} /\textgreater{} \newline  \newline                 \{/{\emph{ Muliple route/path parameters -{}-OPTIONAL }}/\} \newline                 \textless{}Route \seqsplit{path="/events/:month?/:year}?" element=\{\textless{}EventDetails /\textgreater{}\} /\textgreater{} \newline  \newline                 \textless{}Route path="/products" element=\{\textless{}Products /\textgreater{}\} /\textgreater{} \newline                 \{/{\emph{Route/Path Paramters}}/\} \newline                 \textless{}Route path="/products/:id" element=\{\textless{}ProductDetails /\textgreater{}\} /\textgreater{} \newline  \newline                 \{/{\emph{ for paths which do not match the paths given above }}/\} \newline                 \textless{}Route path="{\emph{" element=\{\textless{}Whoops404 /\textgreater{}\} /\textgreater{} \newline  \newline                 \{/}} Redirecting */\} \newline                 \textless{}Route path="/services" element=\{\textless{}Navigate to="/about/services" /\textgreater{}\} /\textgreater{} \newline             \textless{}/Routes\textgreater{} \newline         \textless{}/div\textgreater{} \newline     ); \newline \} \newline  \newline export default App;} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Week6 React Routers - Placeholder Components}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{import \{ Outlet, Link, useParams, useLocation\} from "react-router-dom"; \newline import queryString from "query-string"; \newline export const Home = () =\textgreater{} \{ \newline   return ( \newline     \textless{}div\textgreater{} \newline       \textless{}h1\textgreater{}Shopping App\textless{}/h1\textgreater{} \newline     \textless{}/div\textgreater{} \newline   ); \newline \}; \newline export const About = () =\textgreater{} \{ \newline   return ( \newline     \textless{}div\textgreater{} \newline       \textless{}h1\textgreater{}About\textless{}/h1\textgreater{} \newline       \textless{}Outlet/\textgreater{} \newline     \textless{}/div\textgreater{} \newline   ); \newline \}; \newline  \newline export const EventDetails = ()=\textgreater{}\{ \newline   const \{month,year\} = useParams(); \newline   const location = useLocation(); \newline   const obj = \seqsplit{queryString.parse(location.search)}   \newline   return \textless{}div\textgreater{} \newline     \textless{}h6\textgreater{}Event Details: Month \{month\} and Year \{year\}\textless{}/h6\textgreater{} \newline   \textless{}/div\textgreater{} \newline \} \newline  \newline export const Products = () =\textgreater{} \{ \newline   return ( \newline     \textless{}div\textgreater{} \newline       \textless{}h1\textgreater{}Products\textless{}/h1\textgreater{} \newline       \textless{}ul style=\{\{fontSize:"2em", listStyleType:"none"\}\}\textgreater{} \newline         \textless{}li\textgreater{}\textless{}Link to="1"\textgreater{}Product 1\textless{}/Link\textgreater{}\textless{}/li\textgreater{} \newline         \textless{}li\textgreater{}\textless{}Link to="2"\textgreater{}Product 2\textless{}/Link\textgreater{}\textless{}/li\textgreater{} \newline         \textless{}li\textgreater{}\textless{}Link to="3"\textgreater{}Product 3\textless{}/Link\textgreater{}\textless{}/li\textgreater{} \newline       \textless{}/ul\textgreater{} \newline     \textless{}/div\textgreater{} \newline   ); \newline \}; \newline export const ProductDetails = () =\textgreater{} \{ \newline   const products = {[} \newline     \{ id: 1, name: "Laptop", desc: "About Laptops..." \}, \newline     \{ id: 2, name: "Notepad", desc: "About Notepads..." \}, \newline     \{ id: 3, name: "Smart Phone", desc: "About Smart Phones..." \}, \newline   {]}; \newline   let \{ id \} = useParams(); \newline   id = parseInt(id); \newline   const product = products.find((prod) =\textgreater{} prod.id == id); \newline   return ( \newline     \textless{}\textgreater{} \newline       \textless{}h2\textgreater{}Product Details\textless{}/h2\textgreater{} \newline       \textless{}p\textgreater{}Name: \{product.name\}\textless{}/p\textgreater{} \newline       \textless{}p\textgreater{}Description: \{product.desc\}\textless{}/p\textgreater{} \newline     \textless{}/\textgreater{} \newline   ); \newline \};} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}