I Built a React App… but with a Visual Editor
When it comes to building web applications, React has become one of the most popular JavaScript libraries for creating interactive user interfaces. However, for many developers, the process of building a React app can be quite daunting, especially for those who are new to programming or web development.
That’s why I was excited to discover a visual editor that allows me to build a React app without having to write a single line of code. This visual editor provides a drag-and-drop interface that makes it easy to create components, add styling, and connect data without having to manually write out the code.
Using the visual editor, I was able to quickly build a simple to-do list application. I started by dragging a “Text Input” component onto the canvas, then added a “Add” button and a “List” component to display the tasks. I was also able to easily customize the styling and layout of the app using the visual editor’s built-in tools.
One of the best things about using a visual editor for building a React app is that I could see a live preview of my app as I was building it. This allowed me to instantly see how my changes were affecting the app’s appearance and functionality, making the development process much more intuitive and interactive.
After I finished building my app in the visual editor, I was able to export the code and continue working on it in my code editor. This allowed me to add any additional functionality or make more advanced customizations that were not available in the visual editor.
Overall, using a visual editor to build a React app was a game-changer for me. It made the process of creating a web application much more accessible and enjoyable, and I was able to quickly build a functional app without feeling overwhelmed by the complexities of writing code.
If you’re new to React or looking for a more intuitive way to build web applications, I highly recommend giving a visual editor a try. It’s a great way to streamline the development process and make building React apps more accessible to a wider range of developers.
Try it out and let me know what you think… https://codux.hopp.to/fireship
Nooooooooooooooooooooo not Wix 😮💨
as a beginner, this will be extremely helpful for learning good CSS styling intuition. the setup reminds me a lot of XCode’s UI sidebar.
I am curious if I can use codux to build the UI, but then host it on my own server other than wix. Cuz that'll be cool.
very cool 🙂 but as stated below it would be easier if it was a vs plugin so we dont have to switch between editors. I honestly dont quite get why Wix is offering it – like what's the catch?
Aside from editing and creating components from a visual perspective, does this also replace Storybook as far as component isolation and testing?
this is something more useful than ai generators, but if it has ai plugin that can write content then it's a heaven for me I don't have to do ctrl+c ctrl+c ctrl+c ctrl+c ctrl+c and then ctrl+v
Nope. I will never touch anything made by Wix.
Would be even better if it supported tailwind.
This seems more work than making this in react code
do you have your full sample project available anywhere?
Looks cool, but I'll stick with code for the mean time
nice , its verymuch like oxygen builder or webflow
Is there a react native version of this?
Thank you Jeff. I'm a visual learner.
This would be great for more suited at designers however.
If you are trying to make something look good, it is most useful to be able to move things around the way you move physical objects around, by picking up and dragging it, or selecting it directly and changing it. This is also what is so beautiful about game design software – it takes care of the values for you. This is also partly what makes computers so great: it can manage numerical values and computation so much faster and more easily than people can manually manage. This being complimentary gives the developer the best of both worlds the way that game developers are used to developing.
Of course, the limit is that the UI has to work with specific code framework. I would absolutely love getting this for Blazor WASM/Hybrid/Maui.
exciting
hahah ur meme game has to be one the best in YT, tbh
This is an area where web development is lagging behind vb6 lol.
Why people are still hand writing html is beyond me. We are still in the dark ages with Web front end creation.