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
https://github.com/colbyfayock/my-con...

🗒️ Read More
https://spacejelly.dev/posts/how-to-b...

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...

🐦 Get updates straight to your Twitter @colbyfayock
  / colbyfayock  

📸 Catch the next stream live on Twitch @colbyfayock
  / colbyfayock  

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses

🧰 More Resources

Codux
https://spacejelly.dev/codux

Codux Using Third Party Components
https://help.codux.com/kb/en/article/...

React Icons
https://react-icons.github.io/react-i...

🎼 Music
Music from #Uppbeat (free for Creators!):
https://uppbeat.io/t/yokonap/cozy-places
License code: GYVNXP4HLUQYJ1EH

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