react-gn

A CLI for developing react applications.

• Installation
• Bootstrapping a new application
• Creating new components
• Creating new components with templates

Installation

react-gn can be installed globally:
npm i @react-gn/react-gn -g

Or with yarn:
yarn global add @react-gn/react-gn

new

Creates a new react application.

react-gn new <name> [options]
react-gn n <name> [options]

Description

react-gn uses create-react-app under the hood, which you need to install globally in order to use the new command. You can see the current file structure of a new create-react-app here.

Arguments

| Argument | Description |
| ------------- | ------------- |
| <name> | A name for the new react application. |

Options

| Option | Alias | Description | Default |
| -------------- | ------ | ----------------------------------------- | ------- |
| - -interactive | -i | When false, disables interactive mode. | true |
| - -ts | - | When passed, adds setup for typescript in the new app. | false |
| - -withRedux | -wr | When passed, adds setup for redux and redux thunk. | false |
| - -ejected | -e | When passed, ejects the create-react-app. | false |

Demo

You can checkout the result from running the new command with typescript and redux options applied in the demos.

generate

Generates a new component.

react-gn generate [options]
react-gn g [options]

Description

Generates new components and applies different options (i.e. class or functional component, styling options, typescript, redux etc...).

Options

| Option | Alias | Description | Default |
| -------------- | ------ | ----------------------------------------- | ------- |
| - -interactive | -i | When false, disables interactive mode. | true |
| - -ts | - | When passed, the component is created with typescript. | false |
| - -path | -p | A target path for the new component. | ./ |
| - -dirName | - | A name for the new component directory. | my-component |
| - -isClass | -class | Create a class component | false | | - -withRedux | -wr | Specify whether to use redux or not. | false |
| - -withHooks | -wh | Specify whether to use hooks or not. | false |
| - -withState | -ws | Specify whether to use state or not. | false |
| - -withPropTypes | -wpt | Specify whether to use prop types or not. | false |
| - -withCss | -wcss | Specify whether to use css for styling or not. | true |
| - -withLess | -wless | Specify whether to use LESS for styling or not. | false |
| - -withSass | -wsass | Specify whether to use SASS for styling or not. | false |
| - -withStyledComponents | -wsc | Specify whether to use Styled Components for styling or not. | false |

Demo

You can checkout the result from running the generate command with some options applied in the demos.

template

Generates a new component based on a template.

react-gn template [options]
react-gn t [options]

Description

Creation of new components can be customized using ejs templates.

Options

| Option | Alias | Description | Default |
| -------------- | ------ | ----------------------------------------- | ------- |
| - -interactive | -i | When false, disables interactive mode. | true |
| - -template | -t | Template directory name. | ./ |
| - -path | -p | A target path for the new component. | ./ |
| - -dirName | - | A name for the new component directory. | my-component |

Demo

Let's create a template for a container component. You can create a ./templates directory in your project and put the different templates there.

./templates/container/{Component}.jsx.ejs

import React, { Component } from "react";  
import { connect } from "react-redux";  
import "./<%= Component %>.css";  
import * as PropTypes from "prop-types";  
  
class <%= Component %> extends Component {  
 constructor(props) {
  super(props);
  this.state = <%= state %>;
 }
 render() {
  return (
    <div><%= Component %></div> 
  ); 
 }
}  
  
const mapDispatchToProps = dispatch => ({});  
  
const mapStateToProps = state => ({});  
  
<%= Component %>.propTypes = {  
 className: PropTypes.string
};  
  
export default connect(mapStateToProps, mapDispatchToProps)(<%= Component %>);  

./templates/container/{Component}.test.jsx

import React from 'react';  
import ReactDOM from 'react-dom';  
import <%= Component %> from './<%= Component %>';  
  
it('renders without crashing', () => {  
 const div = document.createElement('div');
 ReactDOM.render(<<%= Component %> />, div);
 ReactDOM.unmountComponentAtNode(div);
});  

./templates/container/{Component}.styles.css.ejs

.<%= Component %> {  
 color: red;
}  

Additionally you can create a data.json file which will contain data that will be used when rendering the templates. If this file is not provided the only data being passed to the templates will be the component name. In some cases if additional data is required (i.e. the initial state for a component etc...), you can create a data file:
./templates/container/data.json

{
  "state": {"count": 0}
}

By using the template command the templates will be rendered, inserting the component name and all additional data passed from data.json. Additionally {Component} from the template files name will be replace by the actual name provided in the command. When you initially start working with the template command, a good approach would be to copy and paste some of your existing components and convert them into ejs templates. Then you can use them when running the template command to create new components which are customized for your codebase.

You can checkout the result of running the template command in the demos.

Acknowledgements

react-gn would not be possible without the help from these existing projects:

• create-react-app
• inquirer
• ejs

Contributing

If something doesnt’t work, please file an issue.

License

react-gn is open source software licensed as MIT.