Remix.run Guides

In this React tutorial and React full course, build websites and projects with React. React Premium Course: https://courses.supersimple.dev/courses/react Frontend Bundle (React, JS, HTML CSS): https://courses.supersimple.dev/bundles/frontend-bundle Membership: https://youtube.com/@SuperSimpleDev/join or https://member.supersimple.dev (10% OFF the USD price) Links in this course: https://github.com/SuperSimpleDev/react-course/blob/main/1-links.md Exercise solutions: https://github.com/SuperSimpleDev/react-course/tree/main/1-exercise-solutions Copy of the code: https://github.com/SuperSimpleDev/react-course/tree/main/2-copy-of-code Troubleshooting: https://github.com/SuperSimpleDev/react-course/blob/main/2-troubleshooting.md 🎓 Premium Courses (get a certificate, better learning experience, support SuperSimpleDev ❤️) Frontend Bundle (React, JS, HTML CSS): https://courses.supersimple.dev/bundles/frontend-bundle React Premium Course: https://courses.supersimple.dev/courses/react JavaScript Premium Course: https://courses.supersimple.dev/courses/javascript HTML CSS Premium Course: https://courses.supersimple.dev/courses/html-css Sections: 0:00 Intro 1:20 1. React Basics, JSX 40:16 2. Components, Props, Start the Chatbot Project 1:36:49 3. State, Event Handlers, Chatbot Project Features 2:42:41 4. CSS with React, Hooks, Finish Chatbot Project 3:48:49 5. Proper React Setup with Vite 4:59:29 6. React Router, Git, Start the Ecommerce Project 6:09:59 7. React with Backend, Data Fetching, Load Ecommerce Project Data 8:00:58 8. Data Mutation, Update Ecommerce Project Data 8:50:10 9. Automated Tests in React with Vitest 9:50:31 10. Deploy React to the Internet, Intro to AWS 10:41:06 11. React 19 Updates 10:50:13 TypeScript with React 11:24:12 AI with React 11:31:09 Conclusion and Next Steps Additional information: This React tutorial and React full course is a project based series of React tutorials for software engineers. Each React tutorial builds on a project and provides some React exercises to practice what we learned. By the end, we'll learn how to create complex websites and projects with React, JavaScript, HTML, and CSS, which will help you become a web developer and software engineer. #react #supersimpledev #reactcourse #reacttutorial #reactjs #javascript #html #css #webdevelopment #webdeveloper #softwaredeveloper #softwaredevelopment #coding #codingtutorial #softwareengineer #softwareengineering #learntocode

💻 Source Code: https://cwa.run/nodebase 🎨 Free Assets: https://cwa.run/node-assets 🎥 Part 2: https://youtu.be/S-4DrLHtL1s?si=n4a7jM4FUWf9NN32 📚 Resources: Try Inngest: https://cwa.run/node-inngest Try Polar: https://cwa.run/node-polar Try Better Auth: https://cwa.run/node-auth Try Sentry: https://cwa.run/sentry Try CodeRabbit: https://cwa.run/node-rabbit Try Neon: https://cwa.run/node-neon In this tutorial, we're building Nodebase, a complete workflow automation platform from scratch. You'll learn how to create a visual drag-and-drop canvas for building workflows, integrate multiple triggers and AI providers, handle background job execution, and build a full SaaS business layer with authentication, subscriptions, and paywalls. We'll also cover error tracking with AI monitoring and a professional Git workflow with AI-powered code reviews. Key features: 🔄 Visual workflow builder 🎯 Trigger nodes (Webhook, Google Form, Stripe, Manual) 🤖 AI integrations (OpenAI, Claude, Gemini) 💬 Messaging nodes (Discord, Slack) 🌐 HTTP request node ⚡ Background job execution with Inngest 💳 Polar payments & subscriptions 🔐 Better Auth authentication 🎨 React Flow canvas 🗄️ Prisma ORM + Neon Postgres 🔒 Type safety with TypeScript + tRPC 🐛 Sentry error tracking + AI monitoring 🧑‍💻 CodeRabbit PR reviews 🌐 Next.js 15 App Router 📱 Production-ready SaaS Timestamps 00:00 Intro 06:05 01 Setup 29:33 02 Database 56:15 03 tRPC Setup 01:35:21 04 Authentication 02:37:24 05 Theme & Styling 02:55:05 06 Background Jobs 03:28:09 07 AI Providers 04:01:53 08 Error Tracking 04:27:54 09 Sidebar Layout 05:06:26 10 Payments Setup 05:44:04 11 Workflows Crud 06:45:20 12 Workflows Pagination 07:34:34 13 Workflows UI 08:23:40 14 Workflow Page 08:59:36 15 Editor Setup 09:50:42 16 Node Selector 10:40:32 17 Editor State 11:59:20 End of Part 1

