CLI in React
Tags: react, reactarchitecture, reactcli
Published: 2019-07-26 15:02:28

---
title: CLI in React
published: true
description: 
tags: react, reactarchitecture, reactcli
---

## React and CLI
React have its own CLI but currently they are only supporting creating an app (create-react-app). create-react-app used to generate the boilerplate version of a React application thru command line.

~~~bash
npx create-react-app my-app
~~~

> create-react-app has taken care of setting up the main structure of the application as well as a couple of developer settings. Most of what you see will not be visible to the visitor 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 of React app that you or your team created have the same structure which is great for consistency across applications.

However UI development is not only app but also developing a components, modules and pages. Developer should know what need to be developed by looking at the wireframe that been provided by the designer.

![](https://thepracticaldev.s3.amazonaws.com/i/8jnjmmqc8c7xlhnnduog.png)

Without defined structure, you will have mixture of structure in your applications

### 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 1 variant of card component)
- Multi variant Card compound component

### Dev 3
- Admin page

If 3 developers working on same project, you might getting 3 different structure used in the project, yuck!

CLI for generate the boilerplates (component, module and page) will added benefit of providing a consistent structure. 

Lets start by setting up the CLI tool (plopJS)

## 1. Setup the CLI
We use [plopJS](https://plopjs.com/), the micro-generator framework via command-line. plopJS template is using powerful templating-engine called [Handlebars](https://handlebarsjs.com/). [Handlebars](https://handlebarsjs.com/) provides the power necessary to let you build semantic templates effectively.

### Steps

- Add plopJS into package.json

~~~json
"devDependencies": {
  "plop": "^2.3.0"
}
~~~

and run:

~~~bash
npm install
~~~

## 2. Define the structure

### pages
Container for modules. [Page](https://dev.to/aziziyazit/create-page-in-react-1mj6) manage communication between modules inside it.

~~~jsx
<Page>
 <ModuleA />
 <ModuleB />
</Page>
~~~

### modules
Container for components. [Module](https://dev.to/aziziyazit/create-module-in-react-5gg) manage communication between components inside it. 

~~~jsx
<Module>
 <ComponentA />
 <ComponentB />
</Module>
~~~

### components
Feature for the module. 

~~~jsx
<ComponentA>
 <section>
  <article>
   Article
  </article>
 </section>
</ComponentA>
~~~

## 3. Create a plopfile config

- Create "plopfile.js"
create the plopfile.js in the same path as package.json.

~~~javascript
module.exports = function (plop) {

    plop.setGenerator('component', {...})

    plop.setGenerator('module', {...})

    plop.setGenerator('page', {...})

};
~~~

For this tutorial/article, we will go thru on creating generator for a component. Complete generators can be found [here](https://github.com/abumuawiyah/react-boilerplate)

#### templates

- script file
![](https://thepracticaldev.s3.amazonaws.com/i/r27fotam79n9hsb5gra4.png)

- test file
![](https://thepracticaldev.s3.amazonaws.com/i/x2uujs7p0ixzyds82as9.png)

- style file
![](https://thepracticaldev.s3.amazonaws.com/i/kepuy300a41w40mn75sh.png)

- and index file
![](https://thepracticaldev.s3.amazonaws.com/i/4hv6xoqk5hygfei1usns.png)

> save all the templates inside folder plop-templates


## 4. Create a generator
As informed, we will show generator for component only.

![](https://thepracticaldev.s3.amazonaws.com/i/ccfwzpvste3l6j5hwi4a.png)

Everything seem to be ready, lets test the generator.

> I add new npm task "cmd" that will run "npx plop". If all of above setup correctly, you will see list of generators to choose 

![](https://thepracticaldev.s3.amazonaws.com/i/mgjhbmr7cbdp0k3gvif2.png)

start answering the question and once completed you see the component been generated

![](https://thepracticaldev.s3.amazonaws.com/i/9pnd4lc7hrrslvwvw8mp.png)

And lets is walkthrough what have been generated:

- Card.js
![](https://thepracticaldev.s3.amazonaws.com/i/duximoeepd4gx7dbbsts.png)

- Card.style.js
![](https://thepracticaldev.s3.amazonaws.com/i/i388mt9a9f0ov98gxuig.png)

- Card.test.js
![](https://thepracticaldev.s3.amazonaws.com/i/avulb267gnivlxw0e1c9.png)

- index.js
![](https://thepracticaldev.s3.amazonaws.com/i/vqtedre88usqy9serbws.png)

## Summary
CLI makes it easy to create an app, page, module and component that follows the best practices and structure defined by you and your team. Developers have other things to worry about and by automating component generation not only save their time but increase efficiency.

You can download the full source code here. 
https://github.com/abumuawiyah/react-boilerplate