How To Boost Your Coding Productivity with Plop

How To Boost Your Coding Productivity with Plop

hackernoon.com hackernoon.com1 year ago in#Dev Love33

Previously, I talked about how Plop can help increase productivity when coding by reducing context switching. In this article, we’ll dive into an example and configure a Plop generator to create a React component in Typescript. By the end, you’ll be able to start using Plop to build your own generators for any type of project and reap the productivity benefits! Before we start Please ensure you have Node.js and the npm CLI installed (optionally yarn) and that npm (and yarn) is available on the PATH environment variable. I will use yarn in my examples but these can all be substituted for the equivalent npm command. With that out of the way, let’s begin. 1. Create the project Create a new create-react-app project using typescript: yarn create react-app plop_example_project –template=typescript 2. Install Plop We will install Plop as a development dependency within the project. It is possible to install globally making command line access marginally easier, but I prefer to keep projects self-contained wherever possible to reduce the potential for conflict with other projects. So, installing within the project, type the following in the console: This will add the development dependency to your project. 3. Add a ‘plop’ script Since we have created a local copy, we need to call Plop via the npm scripts. Add the “plop” script to the package.json file: { …, “scripts”: { …, “plop”: “plop” }, … } 4. Create the template files The templates are simply handlebars files (*.hbs) which, at their most basic level, take a set of variables and transform them into a text output. As the name suggests, the placeholders for each variable appear in the template between {{handlebars}} which then get replaced with supplied values when the script is called. The filenames can also include placeholders, something that we’ll take advantage of in this example. We will create three template files: {{name}}.tsx.hbs {{name}}.module.css.hbs {{name}}.test.tsx.hbs Note that the file names take a name variable between handlebars followed by a file extension. When the generator runs, the .hbs extension will be removed and the name populated, leaving us with a filename that fully represents our intended file type. Create a new directory plop_templates/component and create the three templates, inserting the following code: {{name}}.tsx.hbs import React, { ReactElement, HTMLProps } from ‘react’; import classes from ‘./{{name}}.module.scss’; export interface {{name}}Props extends HTMLProps { } export default (props: {{name}}Props): ReactElement ={ return ( ); } {{name}}.module.css.hbs {{name}}.test.tsx.hbs import React from ‘react’; import { render } from ‘@testing-library/react’; import {{name}} from ‘./{{name}}’; test(‘renders’, () ={ render(); }); These three files represent the simplest form any component will take. They use three variables: name — The name of the component type — The element type according to the HTML DOM API, usually a subtype of HTMLElement, e.g. HTMLDivElement tag — The HTML tag name, e.g. div The values for these variables are defined when the plop script is called, described in step 6.  » Read More

Like to keep reading?

This article first appeared on hackernoon.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply