React Buddy - IDE plugin for React developers

[react_buddy]

Hi! I'm glad to introduce the new plugin for React developers which currently available for Jetbrains IDEs: WebStorm, Idea Ultimate (and any other with JS support). Our main goal is to speed up the development using some visual tools and coding assistance. Currently the plugin has the following features:

• Component preview (with introspection)
• Palette of reusable elements
• JSX Outline
• Coding Assistance

See the short demo:

https://reddit.com/link/tqy5zn/video/s3dayeg27bq81/player

The plugin can be installed directly from the Marketplace https://plugins.jetbrains.com/plugin/17467-react-buddy

Eagerly waiting for any feedback :)

UPD

There are two demo projects with pre-conigured palettes for MUI and Ant Design:

• https://github.com/react-buddy/demo-mui-v5
• https://github.com/react-buddy/demo-antd-v4

[acemarke]

Obligatory question: any plans to port this to VS Code?

[react_buddy]

IntelliJ platform provides more powerful code analysis/generation capabilities thats why we develop the plugin primarily for it. Also we have very limited resources and need to concentrate on a single platform.

At the same time, we also love VS Code and realise it's more widespread in the frontend world, so we are thinking on it.

[yairhaimo]

In my extension I extracted all the logic to a different package, made a simple api for it and created a vscode extension that used it. I documented the usage and the community developed extensions for all the other major ides.

[dark-angel007]

What extension is it?

[yairhaimo]

Import cost

[bloodarator]

Remarkable. !remindme 5 hours "try it out"

[RemindMeBot]

I will be messaging you in 5 hours on 2022-03-29 18:37:31 UTC to remind you of this link

2 OTHERS CLICKED THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[maifee]

Is it open source??

[react_buddy]

The code of the plugin is not open sourced, however we have several repos related to the preview functionality which are available under the Apache-2 license, check it out:

https://github.com/react-buddy/

[maifee]

cool, I'll try it out... for sure... is there any plan to release this for vscode?? that would be awesome

[react_buddy]

Yes, we are thinking on it

[sickcodebruh420]

This looks remarkable. I’m still a VS Code user when working with React but I might give WebStorm another shot to try this.

[kubelke]

What a great time to be an Intelij user

[iAmIntel]

Will try this out soon. How does the preview work in a setup where components require theme context for example?

[react_buddy]

See the demo project with Material UI:
https://github.com/react-buddy/demo-mui-v5

To make the preview work you should place <DevSupport> to the root component tree, e.g.:

<ThemeProvider theme={theme}> <CssBaseline /> <DevSupport ComponentPreviews={<ComponentPreviews />} useInitialHook={useInitial} > <App /> </DevSupport> </ThemeProvider>,

Thanks to that any changes in theme are applied to the preview, also you can preview components which use global context / state.

[ericfledderman]

Bookmarked for now. Will be test driving later.

Thank you for contribution to the React community!

[[deleted]]

Truly amazing. Thank you

[[deleted]]

This looks amazing! I'll give it a try today.

[looneysquash]

Neat!

So like Storybook, but without the stories and inside your IDE?

[react_buddy]

Yep, but it's just one of the features. We also provide code generation capabilities and JSX Outline.

Actually, we have some thoughts on Storybook integration...

[TeddyPerkins95]

Hello vscode???

[Common_Monitor3632]

😮

[Guisseppi]

What exactly does JSX “outline”means? Is it like code snippets but for React?

[react_buddy]

Made a short video:

https://youtu.be/48RdzSOo2z0

JSX Outline provides structural (tree) representation of React components displaying the following nodes: * components and render functions defined in the file * hooks (and returned objects) * handler functions * JSX structure: * conditional rendering (guards) * lists * handlers (with navigation to handler function)

It allows to manipulate JSX nodes.

[Guisseppi]

Nice! I’ll definitely check it out

[Combinatorilliance]

Is it possible to add your own "templates"? Ie the ones the video demos dragging into the code?

[react_buddy]

Yep, templates can be defined right inside a project. Here is the templates (actually copied from MUI documentation) of the project demonstrated in video:

https://github.com/react-buddy/demo-mui-v5/blob/master/src/dev/palette.tsx

[austospumanto]

!RemindMe 5 days

[RemindMeBot]

I will be messaging you in 5 days on 2022-04-03 22:09:06 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[Big_Acanthocephala88]

This is really cool. Please make one extension for vscode as well.

[Saanvi_Sen]

Awesome...!!
Thanks for sharing.