Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>React Create ComponentNew to Visual Studio Code? Get it now.

React Create Component

Javier Gutierrez

|
1,263 installs
| (2) | Free
Create your React Js components (Currently) in a fast way, with multiple variety in less than 5 seconds. 🚀
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

React Create Component

Create your React Js components (Currently) in a fast way, with multiple variety in less than 5 seconds.

Features

  • Create a component depending on the selected language.
  • Create a style file depending on the type of style or extension selected.
  • You can create styles per module.
  • You can create a component with built-in style import.
  • It generates a barrel in your folder.
  • In the tsx files, integrate the interface.

Integrations

Integrations Technologies
Framework or library React
Language Javascript, Typescript
Style extensions css, sass, scss
Styles options module, Style-Component, tradicional

How does it work?

Use from a specific path

Working You can use it by clicking on the folder where you want your component to be and clicking on the "Create Component" option.

Use by entering the path

Working You can also use it by giving it by executing the "Create Component" command from the command palette To create a component it can also be executed with the following keys (ctrl + shift + l)

Settings

Working You can make plugin settings to make component creation much faster.

Structure Results

ComponentFolder
│── Component.tsx        // The component can have the extension ".tsx" or ".jsx"
|── Styles               // Folder where you store the styles
│    └── Component.css   // The extension will depend on the selected option
└── index.tsx            // Index file to export the component

Component result example

Javascript

import React from 'react';
import './styles/ComponentName.css';

const ComponentName = () => {
	return <div className='ComponentName'>ComponentName</div>;
};

export default ComponentName;

css

.ComponentName {
}

Barrel

export { default as ComponentName } from './ComponentName';

License

React Create Component is MIT licensed.

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft