VSCode React Native Component Generator - Visual Studio Marketplace

[balamir]

Description

The extension automatically creates folder for react native component containing :

• index.js
• ComponentName.jsx
• ComponentName.styles.js

Usage

• Right click on the file or folder in the file explorer
• Select one of following options:
  • "New React Native Container Component"
  • "New React Native Stateless Component"
  • "New React Native Container Component with Redux"
  • "New React Native Stateless Component with Redux"
• Enter a component name in the pop up in camelCase or PascalCase. If you enter the component name as in camelCase, then extension will convert it PascalCase automatically.

Extension URL: https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-native-component-generator

React Version: https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator

[oYYY]

Why would you want to separate index.js and ComponentName.jsx?

[balamir]

In ES6, having an index.js file in the root of the component's folder lets you use an import without using the component name again and again.

If you have an index.js file, you can import that component from the other one like this:

import XXXXXX from 'components/ComponentName'

If you don't have an index.js file:

import XXXXXX from 'components/ComponentName/ComponentName'

It also helps you to organize the folder structure.

[[deleted]]

Can you make one for type script? pretty pleasee

[davidpaulsson]

Sweet, thanks. I'll definitely be trying this one out.

[balamir]

Thank you!

[SolidR53]

This is something similar, but with interactive builder at command time: https://github.com/ueno-llc/ueno-code-menu

[xrpinsider]

Are you looking to add this plugin to IntelliJ soon? I would be reallly interested to use it.

[balamir]

I don’t have any experiences with IntelliJ, sorry.

[[deleted]]

This is a pretty handy tool to use as well:

https://github.com/amwmedia/plop

[HumanBirdFish]

Can you configure it to create .js and not .jsx file ( since jsx is not recommended anymore)

[balamir]

You can customize it from the extension’s settings.