This is a Yeoman generator that creates a new React component file for your application. The generator prompts the user for the component type and name and generates a component file with a template.
To get started with this project, you will need to have Node.js and NPM installed on your computer.
- Clone this repository to your local machine
- Run
yarn
to install the required dependencies - Run
yarn generate
to start the Plop CLI and create a new component file
yarn add react-plop-gen-component
"generate": "yarn plop --plopfile ./node_modules/react-plop-gen-component/plopfile.js"
yarn generate
When you run the yarn generate command, you will be prompted to choose a component type and name. Once you have provided this information, the generator will create a new component file in the src/components directory.
- View
- Common
- Layout
Here's an example component created with this generator:
/* -------------------------------------------------------------------------- */
/* Dependencies */
/* -------------------------------------------------------------------------- */
// Packages
import React, { useState } from "react";
// UI Components
// UI lib components (antD)
// Custom Hooks & Utils
// Redux Funcs
// Style (not required) use Boostrap
/* -------------------------------------------------------------------------- */
/* Common Component */
/* -------------------------------------------------------------------------- */
const TestComponent = () => {
/* ---------------------------------- Hooks --------------------------------- */
const [counter, setCounter] = useState(1);
/* -------------------------------- Callbacks ------------------------------- */
const handleChange = (e) => {
e.preventDefault();
// Do something...
};
const incrementCounter = () => {
setCounter((count) => count + 1);
};
/* --------------------------------- Rendering ------------------------------ */
return (
<div>
<h1>TestComponent</h1>
<p>Counter: {counter}</p>
<button onClick={incrementCounter}>Increment</button>
</div>
);
};
export default TestComponent;
This generator was created by Melek Lassoued, an experienced JavaScript developer.You can find more of my projects on my GitHub Account.
If you want to contribute to this project, please fork this repository and submit a pull request with your changes.
This project is licensed under the MIT License. See the LICENSE.md file for details.