sethdavis512

As a developer who works on multiple React projects daily, I like having a tool that can help me quickly and efficiently write consistent code. One of the best ways I've found is writing a custom command line tool to rapidly scaffold out my most common code patterns.

My tool of choice is Plop.js. Plop is a powerful "micro-generator framework" built to help maintain patterns as well as speed up your project build time. From the documenation:

If you boil plop down to its core, it is basically glue code between inquirer prompts and handlebar templates.

In this tutorial, we'll build out a simple React component generator for your Typescript projects. By the end, you'll have a fully functioning CLI that is customized to your file generating needs. Let's get started.

Prerequisites

sethdavis512

const read = async (filePath: string) => {
    return new Promise((resolve, reject) => {
        fs.readFile(filePath, 'utf8', (err: any, data: string) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

const write = (filePath: string, fileName: string, fileExtension: string, content: any) => {

sethdavis512

export default function getUniqueId(prefix: string, length: number = 8): string {
    let result = `${prefix}-`;

    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const charactersLength = characters.length;

    let counter = 0;

    while (counter < length) {
        result = `${result}${characters.charAt(Math.floor(Math.random() * charactersLength))}`;

sethdavis512

const useD3 = (renderChartFn: (el: any) => void, dependencies: any[]) => {
    const ref = useRef<HTMLElement>();

    useEffect(() => {
        if (!!ref.current) {
            renderChartFn(d3.select(ref.current));
        }

        return () => {};
    }, dependencies);

sethdavis512

// Source: https://twitter.com/calebporzio/status/1151876736931549185

<div class="flex">
    <aside class="h-screen sticky top-0">
        // Fixed Sidebar
    </aside>
    
    <main>
        // Content
    </main>

sethdavis512

import React, {
    useContext,
    createContext,
    ReactNode,
    useMemo,
    Children,
    isValidElement,
    useState
} from 'react';

sethdavis512

const encodeGetParams = p => 
  Object.entries(p).map(kv => kv.map(encodeURIComponent).join("=")).join("&");

const params = {
  user: "María Rodríguez",
  awesome: true,
  awesomeness: 64,
  "ZOMG+&=*(": "*^%*GMOZ"
};

sethdavis512

const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
});

sethdavis512

// HTML5 Pattern
// http://html5pattern.com/

const alphaNumeric = /[a-zA-Z0-9]+/;
const userNameWith20Chars = /^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$/;
const twitterHandle = /^[A-Za-z0-9_]{1,15}$/;

const password = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$/; // Uppercase, lowercase, and number
const password2 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$/; // Password (UpperCase, LowerCase, Number/SpecialChar and min 8 Chars)

sethdavis512

// Building-blocks to use for composition
const double = x => x + x;
const triple = x => 3 * x;
const quadruple = x => 4 * x;

// Function composition enabling pipe functionality
const pipe = (...fns) => input => [...fns].reduce((acc, fn) => fn(acc), input);

// Composed functions for multiplication of specific values
const multiply6 = pipe(double, triple);