This is the ReactJS Full Course | Learn Everything from Scratch to Advanced, your complete guide to mastering React in one video. We’ll start with the basics like components, JSX, props, and state, then move to advanced topics like hooks, context API, routing, and real project setups. By the end, you’ll understand how React really works and how to build production-ready apps confidently. 📘 What’s Inside: - React fundamentals (JSX, Props, State) - Hooks and Context API - Routing and API Integration - Folder structure and best practices - Real-world project demo 💻 Source Code: Access the complete source code of this video here → https://github.com/saarthack/react-yt If you learned something new, like, comment, and subscribe for more frontend content. Let’s make coding fun and creative 🚀 Instructor in this video: Sarthak Sharma Don't forget to LIKE 👍 this video, SUBSCRIBE 🔔 for more Web Development tutorials, and COMMENT below if you have any questions or suggestions! 🚀 Visit Our Website - https://sheryians.com/ Chapters - 00:00:00 - Introduction 00:01:10 - React Overview 00:17:48 - Import & Export 00:28:47 - Real DOM vs Virtual DOM 00:36:42 - Setting Up React with Vite 01:06:28 - Components Explained 01:26:02 - Understanding Props 01:47:37 - Mini Projects using Props 02:50:43 - Styling with CSS 03:06:48 - Intro to Tailwind CSS 03:18:23 - UI Design Project 04:30:51 - Working with Functions 04:56:23 - Understanding Hooks 05:12:10 - Advanced State Management 05:55:58 - Form Handling in React 06:03:20 - Two-Way Data Binding 06:15:46 - Notes App Project 07:21:25 - Using LocalStorage 07:33:35 - API Calls in React 07:54:37 - useEffect Hook Explained 08:17:01 - Gallery Project 09:15:20 - React Router DOM Basics 09:42:16 - Advanced Routing 10:26:36 - Bonus Concepts 10:36:43 - Context API Introduction 10:44:18 - Children as Props 10:57:11 - Context API in Action 11:15:13 - Outro Socials: 📷 Instagram: https://www.instagram.com/sheryians_coding_school/ 📘 Facebook: https://www.facebook.com/sheryians.community 💌 Telegram: https://t.me/sheryiansCommunity 💼 LinkedIn: https://in.linkedin.com/company/the-sheryians-coding-school 🎮 Discord: https://discord.gg/Au3TquBarQ Peace out ✌ #sheryianscodingschool #sheryians #code #coding #jobs #reactjs #mernstack #mern #web #reactjscourse #tutorial #creativewebdevelopment #webdevelopment #functionalwebdevelopment #thebasics #mernstack #jslogic #javascriptlogics

❤️ sponsor this channel: https://nunomaduro.com/sponsorships 🙌🏻 this video was made possible by: 🐰 coderabbit / ai code reviews with instant feedback on pull requests: https://coderabbit.link/nunomaduro 🔴 redberry / work with the best laravel digital agency: https://redberry.international/?ref=nunomaduro 🛠️ jetbrains / code with phpstorm for world-class php development: https://jb.gg/nuno ⚡️ typesense / cutting-edge, in-memory search engine for mere mortals: https://typesense.org/?ref=nunomaduro 🔎 serpapi / instantly access real-time search data from Google, Amazon, and more: https://serpapi.com/?ref=nunomaduro 💌 bento / the best way to send email with AI: https://bentonow.com/?ref=nunomaduro 🗣️ tts at $5 / donations: https://streamlabs.com/nunomaduro/tip ✨ socials: x: https://x.com/enunomaduro website: https://nunomaduro.com twitch: https://twitch.tv/nunomaduro tiktok: https://tiktok.com/@enunomaduro linkedin: https://linkedin.com/in/nunomaduro instagram: https://instagram.com/enunomaduro #laravel #php #ai #claudecode #vibecoding #coding #webdev #programming #aicoding

