I am using create-react-app. Is there a command to create a component to scaffold the files.
Right now I am manually creating the files. Say if the component name is Button, I create a folder named Button inside the component folder and then create Button.js and Button.css files.
Is there any CLI commands to do this using create-react-app? I know there is a way to do this Angular CLI but don't know anything with React CLI.
You may use directly without installing the generate-react-cli
npx generate-react-cli component MyComponent
Which will install a component based on your project preferences (ex: typescript, scss, etc..).
A file called generate-react-cli.json will be created where all the settings will be stored for future use.
Another way is to create files manually and use snippets to generate the code.
For example, take a look at this JavaScript/React VS Code extension. You can also create your own snippets or find other extensions if you were interested.
rcc and hit tab to create a basic React component.
you can use https://www.npmjs.com/package/generate-react-component for this,
this will help you to create state and stateless component also known as functional and class components.
Two Easy Ways to create Components in React:
1.) With CLI npx generate-react-cli component Box
2.) Install this Extension for VS code. Create a file name with component.js manually and just type this command rafce and press the tab. You will get the below code automatically.
import React from 'react'
const HeaderComponent = () => {
return (
<span>HeaderComponent</span>
)
}
export default HeaderComponent
In one of the recent projects I used Plop JS. Its very useful to generate files with same set of code.
Plop is what I like to call a "micro-generator framework." Now, I call it that because it is a small tool that gives you a simple way to generate code or any other type of flat text files in a consistent way. You see, we all create structures and patterns in our code (routes, controllers, components, helpers, etc). These patterns change and improve over time so when you need to create a NEW insert-name-of-pattern-here, it's not always easy to locate the files in your codebase that represent the current "best practice." That's where plop saves you. With plop, you have your "best practice" method of creating any given pattern in CODE. Code that can easily be run from the terminal by typing plop. Not only does this save you from hunting around in your codebase for the right files to copy, but it also turns "the right way" into "the easiest way" to make new files.
Check out the react-component template from my new library templates.
Supports: typescript, testing library, storybook, multiple css languages, automatic formatting, and more!
Feedback or contributions are welcome!
