A Beginner's Guide to Visual React Development with Codux
HTML-код
- Опубликовано: 6 авг 2024
- 👉 Download Codux for free at codux.hopp.to/james
Building React apps with a Visual Builder? I didn't know this sort of thing existed!
Codux is a Visual IDE for React. It integrates with TypeScript, Git, and your source code to allow you to build React apps as well as test different states of your components. This means you can create multiple boards for your components and ensure they render appropriately based on screen size, props, etc.
On the styling side, you have the ability to configure individual styles and classes. It also integrates with CSS, SASS, CSS Modules, and eventually Tailwind (coming soon!)
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
*STAY IN TOUCH 👋*
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
Newsletter 🗞 - www.jamesqquick.com/newsletter
Follow me on Twitter 🐦 - / jamesqquick
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
**TIMESTAMPS**
00:00 - Intro
00:17 - Introduction to Codux, Visual IDE For React
02:00 - First Project in Codux with Components, Boards, etc.
04:40 - Import React Project into Codux
06:30 - Creating a Board in Codux and TypeScript Integration
12:25 - Creating a Second Board To Test Rendering of a React Component
13:50 - Creating a Component From Scratch
19:50 - Adding a Hover State
20:50 - Checking Conditional Rendering And React Logic
23:50 - Codux Git Integration
24:50 - Wrap Up
I like the Codux idea! Will give it a try.
This seems like if the QA/UAT were more technical they could make boards to show DEVs what is wrong. As brijen Makwana said it is most likely faster for a DEV to just make the component in none visual IDE.
It looks promising for people who's just started.
Awesome 😎
@james q quick hey can you explain the process of fectch API? it doesnt work for me
how do I import css into this?
Is this as amazing as I'm thinking it is?
I think so, if they keep maintaining it, I think it will have a big impact
I’m relatively new to JavaScript programming. Is it possible to turn off Typescript and SCSS? I’m not comfortable using those.
Oodie gang 🙌
Se que puede ser mucho pedir pero el día que logren integrarlo con figma y que sea de manera estable, BUM!!!
So does this work like a WordPress builder like Elementor, Divi, and Beaver Builder?
As far as I know, those tools don't have as direct an integration for writing your own code, and specifically integrating with your own Github repo. I think it's fairly different.
Better than React Studio IDE for Macs?
I actually haven't seen that. I'll have to check it out!
❤
Glad you enjoyed it!
is this for React only?
Yep right now React only!
It's not as amazing as it looks. It takes less time if I just create a component myself
I feel like if this wasn’t designed from the ground up to work with a language model for component generation it be some pretty tragic timing
What do you mean by tragic timing?
@@JamesQQuick I’ve always been sceptical of using chat based interfaces for anything more complex than a reminder, but after using gpt4 to generate a quick prototype react app I’m fairly convinced that chat will be a big part of how we create front end in the future.
@@someghosts Ohhh ok I see what you're saying now. It's hard for things like this to *already* be built targeting AI models, but definitely agree, they should be on the radar for companies going forward!
@@JamesQQuick or maybe not who knows, maybe it will dovetail nicely into what their doing, bit of an assumption on my end I guess
Can't you just use Live Server in VS Code? After all isn't this really just to help visual development?
Well live server gives you a live preview not a visual editor.
I tried the software and just judging from my experience it felt like I was editing the components in VS Code a lot but it could be just me. I just don't see it being so much of a help that it would deter me from just doing the work in VS Code and using Live Server. Right now it just seems difficult to use, like other people here have said.
Hard to use
Any more specific feedback? What did you find hard to use?
I know they just started supporting it but I'm unable to use tailwind after following the guide on their help page. I hope it get easier.