DEV Community

Azizi Yazit
Azizi Yazit

Posted on • Edited on

CLI in React

#react #reactarchitecture #reactcli

Here’s your Markdown with proper formatting, fixed grammar, and cleaned-up section structure while preserving all content:

---
title: CLI in React
published: true
description: Learn how to use a CLI tool with React to create consistent app, page, module, and component structures.
tags: react, reactarchitecture, reactcli
---

## React and CLI

React has its own CLI, but currently, it only supports creating an app using **create-react-app**.  
`create-react-app` generates the boilerplate version of a React application via the command line.

```

bash
npx create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

Note: create-react-app takes care of setting up the main structure of the application as well as several developer settings. Most of what you see will not be visible to visitors of your web app.
React uses a tool called webpack, which transforms the directories and files here into static assets. Visitors to your site are served those static assets.
~ codecademy.com

Each React app that you or your team creates will have the same structure — which is great for consistency across applications.

However, UI development is not only about building apps; it also involves creating components, modules, and pages. Developers should know what needs to be built by referring to the wireframe provided by the designer.

React structure example

Without a defined structure, you can end up with a messy and inconsistent application.

Example Scenarios

Dev 1

  • Dashboard page
  • Header component
  • Card component
  • Graph component

Dev 2

  • Dashboard page
  • Header module (container for search component, icons component, and dropdown component)
  • Statistic module (container for one variant of the card component)
  • Multi-variant Card compound component

Dev 3

  • Admin page

If three developers work on the same project without a standard structure, you may get three different approaches — yuck!

A CLI for generating boilerplates (components, modules, and pages) provides the benefit of a consistent structure.

1. Setup the CLI

We will use plopJS, a micro-generator framework for the command line.
PlopJS templates use the powerful Handlebars templating engine, which allows you to build semantic templates effectively.

Steps

  1. Add plopJS into your package.json:

json
"devDependencies": {
  "plop": "^2.3.0"
}
Enter fullscreen mode Exit fullscreen mode
  1. Install the dependency:

bash
npm install
Enter fullscreen mode Exit fullscreen mode

2. Define the Structure

Pages

A Page is a container for modules. It manages communication between modules inside it.
Read more about Pages.


jsx
<Page>
  <ModuleA />
  <ModuleB />
</Page>
Enter fullscreen mode Exit fullscreen mode

Modules

A Module is a container for components. It manages communication between the components inside it.
Read more about Modules.


jsx
<Module>
  <ComponentA />
  <ComponentB />
</Module>
Enter fullscreen mode Exit fullscreen mode

Components

A Component is a feature within a module.


jsx
<ComponentA>
  <section>
    <article>
      Article
    </article>
  </section>
</ComponentA>
Enter fullscreen mode Exit fullscreen mode

3. Create a plopfile.js Configuration

Create plopfile.js in the same directory as package.json:


javascript
module.exports = function (plop) {
  plop.setGenerator('component', { ... });
  plop.setGenerator('module', { ... });
  plop.setGenerator('page', { ... });
};
Enter fullscreen mode Exit fullscreen mode

For this tutorial, we will focus on creating a generator for a component.
You can find complete generators here.

Templates

  • Script file

  • Test file

  • Style file

  • Index file

Save all the templates inside a plop-templates folder.

4. Create a Generator

Here’s an example generator for a component:

Once everything is ready, let’s test the generator.

Add a new npm script named "cmd" that runs "npx plop".
If everything is set up correctly, you will see a list of generators to choose from.

Start answering the prompts, and once completed, your component will be generated:

Generated Files

  • Card.js

  • Card.style.js

  • Card.test.js

  • index.js

Summary

Using a CLI makes it easy to create apps, pages, modules, and components that follow the best practices and structure defined by you and your team.
By automating component generation, you save development time and ensure consistency, allowing developers to focus on building features.

📂 Full Source Code
https://github.com/abumuawiyah/react-boilerplate
Enter fullscreen mode Exit fullscreen mode

Top comments (0)