add-react-fn-component

Add React Components Quickly

A simple cli tool that allows developers to create React boiler-plate code and substantially increase development speed.

Since React 17 you no longer need to import react to each of your components and so this is not included with this module.

Install

npm i add-react-fn-component --save-dev

Run

npm run add-component

Follow The Prompts:

1. Enter React Component Name (must be PascalCase)
2. Which HTML element will the component return?
3. CSS or styled-components?:

Folder Structure:

If you have a /components directory within a /src directory component folders will be added to it, otherwise they will just be added to the /src directory as seen here:

|-src
| |-ComponentName
| | |-ComponentName.css
| | |-ComponentName.jsx

Examples:

1) styled components:

import styled from "styled-components";

export default function ComponentName() {
  return <StyledComponentName></StyledComponentName>;
}

const StyledComponentName = styled.ComponentHTML``;

for a lightweight/barebones alternative this PowerShell script is a third of the size as this package but with no validation checks!

2) external css:

css file:

.component-name {
  display: visible;
  /* enter css here */
}

jsx file:

import ComponentName.css;

export default function ComponentName() {
    return (
    <ComponentName className="ClassName">
    </ComponentName>
    );
}

3) neither:

export default function ComponentName() {
  return <ComponentName></ComponentName>;
}