react-play VS plop

ReactPlay Website

The website: https://reactplay.io/

In the open-source community, October is officially known as the Hacktoberfest season. Hacktoberfest is Digital Ocean's annual event that encourages people to contribute to open source throughout October. They have successfully been conducting it for the past 9 years. This year, ReacPlay has decided to organize a hackathon as a part of the hacktoberfest celebration 🥳.

You can add a new play, improve the site, or help resolve general issues from the Issues section.

We have more compelling plans for the next month. The Hackathon is just a part of it! Our main project, ReactPlay, has been open-sourced on GitHub since the beginning. You can contribute to it regardless of the month and the hackathon.

It will be unfair to end this article without explaining what made me write about Nhost. As part of the Open Source Initiatives, we are building a platform called ReactPlay. It helps react developers learn ReactJs with a practice model.

Check out the project.

First, you need to fork the react-play repo. You can do this by clicking the Fork button on the top right corner of the repo. If you are new to forking, please watch this YouTube Guide.

- Link to the GitHub, Please give a ⭐, if you liked the idea: https://github.com/atapas/react-play

In case you get stuck or need help, you can find the working code from this repository.

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