add-react-fn-component
v1.6.3
Published
Create a react component in your '/src' or '/src/components' directory from the command-line by specifying the components name and HTML element. You can choose to create the component using styled-components boilerplate or an external css importing to the
Downloads
29
Maintainers
Readme
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:
- Enter React Component Name (must be PascalCase)
- Which HTML element will the component return?
- 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>;
}