Pretty extension pack for React

Pretty extension pack for React

Project Description

We implement this project to make the effortless way of creating and deploying the Syncfusion React and Vue components through VS code extension.

Summary

Now a days React and Vue Platforms are plays vital role in developing modern web application. So, this extension will reduce the effort of developer on spending more time on preparing basics sample to evaluate components for their use case. In this we are strictly ensured TS lint to maintain code standard.

How to Configure Our extension in VSCode:

1. In VisualStudio code goto View ( Extensions or use Ctrl + Shift + X shortcut.
2. Enter Pretty extension pack for React keyword in the search box and click install
3. Once installed successfully goto corresonding .tsx file and rightclick to where you want to insert our component.
4. You can notice Open Syncfusion React ToolBox in Context menu, from that you can select required component to integrate in your application.

Target Audience

Syncfusion Customers and Evaluators.

How it works:

This extension makes it easy to add React/Vue components to your Web application. It will start works, when we right-click on active editor page of Visual Studio Code. Once you have selected component from the context menu below configurations will automatically done by our extension,

1. Required packages for selected component will be included in ‘project.json’
2. Required packages for selected component will be installed in ‘node_modules‘
3. Code snippet for selected component will be added in the active text editor line.
4. Component package imports and required css files will be added in the application.
5. It will detect package duplication and ignore it. (If any packages is already exists in node_modules, it will not start installing those packages again for the reason of better performance.)

Create React App

1. Create the React App using react template Create React.
2. Right click and open VSCode context menu, select "Open Syncfusion React Toolbox" item
3. show quick popup and select ej2 components.

Demo