Build React Apps with Codux Visual IDE for Faster UI Workflow

Learn how to quickly build a React app using Codux Visual IDE. We'll walk creating a contact form app from scratch including how to set up and create a new React app with Codux, creating new components with custom styles, import external modules, deploying to Netlify, and using Netlify Functions to send contact form emails with SendGrid.

🧐 What's Inside
00:00 - Intro
00:45 - Tool we'll use including Codux, Netlify Functions, and SendGrid
01:00 - Setting up and signing into Codux
01:21 - Creating a new React application with Codux
04:07 - Adding a form, input, and label to a React application
06:02 - Creating React components for Inputs and Labels with custom children
12:23 - Controlling React components from Codux with typechecked props
14:09 - Adding a submit button to the React form
14:55 - Publishing the code to a new GitHub repository from Codux
16:41 - Deploying a Codux React app to Netlify
17:45 - Visually styling React components with CSS in Codux
20:40 - Changing styles when input is focused
25:28 - Using Codux file editor to make code changes
26:42 - Importing external components from React Icons to use in Codux
29:48 - Capturing form data on submit in React
34:26 - Installing and logging into the Netlify CLI for local development
36:02 - Setting up a new Netlify Function to process form data
38:30 - POSTing form data to an endpoint from React
40:31 - Sending emails programmatically with SendGrid Mail
47:02 - Outro

💾 Code

🗒️ Read More

🔔 Subscribe for more tech and developer videos

🐦 Get updates straight to your Twitter @colbyfayock

📸 Catch the next stream live on Twitch @colbyfayock

✉️ Or a newsletter right to your inbox!

💝 Sponsor me for more free content like this!

🎥 Want to know what A/V equipment I use?

🧰 More Resources

Codux

Codux Using Third Party Components

React Icons

🎼 Music
Music from #Uppbeat (free for Creators!):
License code: GYVNXP4HLUQYJ1EH

#colbyfayock #codux #reactjs #designtools #webdevelopment #developertools

[seanzhang]

god damn, this is such a game changer. For someone who is learning react and css, this tools gives visual representation of the code directly and is very intuitive .

[beckyb]

my man always on the task for the freshest tech :D love your work!

[EvertvanBrussel]

How hard would it be to add an option for this tool to work with other frameworks? Such as SolidJS for example? That should be the easiest one I think. But if it's possible, I'd also really love if Svelte and Qwik were options too.

[hashantha_lk]

The RUN part of codux app is confusing. How do you run it?

[andygolem]

Pretty awesome and useful tool, changes I would make: I would make navigation menus more common sense, because react usually means SPA, also I would remove the "stick to the middle of the page" styling. I just use it to build my UIs and then copy that code to vscode to deal with things like state and fetch requests.

[LightsaberPanda]

I wonder, since Codux works with components in isolation, does this essentially replace Storybook?

[Leto_Atreides_]

Sadly it does not even visualize the basic react app :(, not rea, ly useful at the moment, u need to fiddle a ton to get to show what is on the browser by default

[denniszenanywhere]

Is this like Bubble but better? What are the limitations for now?

[husler]

How are you writing Record<string, string>? Where this type is defined? Can you elaborate it plz ?

[machine]

Nice concept, but after discovering it's tied to Wix, I'm tapping out.

[unknownplace-official]

Is there any way to change type script to normal javascript.

[MrMikev]

can you show us how to work with existing react project

[andTutin]

Programmers soon will make programmers not needed