A Quick and Opinionated Way of Generating Code for Your React Projects

A Quick and Opinionated Way of Generating Code for Your React Projects

Code Gen Library Stop worrying about the small things. A quick and opinionated way of generating code for your React projects

Code Gen Library

Stop worrying about the small things. A quick and opinionated way of generating code for your React projects 🏗

Installation

npm install --save-dev code-gen-library

Usage

npx generate

or if installed globabally

generate

Once executed, The following message should appear

? [PLOP] Please choose a generator. (Use arrow keys)
❯ Component - Generate a React component ⚛️
  Util - Generate a util function 🛠

Default Options

1. React Components ⚛️

The CLI will ask you for the following information

Command | Description | Default value -- | -- | -- | -- Component name? | The name of your React component | Do you want a separate file for styles? | If you want your styles to live outside the main component | ✅ Do you want a separate file for models | If you want your models to live outside the component of the folder | ✅

Example

If we choose the component name to be input text and everything else goes to default we end up with.

✔  ++ /path/to/your/repo/src/components/InputText/InputText.tsx
✔  ++ /path/to/your/repo/src/components/InputText/index.ts
✔  ++ /path/to/your/repo/src/components/InputText/InputText.styles.ts
✔  ++ /path/to/your/repo/src/components/InputText/InputText.models.ts

2. Utils 🛠

Command | Description | Default value -- | -- | -- | -- Util name? | The name of your util function | What path shall we put it in? (src/utils) | The path in which the new folder is going to be added in | src/utils

If we choose the component name to be date format and everything else goes to default we end up with.

✔  ++ /path/to/your/repo/src/utils/dateFormat/dateFormat.ts
✔  ++ /path/to/your/repo/src/utils/dateFormat/index.ts

Customising

Right now you might be wondering.

What if I don't use TypeScript? What if I don't want to be asked every time if styles should be separate files? ...

All of these are very valid concerns and part of the reason why I decided to make this library. For those of you who want more customisation, a config file can be added with your preferences.

Create a cgl.config.js file on the root of your repo.

Here is some more information about what can be customised

Customisation Options

Rule Description Default value
componentsPath The path where the components will be put src/components/
jsx If the main component will be .jsx / .tsx or .js / .ts true
withTypescript All files will be generated with TypeScript .ts / .tsx format true
withModels Models to be separated from the main component. Models files will suffix with .models.* true
withStyles Styles to be separated from the main component. Styles files will suffix with .styles.* true
utilsPath The default path for the utils src/utils/

More to come soon

Download Details:

Author: harrisgeo88

Source Code: https://github.com/harrisgeo88/code-gen-library

react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.