https://github.com/Pradeep-selva/react-gui

A simple, blazingly fast way to create React Components using a GUI
https://github.com/Pradeep-selva/react-gui

component fast generate-code generated-code gui javascript react reactjs svelte typescript

Last synced: about 2 months ago
JSON representation

A simple, blazingly fast way to create React Components using a GUI

• Host: GitHub
• URL: https://github.com/Pradeep-selva/react-gui
• Owner: Pradeep-selva
• License: mit
• Created: 2021-01-20T06:07:33.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-06-30T06:30:41.000Z (about 3 years ago)
• Last Synced: 2024-06-09T00:32:17.083Z (4 months ago)
• Topics: component, fast, generate-code, generated-code, gui, javascript, react, reactjs, svelte, typescript
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=pradeepselva.react-gui
• Size: 1.53 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazingly-fast - react-gui - A simple, blazingly fast way to create React Components using a GUI (TypeScript)

README

        


    



React GUI



  A blazingly fast way to bootstrap react components

  
Create your react components quickly & easily with a straightforward GUI



---

## Demo



    



## Installation

Download the extension by -

1. Searching for React GUI by pradeepselva on your vscode extensions.

2. Visit the extension's home page at `https://marketplace.visualstudio.com/items?itemName=pradeepselva.react-gui` and download it.

## Usage

1. Component creation -

   Open the component creation form from sidebar and fill it up as shown in the above demo.

   Click create and get started with producing logic for your component, without worrying about

   boilerplate. visit [this link](https://github.com/Pradeep-selva/react-gui/blob/master/media/react-gui-recording.gif) if the demo doesn't load.

2. Definition file initialization -

   - Highlight a list of props that you want to create a definition file (.d.ts) from.

   - Press ctrl+shift+p and search `Initialize Definition File`.

   - Press the `React GUI: Initialize Definition File` option.

   **eg:** You may highlight the props from lists like the following. The highlighted text in

   the following cases must be `label, placeholder, value`.

   1. `const {label, placeholder, value} = this.props;`

   2. `const InputField = ({label, placeholder, value}) =>`

## Built Using

- Typescript

- Svelte

- HTML/CSS

- Yo

## Steps to run locally

- Clone the repo using `git clone https://github.com/Pradeep-selva/react-gui`.

- install dependencies using `yarn` or `npm install`.

- Run `yarn watch` in your root directory.

- In your root directory press f5 and select `npm compile`.

## License

[MIT](LICENSE) © [Pradeep-selva](https://github.com/Pradeep-selva)