\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{Pedrecal} \pdfinfo{ /Title (vs-code-es7-react-redux-react-native-js-snippets.pdf) /Creator (Cheatography) /Author (Pedrecal) /Subject (VS Code ES7 React/Redux/React-Native/JS snippets 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}{193549} \definecolor{LightBackground}{HTML}{F7F8F9} \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{VS Code ES7 React/Redux/React-Native/JS snippets Cheat Sheet}}}} \\ \normalsize{by \textcolor{DarkBackground}{Pedrecal} via \textcolor{DarkBackground}{\uline{cheatography.com/61949/cs/15957/}}} \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}Pedrecal \\ \uline{cheatography.com/pedrecal} \\ \end{tabulary} \vfill \columnbreak \begin{tabulary}{5.8cm}{L} \SetRowColor{FootBackground} \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}} \\ \vspace{-2pt}Not Yet Published.\\ Updated 31st May, 2018.\\ 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*}{4} \begin{tabularx}{3.833cm}{p{0.78959 cm} x{2.64341 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Basic Methods}} \tn % Row 0 \SetRowColor{LightBackground} {\bf{imp→ }} & import moduleName from 'module' \tn % Row Count 2 (+ 2) % Row 1 \SetRowColor{white} {\bf{imn→ }} & import 'module' \tn % Row Count 4 (+ 2) % Row 2 \SetRowColor{LightBackground} {\bf{imd→ }} & import \{ destructuredModule \} from 'module' \tn % Row Count 6 (+ 2) % Row 3 \SetRowColor{white} {\bf{ime→ }} & import * as alias from 'module' \tn % Row Count 8 (+ 2) % Row 4 \SetRowColor{LightBackground} {\bf{ima→ }} & import \{ originalName as aliasName\} from 'module' \tn % Row Count 10 (+ 2) % Row 5 \SetRowColor{white} {\bf{exp→ }} & export default moduleName \tn % Row Count 12 (+ 2) % Row 6 \SetRowColor{LightBackground} {\bf{exd→ }} & export \{ destructuredModule \} from 'module' \tn % Row Count 14 (+ 2) % Row 7 \SetRowColor{white} {\bf{exa→ }} & export \{ originalName as aliasName\} from 'module' \tn % Row Count 16 (+ 2) % Row 8 \SetRowColor{LightBackground} {\bf{enf→ }} & export const functionName = (params) =\textgreater{} \{ \} \tn % Row Count 18 (+ 2) % Row 9 \SetRowColor{white} {\bf{edf→ }} & export default (params) =\textgreater{} \{ \} \tn % Row Count 20 (+ 2) % Row 10 \SetRowColor{LightBackground} {\bf{met→ }} & methodName = (params) =\textgreater{} \{ \} \tn % Row Count 22 (+ 2) % Row 11 \SetRowColor{white} {\bf{fre→ }} & \seqsplit{arrayName.forEach(element} =\textgreater{} \{ \} \tn % Row Count 24 (+ 2) % Row 12 \SetRowColor{LightBackground} {\bf{fof→ }} & for(let itemName of objectName \{ \} \tn % Row Count 26 (+ 2) % Row 13 \SetRowColor{white} {\bf{fin→ }} & for(let itemName in objectName \{ \} \tn % Row Count 28 (+ 2) % Row 14 \SetRowColor{LightBackground} {\bf{anfn→ }} & (params) =\textgreater{} \{ \} \tn % Row Count 30 (+ 2) \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{3.833cm}{p{0.78959 cm} x{2.64341 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Basic Methods (cont)}} \tn % Row 15 \SetRowColor{LightBackground} {\bf{nfn→ }} & const functionName = (params) =\textgreater{} \{ \} \tn % Row Count 2 (+ 2) % Row 16 \SetRowColor{white} {\bf{dob→ }} & const \{propName\} = objectToDescruct \tn % Row Count 4 (+ 2) % Row 17 \SetRowColor{LightBackground} {\bf{dar→ }} & const {[}propName{]} = arrayToDescruct \tn % Row Count 6 (+ 2) % Row 18 \SetRowColor{white} **sti→ & setInterval(() =\textgreater{} \{ \}, intervalTime \tn % Row Count 8 (+ 2) % Row 19 \SetRowColor{LightBackground} {\bf{sto→ }} & setTimeout(() =\textgreater{} \{ \}, delayTime \tn % Row Count 10 (+ 2) % Row 20 \SetRowColor{white} {\bf{prom→ }} & return new Promise((resolve, reject) =\textgreater{} \{ \} \tn % Row Count 12 (+ 2) % Row 21 \SetRowColor{LightBackground} {\bf{cmmb→ }} & comment block \tn % Row Count 14 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{0.85825 cm} x{2.57475 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Console}} \tn % Row 0 \SetRowColor{LightBackground} {\bf{clg→ }} & console.log(object) \tn % Row Count 2 (+ 2) % Row 1 \SetRowColor{white} {\bf{cas→ }} & \seqsplit{console.assert(expression},object) \tn % Row Count 4 (+ 2) % Row 2 \SetRowColor{LightBackground} {\bf{ccl→ }} & console.clear() \tn % Row Count 6 (+ 2) % Row 3 \SetRowColor{white} {\bf{cco→ }} & console.count(label) \tn % Row Count 8 (+ 2) % Row 4 \SetRowColor{LightBackground} {\bf{cdi→ }} & console.dir \tn % Row Count 10 (+ 2) % Row 5 \SetRowColor{white} {\bf{cer→ }} & console.error(object) \tn % Row Count 12 (+ 2) % Row 6 \SetRowColor{LightBackground} {\bf{cgr→ }} & console.group(label) \tn % Row Count 14 (+ 2) % Row 7 \SetRowColor{white} {\bf{cge→ }} & console.groupEnd() \tn % Row Count 16 (+ 2) % Row 8 \SetRowColor{LightBackground} {\bf{ctr→ }} & console.trace(object) \tn % Row Count 18 (+ 2) % Row 9 \SetRowColor{white} {\bf{ctr→ }} & console.warn \tn % Row Count 20 (+ 2) % Row 10 \SetRowColor{LightBackground} {\bf{cin→ }} & console.info \tn % Row Count 22 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{0.99557 cm} x{2.43743 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{React}} \tn % Row 0 \SetRowColor{LightBackground} {\bf{imr→ }} & import React from 'react' \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} {\bf{imr→ }} & import React, \{ Component \} from 'react' \tn % Row Count 3 (+ 2) % Row 2 \SetRowColor{LightBackground} {\bf{imr→ }} & import React, \{ Component \} from 'react' \& import PropTypes from 'prop-types' \tn % Row Count 6 (+ 3) % Row 3 \SetRowColor{white} {\bf{imrpc→ }} & import React, \{ PureComponent \} from 'react' \tn % Row Count 8 (+ 2) % Row 4 \SetRowColor{LightBackground} {\bf{imrpcp→ }} & import React, \{ PureComponent \} from 'react' \& import PropTypes from 'prop-types' \tn % Row Count 11 (+ 3) % Row 5 \SetRowColor{white} {\bf{redux→ }} & import \{ connect \} from 'react-redux' \tn % Row Count 13 (+ 2) % Row 6 \SetRowColor{LightBackground} {\bf{rconst→ }} & constructor(props) with this.state \tn % Row Count 15 (+ 2) % Row 7 \SetRowColor{white} {\bf{rconc→ }} & constructor(props, context) with this.state \tn % Row Count 17 (+ 2) % Row 8 \SetRowColor{LightBackground} {\bf{est→ }} & this.state = \{ \} \tn % Row Count 18 (+ 1) % Row 9 \SetRowColor{white} {\bf{cwm→ }} & componentWillMount = () =\textgreater{} \{ \} DEPRECATED!!! \tn % Row Count 20 (+ 2) % Row 10 \SetRowColor{LightBackground} {\bf{cdm→ }} & componentDidMount = () =\textgreater{} \{ \} \tn % Row Count 22 (+ 2) % Row 11 \SetRowColor{white} {\bf{cwr→ }} & \seqsplit{componentWillReceiveProps} = (nextProps) =\textgreater{} \{ \} DEPRECATED!!! \tn % Row Count 25 (+ 3) % Row 12 \SetRowColor{LightBackground} {\bf{scu→ }} & shouldComponentUpdate = (nextProps, nextState) =\textgreater{} \{ \} \tn % Row Count 27 (+ 2) % Row 13 \SetRowColor{white} {\bf{cwup→ }} & componentWillUpdate = (nextProps, nextState) =\textgreater{} \{ \} DEPRECATED!!! \tn % Row Count 30 (+ 3) \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{3.833cm}{x{0.99557 cm} x{2.43743 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{React (cont)}} \tn % Row 14 \SetRowColor{LightBackground} {\bf{cdup→ }} & componentDidUpdate = (prevProps, prevState) =\textgreater{} \{ \} \tn % Row Count 2 (+ 2) % Row 15 \SetRowColor{white} {\bf{cwun→ }} & componentWillUnmount = () =\textgreater{} \{ \} \tn % Row Count 4 (+ 2) % Row 16 \SetRowColor{LightBackground} {\bf{cwun→ }} & componentWillUnmount = () =\textgreater{} \{ \} \tn % Row Count 6 (+ 2) % Row 17 \SetRowColor{white} {\bf{gdsfp→ }} & static \seqsplit{getDerivedStateFromProps(nextProps}, prevState) \{ \} \tn % Row Count 9 (+ 3) % Row 18 \SetRowColor{LightBackground} {\bf{gsbu→ }} & getSnapshotBeforeUpdate = (prevProps, prevState) =\textgreater{} \{ \} \tn % Row Count 11 (+ 2) % Row 19 \SetRowColor{white} {\bf{ren→ }} & render() \{ return( ) \} \tn % Row Count 12 (+ 1) % Row 20 \SetRowColor{LightBackground} {\bf{sst→ }} & this.setState(\{ \}) \tn % Row Count 13 (+ 1) % Row 21 \SetRowColor{white} {\bf{ssf→ }} & this.setState((state, props) =\textgreater{} return \{ \}) \tn % Row Count 15 (+ 2) % Row 22 \SetRowColor{LightBackground} {\bf{props→ }} & propName \tn % Row Count 17 (+ 2) % Row 23 \SetRowColor{white} {\bf{state→ }} & this.state.stateName \tn % Row Count 19 (+ 2) % Row 24 \SetRowColor{LightBackground} {\bf{rcontext→ }} & const \$\{1:contextName\} = React.createContext() \tn % Row Count 21 (+ 2) % Row 25 \SetRowColor{white} {\bf{cref→ }} & this.\$\{1:refName\}Ref = React.createRef() \tn % Row Count 23 (+ 2) % Row 26 \SetRowColor{LightBackground} {\bf{fref→ }} & const ref = React.createRef() \tn % Row Count 25 (+ 2) % Row 27 \SetRowColor{white} {\bf{bnd→ }} & this.methodName = \seqsplit{this.methodName.bind(this)} \tn % Row Count 27 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{1.47619 cm} x{1.95681 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Redux}} \tn % Row 0 \SetRowColor{LightBackground} {\bf{rxaction→ }} & redux action template \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} {\bf{rxconst→ }} & export const \$1 = '\$1' \tn % Row Count 3 (+ 2) % Row 2 \SetRowColor{LightBackground} {\bf{rxreducer→ }} & redux reducer template \tn % Row Count 4 (+ 1) % Row 3 \SetRowColor{white} {\bf{rxselect→ }} & redux selector template \tn % Row Count 6 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{0.99557 cm} x{2.43743 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{React Native}} \tn % Row 0 \SetRowColor{LightBackground} {\bf{imrn→ }} & import \{ \$1 \} from 'react-native' \tn % Row Count 2 (+ 2) % Row 1 \SetRowColor{white} {\bf{rnstyle→ }} & const styles = StyleSheet.create(\{\}) \tn % Row Count 4 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{0.89258 cm} x{2.54042 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{GraphQL}} \tn % Row 0 \SetRowColor{LightBackground} {\bf{graphql→}} & import \{ compose, graphql \} from 'react-apollo' \tn % Row Count 2 (+ 2) % Row 1 \SetRowColor{white} {\bf{expgql→}} & export default compose(graphql(\$1, \{ name: \$2 \}))(\$3) \tn % Row Count 4 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{x{0.96124 cm} x{2.47176 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{PropTypes}} \tn % Row 0 \SetRowColor{LightBackground} {\bf{pta→ }} & PropTypes.array \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} {\bf{ptar→ }} & \seqsplit{PropTypes.array.isRequired} \tn % Row Count 3 (+ 2) % Row 2 \SetRowColor{LightBackground} {\bf{ptb→ }} & PropTypes.bool \tn % Row Count 4 (+ 1) % Row 3 \SetRowColor{white} {\bf{ptbr→ }} & \seqsplit{PropTypes.bool.isRequired} \tn % Row Count 6 (+ 2) % Row 4 \SetRowColor{LightBackground} {\bf{ptf→ }} & PropTypes.func \tn % Row Count 7 (+ 1) % Row 5 \SetRowColor{white} {\bf{ptptfr→ }} & \seqsplit{PropTypes.func.isRequired} \tn % Row Count 9 (+ 2) % Row 6 \SetRowColor{LightBackground} {\bf{ptn→ }} & PropTypes.number \tn % Row Count 10 (+ 1) % Row 7 \SetRowColor{white} {\bf{ptnr→ }} & \seqsplit{PropTypes.number.isRequired} \tn % Row Count 12 (+ 2) % Row 8 \SetRowColor{LightBackground} {\bf{pto→ }} & PropTypes.object \tn % Row Count 13 (+ 1) % Row 9 \SetRowColor{white} {\bf{ptor→ }} & \seqsplit{PropTypes.object.isRequired} \tn % Row Count 15 (+ 2) % Row 10 \SetRowColor{LightBackground} {\bf{pts→ }} & PropTypes.string \tn % Row Count 16 (+ 1) % Row 11 \SetRowColor{white} {\bf{ptsr→ }} & \seqsplit{PropTypes.string.isRequired} \tn % Row Count 18 (+ 2) % Row 12 \SetRowColor{LightBackground} {\bf{ptnd→ }} & PropTypes.node \tn % Row Count 20 (+ 2) % Row 13 \SetRowColor{white} {\bf{ptndr→ }} & \seqsplit{PropTypes.node.isRequired} \tn % Row Count 22 (+ 2) % Row 14 \SetRowColor{LightBackground} {\bf{ptel→ }} & PropTypes.element \tn % Row Count 24 (+ 2) % Row 15 \SetRowColor{white} {\bf{ptelr→ }} & \seqsplit{PropTypes.element.isRequired} \tn % Row Count 26 (+ 2) % Row 16 \SetRowColor{LightBackground} {\bf{pti→ }} & \seqsplit{PropTypes.instanceOf(name)} \tn % Row Count 27 (+ 1) % Row 17 \SetRowColor{white} {\bf{ptir→ }} & \seqsplit{PropTypes.instanceOf(name).isRequired} \tn % Row Count 29 (+ 2) % Row 18 \SetRowColor{LightBackground} {\bf{pte→ }} & PropTypes.oneOf({[}name{]}) \tn % Row Count 30 (+ 1) \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{3.833cm}{x{0.96124 cm} x{2.47176 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{PropTypes (cont)}} \tn % Row 19 \SetRowColor{LightBackground} {\bf{pter→ }} & PropTypes.oneOf({[}name{]}).isRequired \tn % Row Count 2 (+ 2) % Row 20 \SetRowColor{white} {\bf{ptet→ }} & PropTypes.oneOfType({[}name{]}) \tn % Row Count 4 (+ 2) % Row 21 \SetRowColor{LightBackground} {\bf{ptetr→ }} & PropTypes.oneOfType({[}name{]}).isRequired \tn % Row Count 6 (+ 2) % Row 22 \SetRowColor{white} {\bf{ptao→ }} & PropTypes.arrayOf(name) \tn % Row Count 8 (+ 2) % Row 23 \SetRowColor{LightBackground} {\bf{ptaor→ }} & \seqsplit{PropTypes.arrayOf(name).isRequired} \tn % Row Count 10 (+ 2) % Row 24 \SetRowColor{white} {\bf{ptoo→ }} & PropTypes.objectOf(name) \tn % Row Count 12 (+ 2) % Row 25 \SetRowColor{LightBackground} {\bf{ptoor→ }} & \seqsplit{PropTypes.objectOf(name).isRequired} \tn % Row Count 14 (+ 2) % Row 26 \SetRowColor{white} {\bf{ptsh→ }} & PropTypes.shape(\{ \}) \tn % Row Count 16 (+ 2) % Row 27 \SetRowColor{LightBackground} {\bf{ptshr→ }} & PropTypes.shape(\{ \}).isRequired \tn % Row Count 18 (+ 2) % Row 28 \SetRowColor{white} {\bf{ptany→ }} & PropTypes.any \tn % Row Count 20 (+ 2) % Row 29 \SetRowColor{LightBackground} {\bf{ptypes→ }} & static propTypes = \{\} \tn % Row Count 22 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} % That's all folks \end{multicols*} \end{document}