The latest articles on DEV Community by Kevin Park (@xkevinpark). https://dev.to/xkevinpark https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F630826%2F72c875f4-9ad9-4d13-821f-6d723c31a8ea.jpeg https://dev.to/xkevinpark en Kevin Park Thu, 13 May 2021 19:49:07 +0000 https://dev.to/xkevinpark/work-smarter-not-harder-with-reactype-49mg https://dev.to/xkevinpark/work-smarter-not-harder-with-reactype-49mg <h1> Excited to announce the launch of ReacType! </h1> <p>This morning, my team released ReacType 7.0, a rapid prototyping tool that enables developers to build React components via an intuitive drag-and-drop canvas, apply CSS styles, and generate custom boilerplates.</p> <div class="ltag__link"> <a href="https://xkevinpark.medium.com/work-smarter-not-harder-to-create-a-react-app-with-reactype-94dd60be5873" class="ltag__link__link" rel="noopener noreferrer"> <div class="ltag__link__pic"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afill%3A88%3A88%2F1%2A90I88K-dmoUsyf4TQ8E-nA.jpeg" alt="Kevin Park"> </div> </a> <a href="https://xkevinpark.medium.com/work-smarter-not-harder-to-create-a-react-app-with-reactype-94dd60be5873" class="ltag__link__link" rel="noopener noreferrer"> <div class="ltag__link__content"> <h2>Work Smarter, Not Harder To Create A React App With ReacType | by Kevin Park | Frontend Weekly | Medium</h2> <h3>Kevin Park ・ <time>Jun 2, 2021</time> ・ <div class="ltag__link__servicename"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fmedium-f709f79cf29704f9f4c2a83f950b2964e95007a3e311b77f686915c71574fef2.svg" alt="Medium Logo"> xkevinpark.Medium </div> </h3> </div> </a> </div> <p><strong>HOW DOES IT WORK?</strong></p> <ul> <li>Build React components via drag-and-drop interface</li> <li>Generate code dynamically in a real-time code preview</li> <li>Design collaboratively via built-in annotations</li> <li>Save &amp; share templates</li> <li>Pass props and manage state in table view</li> <li>Customize styles via CSS editor</li> </ul> <p><strong>WHY REACTYPE?</strong></p> <ol> <li>Eases learning curve for developers new to React frameworks</li> <li>Accelerates development while maintaining product vision</li> <li>Streamlines communication between developers and designers</li> </ol> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/open-source-labs" rel="noopener noreferrer"> open-source-labs </a> / <a href="https://github.com/open-source-labs/ReacType" rel="noopener noreferrer"> ReacType </a> </h2> <h3> Prototyping Tool for exporting React/Typescript Applications! </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div> <p><a href="https://github.com/open-source-labs/ReacType/stargazers" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/1f05e83f3bc765404e5a854d347bbb8635550cf865bc65fd31b4f2132363a6e3/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6f70656e2d736f757263652d6c6162732f5265616354797065" alt="StarShield"></a> <a href="https://github.com/open-source-labs/ReacType/graphs/contributors" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/a7c1375f40e1abb7e02e12e4cc7fa262a97941e67a1752b790743830ddfa4034/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f636f6e7472696275746f72732f6f70656e2d736f757263652d6c6162732f5265616354797065" alt="ContributorShield"></a> <a href="https://github.com/open-source-labs/ReacType/network/members" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/84fd53bb322f48c4f03c339ea6700173d54def598b3b8a55e023a7fe853837cd/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f6f70656e2d736f757263652d6c6162732f5265616354797065" alt="ForksShield"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/cce5a2a14b0faab422e0bfcdc074afb46089831a0bf5930a7d8af3f31b98f847/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d626c75652e737667"><img src="https://camo.githubusercontent.com/cce5a2a14b0faab422e0bfcdc074afb46089831a0bf5930a7d8af3f31b98f847/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d626c75652e737667" alt="License: MIT"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/811c01ed090d611c797e2830a9730dc898514b90af99107207168fd4fc1e46ed/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d32312e302e302d6f72616e6765"><img src="https://camo.githubusercontent.com/811c01ed090d611c797e2830a9730dc898514b90af99107207168fd4fc1e46ed/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d32312e302e302d6f72616e6765" alt="Version: 21.0.0"></a></p> </div> <p> <a rel="noopener noreferrer" href="https://github.com/open-source-labs/ReacType./resources/readme.png"><img width="1000" src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fopen-source-labs%2FReacType.%2Fresources%2Freadme.png"></a> </p> <p><a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/29d02b3669d6450d67e043cf5909e740dcb94c1e2306d88ac48b15b4ec55dc65/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6a6176617363726970742d2532333332333333302e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6a617661736372697074266c6f676f436f6c6f723d253233463744463145"><img src="https://camo.githubusercontent.com/29d02b3669d6450d67e043cf5909e740dcb94c1e2306d88ac48b15b4ec55dc65/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6a6176617363726970742d2532333332333333302e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6a617661736372697074266c6f676f436f6c6f723d253233463744463145" alt="JavaScript"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/d4cfec9550517aa67567e29843e3880ebf50bd7eeceafcd3b82875f17c9f564e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f747970657363726970742d2532333030374143432e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d74797065736372697074266c6f676f436f6c6f723d7768697465"><img src="https://camo.githubusercontent.com/d4cfec9550517aa67567e29843e3880ebf50bd7eeceafcd3b82875f17c9f564e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f747970657363726970742d2532333030374143432e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d74797065736372697074266c6f676f436f6c6f723d7768697465" alt="TypeScript"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/8477a50d7210f0f3bf15fbe5b44809296b75f2101a2927818599d72c8ea72cef/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6e6f64652e6a732d3644413535463f7374796c653d666f722d7468652d6261646765266c6f676f3d6e6f64652e6a73266c6f676f436f6c6f723d7768697465"><img src="https://camo.githubusercontent.com/8477a50d7210f0f3bf15fbe5b44809296b75f2101a2927818599d72c8ea72cef/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6e6f64652e6a732d3644413535463f7374796c653d666f722d7468652d6261646765266c6f676f3d6e6f64652e6a73266c6f676f436f6c6f723d7768697465" alt="NodeJS"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/e01b1cfdcc52e26519db194c2a7b4b93eafe7a614a0dab69cfe967864a8f1119/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f657870726573732e6a732d2532333430346435392e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d65787072657373266c6f676f436f6c6f723d253233363144414642"><img src="https://camo.githubusercontent.com/e01b1cfdcc52e26519db194c2a7b4b93eafe7a614a0dab69cfe967864a8f1119/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f657870726573732e6a732d2532333430346435392e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d65787072657373266c6f676f436f6c6f723d253233363144414642" alt="Express.js"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/f93e05694a6f01f2f6a37713a454a942442a5ff2b33083891096a6f7e57842f8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f72656163742d2532333230323332612e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d7265616374266c6f676f436f6c6f723d253233363144414642"><img src="https://camo.githubusercontent.com/f93e05694a6f01f2f6a37713a454a942442a5ff2b33083891096a6f7e57842f8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f72656163742d2532333230323332612e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d7265616374266c6f676f436f6c6f723d253233363144414642" alt="React"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/e295d0d1e6177be7fea7a386b987eb60077135419f901c302c2d1d327528b776/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f72656475782d2532333539336438382e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d7265647578266c6f676f436f6c6f723d7768697465"><img src="https://camo.githubusercontent.com/e295d0d1e6177be7fea7a386b987eb60077135419f901c302c2d1d327528b776/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f72656475782d2532333539336438382e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d7265647578266c6f676f436f6c6f723d7768697465" alt="Redux"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/e3aef779877ecfad97fc1e213d3c449a685e6766c0c7fdca210802d4a1f59302/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f536f636b65742e696f2d626c61636b3f7374796c653d666f722d7468652d6261646765266c6f676f3d736f636b65742e696f266261646765436f6c6f723d303130313031"><img src="https://camo.githubusercontent.com/e3aef779877ecfad97fc1e213d3c449a685e6766c0c7fdca210802d4a1f59302/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f536f636b65742e696f2d626c61636b3f7374796c653d666f722d7468652d6261646765266c6f676f3d736f636b65742e696f266261646765436f6c6f723d303130313031" alt="Socket.io"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/6174dd14c5b54da371b2c7c7f4d93f67a159a3e83eaa0eb3aa31e5c7e65ae6f3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d7669746573742d2532333030383030303f7374796c653d666f722d7468652d6261646765266c6f676f3d766974657374266c6f676f436f6c6f723d7768697465"><img src="https://camo.githubusercontent.com/6174dd14c5b54da371b2c7c7f4d93f67a159a3e83eaa0eb3aa31e5c7e65ae6f3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d7669746573742d2532333030383030303f7374796c653d666f722d7468652d6261646765266c6f676f3d766974657374266c6f676f436f6c6f723d7768697465" alt="Vitest"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/87fa957277dd6dd4baa3c76bbfca7a77727094ec9cda4410e6226f8725f176f4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f426162656c2d4639444333653f7374796c653d666f722d7468652d6261646765266c6f676f3d626162656c266c6f676f436f6c6f723d626c61636b"><img src="https://camo.githubusercontent.com/87fa957277dd6dd4baa3c76bbfca7a77727094ec9cda4410e6226f8725f176f4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f426162656c2d4639444333653f7374796c653d666f722d7468652d6261646765266c6f676f3d626162656c266c6f676f436f6c6f723d626c61636b" alt="Babel"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/94d83dc5838e2784bee25fe9e019bc2fda128676f32cef2f06baa0f6f3849b8c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6769742d2532334630353033332e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d676974266c6f676f436f6c6f723d7768697465"><img src="https://camo.githubusercontent.com/94d83dc5838e2784bee25fe9e019bc2fda128676f32cef2f06baa0f6f3849b8c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6769742d2532334630353033332e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d676974266c6f676f436f6c6f723d7768697465" alt="Git"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/dba3dfd2738d8ef9cda9409fb0b4e6edb41483f05ec5f81a1000accdf066f09a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d55492d2532333030383143422e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6d7569266c6f676f436f6c6f723d7768697465"><img src="https://camo.githubusercontent.com/dba3dfd2738d8ef9cda9409fb0b4e6edb41483f05ec5f81a1000accdf066f09a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d55492d2532333030383143422e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6d7569266c6f676f436f6c6f723d7768697465" alt="MUI"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/46b1864fcb2994add4798cde0d2b54181ddc58905c827563a2ea8c09a93bffa9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f456c656374726f6e2d3139313937303f7374796c653d666f722d7468652d6261646765266c6f676f3d456c656374726f6e266c6f676f436f6c6f723d7768697465"><img src="https://camo.githubusercontent.com/46b1864fcb2994add4798cde0d2b54181ddc58905c827563a2ea8c09a93bffa9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f456c656374726f6e2d3139313937303f7374796c653d666f722d7468652d6261646765266c6f676f3d456c656374726f6e266c6f676f436f6c6f723d7768697465" alt="Electron.js"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/ec9b2bbaccf6915a29050ce24c10cd9b481b0c41b0bf5194add3e69f49a9be3c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d6f6e676f44422d2532333465613934622e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6d6f6e676f6462266c6f676f436f6c6f723d7768697465"><img src="https://camo.githubusercontent.com/ec9b2bbaccf6915a29050ce24c10cd9b481b0c41b0bf5194add3e69f49a9be3c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d6f6e676f44422d2532333465613934622e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6d6f6e676f6462266c6f676f436f6c6f723d7768697465" alt="MongoDB"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/873c09f11f469258183d6e64e34c12195f5f7f3d311b4c7a1461339a7255ee00/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4157532d2532334646393930302e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d616d617a6f6e2d617773266c6f676f436f6c6f723d7768697465"><img src="https://camo.githubusercontent.com/873c09f11f469258183d6e64e34c12195f5f7f3d311b4c7a1461339a7255ee00/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4157532d2532334646393930302e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d616d617a6f6e2d617773266c6f676f436f6c6f723d7768697465" alt="AWS"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/c9a85f6869aa992f1500dd9d4d4bdff7d405605292ca152587394c1f92552d4f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646f636b65722d2532333064623765642e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d646f636b6572266c6f676f436f6c6f723d7768697465"><img src="https://camo.githubusercontent.com/c9a85f6869aa992f1500dd9d4d4bdff7d405605292ca152587394c1f92552d4f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646f636b65722d2532333064623765642e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d646f636b6572266c6f676f436f6c6f723d7768697465" alt="Docker"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/7f9fc6aa722ec29578bf496afb870a37ac9f252dd364d30a248d56030d9bd496/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f566974652d6f72616e67653f6c6f676f3d76697465267374796c653d666f722d7468652d6261646765"><img src="https://camo.githubusercontent.com/7f9fc6aa722ec29578bf496afb870a37ac9f252dd364d30a248d56030d9bd496/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f566974652d6f72616e67653f6c6f676f3d76697465267374796c653d666f722d7468652d6261646765" alt="Vite"></a></p> <div class="markdown-heading"> <h1 class="heading-element">ReacType </h1> </div> <p><strong>ReacType</strong> is a React prototyping tool that allows users <em>visualize</em> their application architecture dynamically, employing an interactive drop and drag display with real-time component code preview and a collaboration room that features live video and chat functionality. Generated code can be exported as a <strong>React</strong> app for developers employing React component architecture alongside the comprehensive type-checking of <strong>TypeScript</strong>. In other words, <strong>you can draw prototypes and export React / TypeScript code!</strong></p> <p> <a rel="noopener noreferrer" href="https://github.com/open-source-labs/ReacType./resources/v21%20MUI%20Canvas.png"><img width="1000" src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fopen-source-labs%2FReacType.%2Fresources%2Fv21%2520MUI%2520Canvas.png"></a> </p> <p>Visit <a href="https://reactype.dev" rel="nofollow noopener noreferrer">reactype.dev</a> to learn more about the product.</p> <p>Follow <a href="https://twitter.com/reactype" rel="nofollow noopener noreferrer">@ReacType</a> on Twitter for important announcements.</p> <div class="markdown-heading"> <h2 class="heading-element">Changes with Version 21.0.0</h2> </div> <ul> <li> <strong>MUI Components</strong>: Material UI can now be used to Create / Style your Applications</li> <li> <strong>UI Updates</strong>: The UI now features a more modern and user friendly experience to reflect the newly added Components.</li> <li> <strong>DX Updates</strong>: Migrated from Jest to Vitest to allow better compatibility, as well as to reduce complexity and streamline the Development Workflow.</li> <li>…</li> </ul> </div> <br> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/open-source-labs/ReacType" rel="noopener noreferrer">View on GitHub</a></div> <br> </div> <br> <br><br> Cheers! react typescript javascript webdev