An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
Automatically generating files in your React/Next Js app
Creating files is actually one of the first steps in building a successful application, but having to create files that follow specific pattern, multiple times plus manually can become so tiring.
Hello my dear reader, how are you today?
Today, I'll be teaching you how to automate file creation in react/next js using what is called Plop.
What is Plop? It is a Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity.
At least, that's what they say it is, and that's really what it is.
To the main point, how do I use this awesome package?
- Install it from npm
- After successful installation, you'll need to create two things
- a file called plopFile.js: This is where you get to define the actions you want to carry out.
- a folder called templates: within this folder, you'll create a file that the plopFile will replicate, i.e the way you want the generated file to look like.
Let's talk about the templates folder. So, in this post I'll assume we are working within the components folder to create components(such as Button, Text, Inputs...) for our app.
The goal is to create the first component, Button.
Back to the templates folder, create another folder called components, and within this folder, create a file called component.hbs. Plop works with hbs files, that's why we have it that way.
Within the component.hbs file, let's create a skeleton of what we want each of our components to look like, as shown below.
import React from 'react';export const {{name}} = () => { return ( <div> {{name}} </div> );}
Every component file we create will follow this format.
You may be wondering, where the heck is {{name}}
coming form, Lucas?
Let's see. {{name}}
is the name we give our component when creating it, such as Button, Text..., but then where are we setting it?
That's where the plopFile.js comes in. Let's head there now.
I assume you're now within the file.
- A plopfile starts its life as a node module that creates a function which accepts the plop object as its first parameter.
- The plop object exposes the plop API object which contains the
setGenerator(name, config)
function. This is the function that you use to (wait for it) create a generator for this plopfile. When plop is run from the terminal in this directory (or any sub-directory), a list of these generators will be displayed. In our case, let's change the name to components, since we'll be working with components files. - The config is where the
description
,prompts
andactions
go. What are they?description: a simple description of what this generator doesprompts: a custom user interaction function for command prompt, where you ask questions such as what component you want to create.actions: as its name implies, it's the actions folder where you define in which folder you want the component created, the format to follow(templates/components/component) and other interesting things. - finally you export the function created.
Let's see it in action.
const config = (plop) => { plop.setGenerator('components', { description: 'A component generator for the app', prompts: [ { type: 'input', name: 'name', message: 'Enter component name', }, ], actions: [ { type: 'add', path: 'components/{{pascalCase name}}/{{pascalCase name}}.jsx', templateFile: 'templates/components/component.hbs', }, ], });};module.exports = config;
Within the prompts
, you'll notice we are setting the value of name to name, and that is what we got the name
within the templates/components/component
from. It could be anything, could be name: something
or name: another_thing
, just about anything.
Within the actions, there are various type
of actions that could be carried out such as append, modify, addMany..., but we'll be using add
today for the purpose of this post, to add a file to a folder.
The path describes what path we want the file created. You'll also notice that we have this line {{pascalCase name}}
, basically we have various case modifiers such as camelCase
, pascalCase
, lowerCase
among others so we are basically telling plop
to use the pascalCase
for the file we are creating, and the name is gotten from name: name
.
The templateFile
is where we navigate to the format which we want our file to be created.
To run what we just created, simlpy run
yarn run plop
in your terminal.
Works like magic .
Congratulations, you have completed the mission.
Thanks for taking your time to read through this.
Let me know in the comment section below if you found this useful or if you knew about this before now or how productive you think this will make you be.
Links below to useful resources:
Plop documentation
In the next post, I'll be showing you advanced features of Plop such as a case where you can append to a file.
Bye for now
Original Link: https://dev.to/sam_lukaa/automatically-generating-files-in-your-reactnext-js-app-4e0g
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To