1__NUXT_JSONP__("/blog", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w){return {data:[{posts:[{weight:l,published:m,tags:[],_id:h,body:"Itâs been almost two years since we released the beta version of React Buddy. Based on the expertise and success of JPA Buddy - we had hopes that we could also deliver useful tooling for the React.js ecosystem. In the initial releases of the plugin we were concentrated mainly on visual features like the Preview and the JSX Outline, but later we realized that we can even improve coding assistance - more generic and essential features for React development.\n\nRecently, the plugin has been added to the WebStormâs featured plugins list and surpassed 100k total downloads. It wouldnât be possible without your support and feedback. So, thank you all for using the plugin and complementary npm packages!\n\nThe team will continue to work on features for React.js and other web technologies as part of the amazing JetBrains crew.\n\nWeâll come up later with more details, meanwhile you can read the \u003Ca href=\"https:\u002F\u002Fblog.jetbrains.com\u002Fidea\u002F2023\u002F09\u002Fjpa-buddy-and-react-buddy-join-jetbrains\u002F\" target=\"_blank\"\u003Epost\u003C\u002Fa\u003E in JetBrains blog.\n\nFollow @reactbuddy Twitter to get instant updates.",summary:n,slug:"react-buddy-become-part-of-the-jet-brains-family",seo_keywords:b,short_title:b,seo_title:b,title:b,seo_description:b,published_date:o,createdAt:"2023-09-06T03:43:21.130Z",updatedAt:"2023-09-11T13:27:14.493Z",__v:f,author:p,thumbnail:{_id:q,name:"2023-09-06 07.40.16.jpg",alternativeText:g,caption:g,hash:"2023_09_06_07_40_16_29442a9a18",ext:c,mime:d,size:166.89,width:1360,height:600,url:"\u002Fuploads\u002F2023_09_06_07_40_16_29442a9a18.jpg",formats:{thumbnail:{name:"thumbnail_2023-09-06 07.40.16.jpg",hash:"thumbnail_2023_09_06_07_40_16_29442a9a18",ext:c,mime:d,width:r,height:108,size:37.74,path:a,url:"\u002Fuploads\u002Fthumbnail_2023_09_06_07_40_16_29442a9a18.jpg"},large:{name:"large_2023-09-06 07.40.16.jpg",hash:"large_2023_09_06_07_40_16_29442a9a18",ext:c,mime:d,width:1000,height:441,size:216.4,path:a,url:"\u002Fuploads\u002Flarge_2023_09_06_07_40_16_29442a9a18.jpg"},medium:{name:"medium_2023-09-06 07.40.16.jpg",hash:"medium_2023_09_06_07_40_16_29442a9a18",ext:c,mime:d,width:750,height:331,size:156.81,path:a,url:"\u002Fuploads\u002Fmedium_2023_09_06_07_40_16_29442a9a18.jpg"},small:{name:"small_2023-09-06 07.40.16.jpg",hash:"small_2023_09_06_07_40_16_29442a9a18",ext:c,mime:d,width:s,height:221,size:96.8,path:a,url:"\u002Fuploads\u002Fsmall_2023_09_06_07_40_16_29442a9a18.jpg"}},provider:t,related:[h],createdAt:"2023-09-06T03:40:38.294Z",updatedAt:"2023-09-06T03:43:21.146Z",__v:f,id:q},id:h,image:"\u002Fcms\u002Fuploads\u002F2023_09_06_07_40_16_29442a9a18.jpg",text:n,date:o},{weight:l,published:m,tags:[],_id:i,body:"Hello world! Iâm happy to introduce React Buddy - a plugin for Jetbrains IDEs, that aims to increase React development speed and efficiency. \n\nWe published the beta version in Oct 2021 and now, after several months of polishing, the first stable version is [available](https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17467-react-buddy) for everyone! The plugin can be used in any JetBrains IDE which supports JavaScript â primarily we talk about WebStorm and IJ Ultimate. \n\n\n\n\n## The story behind \n\nOur team also works on a platform for rapid business application development. The idea of the platform is to provide an alternative to low-code\u002Fno-code solutions with similar efficiency in terms of typical development tasks but with fully transparent code generation for the battle-proven stack, instead of proprietary high-level abstractions and DSLs. One of the integral parts of the platform is UI development. We made an RnD and realized that it is possible to bring visual tools right into the IDE, closing the gap to WYSIWIG editors. The crucial part is that developers still stay on the familiar and convenient ground of their favorite IDE. \n\nAlso, despite IntelliJ providing excellent capabilities to work with code (refactoring, code completion etc) it seems there is a lack of specific supp
1ort for React.js which we can fulfill. \n\nGradually we realized that itâs not fair to limit the audience of the tooling we make by our brand-new framework users only. We made a humble assumption that it may be useful for a wider audience of developers. \n\nFinally, weâve got a similar, very successful experience of extracting dedicated framework tooling to a generic plugin for a wide audience of Java Persistence users. The [JPA Buddy](https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F15075-jpa-buddy) plugin is proven to be useful for hundreds of thousands of developers. \n\nThatâs how the idea of React Buddy plugin was born. \n\n## Mission \n\nWe formulated several goals and principles that guide our movement: \n\n* Make development faster by reducing the amount of boilerplate required to be hand-coded \n* Make code -\u003E visual representation (visual testing) and vice-versa as seamless as possible \n* Provide means to utilize reusable components \n* Stay non-invasive: donât break existing code, donât force to use any (coding) conventions, in other words leave as much freedom of choice as possible \n* Aid to write correct code \n\n## Scope \n\n### Component preview \n\nOne of the major features of the plugin is the live component preview right inside the IDE. The preview is based on the projectâs dev server and requires minimal setup. \n\n* Using the gutter icon, you can toggle the preview of a particular component \n* The Preview has introspection capabilities: a click on any UI element navigates to the source code and vice versa \n* The selected component is highlighted in the preview \n* We can see the rendered component side-by-side to the code or detach the preview window \n\n\n\n\nIn order to make the preview work we should add the `@react-buddy\u002Fide-toolbox` dependency to the project and inject `\u003CDevSupport\u003E` tag to the root component tree. The plugin helps to automate this process by executing all necessary steps.\n\n### Palette \n\nTypically, when some UI Kit is used developers frequently peek at documentation to search for the suitable component and in most cases copy-paste example code. The Palette is a tool-window containing those reusable components - primarily UI Kit elements. It can contain any JSX though â consider it as building blocks. \n\nSo, the main problem Palette solves is the UI Kit discoverability â no need to open the website with documentation and examples. A developer can iterate through the component list right in the IDE. Components are categorized and may have several variants according to use-cases. For example, the Button component in MUI palette has three variants: text, contained and outlined. Any component (variant) can also be previewed: \n\n\n\nThe second feature is code generation â you can just dragânâdop (or double click) any component right into the source code editor and React Buddy will paste it to the corresponding position. The palette can be defined in the project or brought as a dependency â developers can create their own palettes (for popular or proprietary UI libraries) and publish them as npm packages. See two demo projects with pre-configured MUI and Ant Design palettes: \n\n[https:\u002F\u002Fgithub.com\u002Freact-buddy\u002Fdemo-mui-v5](https:\u002F\u002Fgithub.com\u002Freact-buddy\u002Fdemo-mui-v5) \n[https:\u002F\u002Fgithub.com\u002Freact-buddy\u002Fdemo-antd-v4](https:\u002F\u002Fgithub.com\u002Freact-buddy\u002Fdemo-antd-v4)\n\n### JSX Outline \n\nJSX Outline provides a structural (tree) representation of React components. The goal is to help to discover the complex component structure and provide navigation to the code. It displays the following nodes: \n\n* Components and render functions defined in the file \n* Hooks (and returned objects) \n* Handler functions \n* JSX structure:\u003Cdiv style=\"margin-top:11px;\"\u003E\u003C\u002Fdiv\u003E\n * conditional rendering (guards) \n * lists (maps) \n * handlers (with navigation to handler function) \n\nIt is not just read-only and allows to manipulate JSX nodes: copy\u002Fpaste, cut and even dragânâdrop components from the Palette. \n\n\n\n### Coding Assistance \n\nWe know that a fair number of developers donât like visual tools at all, thus, we offer code editor features. Itâs possible to generate event handlers with a valid TypeScript signature (typed parameters) using IDEâs code generation action and quick fix. \n\n\n\n \nThe code editor is enriched with gutter icons designating React hooks and handler functions. That helps to observe the component structure and navigate the corresponding usage(s). \n\n \n\n## Whatâs Next? \n\nThankfully the strategy of the product evolution looks relatively straightforward: \n\n* Collect more needs and pain points of React developers and try to facilitate solving them \n* Analyze what the most popular approaches and libraries in React ecosystem are and design more visual tools to increase eff
1iciency \n\nWe cannot share the concrete roadmap yet, but the nearest releases will include: \n* More powerful palette\u002Fsnippets mechanism, which will be parametrized and allow to generate more sophisticated and high-level code (including hooks, handlers, etc.). The ultimate goal is to generate data-bound UI in a few clicks \n* Components metadata protocol: will help to provide more meaningful captions in the JSX Outline and group properties in the component inspector \n\nThere are some ideas for further releases: \n\n* Modern live templates for React \n* Storybook integration \n* More ready-to-use palettes \n\nAnyway, we will align further development according to usersâ feedback. \n\n### What about VS Code? \n \nWe love VS Code and realize itâs the most popular IDE for React development. However, the IntelliJ platform provides excellent code analysis\u002Fgeneration capabilities, thatâs why we decided to develop the plugin primarily for it. Also, we have limited resources and need to concentrate on a single platform right now. Once we create a fully functional and successful product for one platform, we will definitely put the idea of VS Code analogue on the table. \n\n### Conclusion \n\nThis article presents a new plugin for React developers who use WebStorm (or IDEA Ultimate). Some unique features of the tool are described, but we realize that a long road of product polishing is ahead. The plugin intended to be useful for any React developer. [Try it out](https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17467-react-buddy) and share your feedback with us - this will help a lot to steer the product in the right direction! \n",summary:u,slug:"meet-react-buddy-an-ide-plugin-increasing-react-development-productivity",seo_keywords:e,short_title:e,seo_title:e,title:e,seo_description:e,published_date:v,createdAt:"2021-06-24T11:26:07.362Z",updatedAt:"2022-04-07T08:01:11.012Z",__v:f,author:p,thumbnail:{_id:w,name:"ReactBuddy_Start.png",alternativeText:g,caption:g,hash:"React_Buddy_Start_a1855754c8",ext:j,mime:k,size:106.81,width:727,height:365,url:"\u002Fuploads\u002FReact_Buddy_Start_a1855754c8.png",formats:{thumbnail:{name:"thumbnail_ReactBuddy_Start.png",hash:"thumbnail_React_Buddy_Start_a1855754c8",ext:j,mime:k,width:r,height:123,size:56.14,path:a,url:"\u002Fuploads\u002Fthumbnail_React_Buddy_Start_a1855754c8.png"},small:{name:"small_ReactBuddy_Start.png",hash:"small_React_Buddy_Start_a1855754c8",ext:j,mime:k,width:s,height:251,size:148.71,path:a,url:"\u002Fuploads\u002Fsmall_React_Buddy_Start_a1855754c8.png"}},provider:t,related:[i],createdAt:"2022-04-06T14:11:03.767Z",updatedAt:"2022-04-06T14:11:06.546Z",__v:f,id:w},id:i,image:"\u002Fcms\u002Fuploads\u002FReact_Buddy_Start_a1855754c8.png",text:u,date:v}],_img:{}}],fetch:{},mutations:void 0}}(null,"React Buddy becomes part of the JetBrains Family ",".jpg","image\u002Fjpeg","Meet React Buddy â an IDE plugin increasing React development productivity!",0,"","64f7f5591eeaff000d9b3d3b","60d46bcfb5cd24000e2c8d5c",".png","image\u002Fpng",1,true,"We are happy to announce that React Buddy has been acquired by JetBrains!","2023-09-11","Vlad Minaev","64f7f4b61eeaff000d9b3d3a",245,500,"local","Hello world! Iâm happy to introduce React Buddy - a plugin for Jetbrains IDEs, that aims to increase React development speed and efficiency. ","2022-04-06","624d9f77df298c009c2e7c3d")));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.