In this course, you’ll master Next.js 16, the latest version of the official React framework, and learn how to build powerful, full-stack applications using its new caching and performance features. You’ll put your skills into practice by creating and deploying a Dev Event Platform, a modern app where users can browse, create, and manage events. PostHog: https://jsm.dev/devevent-posthog WebStorm: https://jsm.dev/devevent-webstorm Junie AI: https://jsm.dev/devevent-junie Warp: https://jsm.dev/devevent-warp CodeRabbit: https://jsm.dev/devevent-coderabbit CodeRabbit CLI: https://jsm.dev/devevent-coderabbitcli Cloudinary: https://jsm.dev/devevent-cloudinary The Complete Testing Course is LIVE. 🔥 Bundle up now before the deal expires and get 33% Off‼ 👉 https://jsm.dev/devevent-testing 📗 GSAP Pro Course (includes GTAVI Website): https://jsm.dev/devevent-gsap 📕 Three.js 3D Pro Course: https://jsm.dev/devevent-threejs 📙 JavaScript Pro Course: https://jsm.dev/devevent-cpjsm 🚀 Launch Your SaaS Pro Course: https://jsm.dev/devevent-saas ‼ If the links aren’t working for you, please try using a VPN (e.g., in Nigeria) 📁 FREE Video Kit (Code, Figma, Assets, Etc.): https://jsm.dev/devevent-kit 👉 Backend Pro Course Waitlist: https://jsm.dev/devevent-backpro 👉 AI Development Pro Course Waitlist: https://jsm.dev/devevent-aipro 👉 Tailwind Pro Course Waitlist: https://jsm.dev/devevent-twpro 👉 React.js Pro Course Waitlist: https://jsm.dev/devevent-reactpro 👉 React Native Pro Course Waitlist: https://jsm.dev/devevent-nativepro Rate us on TrustPilot: https://jsm.dev/trustpilot https://discord.com/invite/n6EdbFJ https://twitter.com/jsmasterypro https://instagram.com/javascriptmastery https://linkedin.com/company/javascriptmastery Business Inquiries: contact@jsmastery.pro Time Stamps: 00:00:00 — Introduction 00:04:09 — Crash Course Intro 00:08:30 — Installation 00:11:45 — Project Structure 00:14:19 — App Router 00:17:16 — React Client & Server Components 00:23:40 — Routing 00:42:42 — Data Fetching 00:48:53 — API Routes 00:52:45 — Caching 00:56:05 — Build Adapters API 00:57:24 — Metadata 01:01:23 — Theory to Practice — — — 01:02:48 — Project Setup 01:18:01 — Homepage 01:41:35 — PostHog Setup 01:50:21 — MongoDB Setup 01:52:57 — Warp Setup 01:56:46 — Database Models & Connection 02:09:36 — CodeRabbit 02:16:11 — API Routes 02:27:03 — Image Upload 02:37:51 — Fetch API Routes 02:54:47 — Event Details Page 03:14:34 — Server Actions 03:28:05 — Caching 03:39:46 — PostHog: Booking Action & Tracking 03:54:05 — Deployment 03:58:15 — Outro

In this video, you'll bridge the gap between web and mobile with an intensive crash course on React Native fundamentals and modern features like file-based routing and server components. Then, you’ll build Recurrly, a subscription tracker using Expo. You’ll implement essential real-world features before taking the leap that most tutorials skip: publishing your app to the Apple App Store and Google Play Store so you can actually start monetizing your work. Expo: https://jsm.dev/nativesub-expo Expo EAS : https://jsm.dev/nativesub-eas Clerk: https://jsm.dev/nativesub-clerk PostHog: https://jsm.dev/nativesub-posthog CodeRabbit: https://jsm.dev/nativesub-coderabbit Junie AI: https://jsm.dev/nativesub-junie WebStorm: https://jsm.dev/nativesub-webstorm 📋 Join the AI Course Waitlist: https://jsm.dev/nativesub-agentic 📋 Join the React Native Course Waitlist: https://jsm.dev/nativesub-native 🎁 Video Kit (Code, Assets, Prompts): https://jsm.dev/nativesub-kit ⭐ Join JS Mastery Pro: https://jsm.dev/nativesub-jsm ➤ Links not working? Some regions may need a VPN. https://discord.com/invite/n6EdbFJ https://twitter.com/jsmasterypro https://instagram.com/javascriptmastery https://linkedin.com/company/javascriptmastery Business Inquiries: contact@jsmastery.pro Timestamps: 00:00:00 — Introduction 00:03:19 — Crash Course 00:13:14 — Fundamentals 00:23:44 — Project Setup 00:35:19 — Setup Styling (Nativewind) 00:45:17 — Routing & Navigation 01:03:10 — Tab Navigation 01:27:55 — Custom Fonts 01:36:11 — Home UI 02:24:13 — Clerk Setup 02:28:37 — Authentication 02:53:40 — PostHog 03:05:44 — Subscription Tab 03:10:16 — Create Subscriptions 03:13:57 — PostHog Custom Events 03:26:04 — EAS Build & Deploy 03:39:39 — Closing & What's Next