plop VS create-react-app

Almost all of us, while working on a project, are copy/pasting from the previous one while creating similar structures. While thinking if there is a fast way to do this, I came across plop js.

In this article, I will talk about Plop, which is a little tool that saves you time and helps your team build new files with consistency, as the documentation suggests.

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:

Plop

When it comes to software development, a good developer experience (or DX) is a key aspect in helping the development process to become faster and more efficient. Having a good DX means that developers are focusing on the real deal while other, less important stuff, is being taken care of by automated tools. Such a tool is Plop which I really love for its simplicity and efficiency.

this allows you to import this Header component with import { Header } from 'path/Header' without Header/Header. Creating this structure manually is annoying, so one will benefit from some code generators like plop or hygen.

plop for create a consistent templates for pages, components, etc

Plop

Immerse yourself in the official Create React App documentation for a deeper understanding.

Create React App (https://create-react-app.dev/)

- And ofc, there are some templates/frameworks that bring something of that together (https://create-react-app.dev/; maybe https://vitejs.dev/) - google for templates.

I recommend finding some friend with modern experience or at least some youtube tutorials or at least some learning course. That would help you to catch up on the best way to bootstrap your first project. Then you can practice.

What's the connection?

Also, take a look at this response from 2021: https://github.com/facebook/create-react-app/discussions/117...

Create React App Documentation

Inside the react-tutorial-app folder, to create a new React project runs the following command using create-react-appand for more details on how create-react-app works and other staff, please visit the official website: https://create-react-app.dev/

Before we embark on our journey, make sure you have React installed and a React project set up. If not, fear not! Create React App is your trusty sidekick for a quick start.

create-react-app -> Building a single-page application. Good for beginners.