A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.

Overview

React Component Generator v1.0.0

A cool VSCode extension that lets you create your component's files/folders instantly with boilerplate code. Also automatically handles CSS file import if needed and exports the component from the index file of the Component directory.

How to install?

  • Go to Extenstion Marketplace or press Ctrl + Shift + X.
  • Search for uditkumar01.react-component-generator.
  • Then simply install the extension named React Component Generator.

rsz_screenshot_from_2021-06-04_15-40-20

How to use?

  • You need to open your react project in VSCode to use this extension.
  • Press Ctrl + Shift + P.
  • Search React Component generator.
  • Then simply press Enter to choose your current project.
  • In case you're getting this error, it means your VSCode is not opened in your project directory.

Screenshot from 2021-06-04 15-48-47

  • If you wish to clean your initial react app template choose Clean Template.
  • Choose component file type to create a new react component template.

Note: While naming components you can use space or other symbols which will be removed and the character next to it will be capitalized.

Features v1.0.0

  • Can create components using this extension instantly.
  • You can choose to create a test file as well as a CSS file for your component.
  • If you choose to create a CSS file as well its import will be done by default.
  • Creates boilerplate code for the component you generated.
  • Will automatically export the file from index.js
  • Can clean your create react app initial template using the Clean Template option easily Note: Use this option only when you are starting with your project
  • Now the import exports in the index file will be properly formatted 👌 .
  • Detects file type ( like TypeScript / JavaScript ) while making components.
  • Removes all characters other than alphanum and capitalizes the char next to it.

video_2021-06-04_15-31-13.mp4

Enjoy!

You might also like...
📚 Learn React + Redux by building a SoundCloud Client. Full tutorial included. Source Code for main tutorial but also extensions included.

react-redux-soundcloud I wrote a huge tutorial about setting up your own SoundCloud Client in React + Redux. Additonally you can find a real world exa

Hello Its an Open git-hub repo of React-Curd which helps you to understand the whole curd flow and functionalities

Hello Its an Open git-hub repo of React-Curd which helps you to understand the whole curd flow and functionalities. You guys can also contribute in this project if you want to

This single-page app allows you to browse through 250 pokemon cards, filter them by type and open every single card to see its description
This single-page app allows you to browse through 250 pokemon cards, filter them by type and open every single card to see its description

This single-page app allows you to browse through 250 pokemon cards, filter them by type and open every single card to see its description. I used React and Redux to fetch Pokemon data from the API.

A boilerplate for a Redux-React 'Cordova' application because react native is too new to use in prod. It also has Babel, Webpack and Gulp

react-redux-cordova-boilerplate A boilerplate for a Redux-React Cordova application using Babel, Webpack and Gulp Development Run npm install Run npm

A Chrome extension that creates Anki notes when you look up words with Jisho. Built with React.

Jisho Anki Create Anki notes directly from the Jisho. Set up Install Anki Connect Install this Chrome Extension Look up some words on Jisho! Develo

This website provides users the ability to create their own memes easily
This website provides users the ability to create their own memes easily

meme-generator This website provides users the ability to create their own memes easily. Features : Users can generate random meme images. Users can w

F-Curator - An offline application that comes at you all day long, and curate your own web favorites
F-Curator - An offline application that comes at you all day long, and curate your own web favorites

F-Curator F-Curator is an offline application that comes at you all day long and

Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optized code.

Tombola Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optimized c

A CLI tool to clean out boilerplate code created by create-react-app

Clean React Clean React is a CLI tool that removes and modifies some of the boilerplate files and code that are being generated when initiating a new

Owner
Udit Kumar
Programming is 90% thinking and 10% typing.
Udit Kumar
Create Chrome Extension (.crx) - Next generation chrome extension generater

Create Chrome Extension (.crx) Next generation chrome extension generater ⚡️ Lightning Fast HMR(use vite2) ?? Multiple Framework Support ?? Optimized

Yalda 80 Dec 2, 2022
Locku-browser-extension - Simple Browser extension to save passwords across browsers

Locku A Simple browser extension for password management. Why another Password m

Solai Raj 3 Jul 27, 2022
An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.

Universal Redux What and Why Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) render

Buck DeFore 462 May 22, 2022
Rollup + React + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterprise grade boilerplate

React package boilerplate by HackingBay Rollup + React 17 + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterpri

HackingBay 2 Jan 19, 2022
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.

erb ?? ?? ?? Express react boilerplate ?? ?? ?? Features Server side (Express). NoSQL database (MongoDB). Client side (React). Universal routing (reac

Huỳnh Trần Đăng Khoa 44 Nov 16, 2022
This is simple CRUD React & Redux application. You can create, update,delete your projects and also filter them by their priority

ProjectList This is simple CRUD React & Redux application.You can create,update,delete your projects and also filter them by their priority. Main page

Murodjon Tursunpulatov 3 Jul 5, 2021
Smart-vscode - React micro-frontends component that loads vue

English | 简体中文 React micro-frontends component that loads vue   This is a single

第一名的小蝌蚪 192 Nov 22, 2022
Chrome extension boilerplate (with React + TypeScript). Preconfigured with SASS, separated `public` directory, support multilingual

Chrome Extension Boilerplate (with React + TypeScript) Quickly build chrome extensions using TypeScript and React. 1. What's included This repository

Hieu Nguyen (Jack) 6 Aug 28, 2022
Simple Chrome extension React boilerplate.

Simple Chrome extension React boilerplate This is a simple chrome extension boilerplate made in React to use as a default structure for your future pr

Younes 6 May 25, 2022
Chrome Extension Boilerplate with React + Vite + TypeScript

Chrome Extension Boilerplate with React + Vite + TypeScript This project is listed in the Awesome Vite Table of Contents Intro Features Installation P

JongHak Seo 254 Dec 3, 2022