The Practical Guide
Learn how to build feature-rich & highly reactive fullstack React applications with Remix.
Lo que serás capaz de hacer
Remix is a strongly growing React framework that (vastly!) simplifies the process of building feature-rich, interactive fullstack React applications and websites. With Remix, backend and frontend code work together seamlessly, and, as a developer, you don't have to worry about managing multiple, separated projects or codebases. Instead, you implement your backend logic next to your frontend code and let Remix handle the rest. In this course, you will learn how to build fullstack React.js applications and websites with Remix from the ground up. All key Remix concepts are covered in-depth and taught step-by-step, slowly building up on each other. By the end of this course you will therefore be able to build your own Remix fullstack websites! As part of this course, you will build two major demo projects, including an "Expenses Management Website" where users can sign up, manage their expenses and view expense analytics. As part of this project, you will learn how to perform CRUD (Create, Read, Update, Delete) operations with Remix and how to connect your React app to a database. The following concepts are covered in great detail in this course: What Remix is & how it works Remix vs NextJS Adding routes and pages Working with nested routes Managing (potentially nested) layouts Combining pages with non-page components Styling pages and components Fetching data (also for nested pages) Submitting data - via forms & programmatically Handling data submissions on the backend Storing data in databases & fetching data from databases Validating user input Authenticating users (signup & login) Managing sessions via cookies Optimizing Remix applications Deploying Remix applications And much more!
- Build fullstack React websites and apps with Remix
- Implement dynamic and nested pages
- Construct nested layouts with optimized data fetching
- Handle form submissions without client-side JavaScript logic
- Implement user authentication via session cookies
Temario
UNIDAD 1 - Introduction · 6 leccionesUNIDAD 1 - Introduction
UNIDAD 1 - Introduction
- Welcome to the Course!
- What Is Remix? And Why Would You Use Remix?
- Remix vs NextJS
- About The Course
- How To Get The Most Out Of This Course
- Attachments & Discord Community
UNIDAD 2 - Remix Essentials - Core Concepts · 27 leccionesUNIDAD 2 - Remix Essentials - Core Concepts
UNIDAD 2 - Remix Essentials - Core Concepts
- Module Introduction
- MUST READ: Creating a Remix v1 Project
- Creating a Remix Project
- Adjusting the Created Projects
- Analyzing the Created Project
- Solving Issues with Starting the Development Server
- Getting Started with File-based Routing
- Adding Links & Building a SPA (Single-Page Application)
- Onwards to a Better Project
- Styling Pages & Understanding the Root Route
- Surfacing Component Styles
- Styling Active Links via NavLink
- How Form Submissions Work
- Server-side Form Handling via action()
- Adding Backend Code & Redirecting
- Fetching Page Data via loader()
- Returning & Using Fetched Data
- From <form> to <Form>
- Providing User Feedback via useNavigation
- Validating Input & Returning Data in action()
- Error Handling via ErrorBoundary
- Handling Error Responses via CatchBoundary
- Adding Dynamic Routes & Dot-delimited Routes
- Fetching Data for Dynamic Routes
- Another CatchBoundary Example
- Setting Page Metadata
- Summary
UNIDAD 3 - Routing & Layouts - Deep Dive · 24 leccionesUNIDAD 3 - Routing & Layouts - Deep Dive
UNIDAD 3 - Routing & Layouts - Deep Dive
- Module Introduction
- What We'll Build - A Demo
- Project Planning & Creation
- Creating Project Routes - A Refresher
- Nested Paths - An Alternative Approach
- Layout Routes
- Adding Components & Styling
- Using Custom Fonts
- Working on More Routes
- Marketing Pages & Static Images
- Leveraging Layouts
- Rendering a Modal Page (Overlay Page)
- Adding Links
- Paths: Absolute vs Relative
- Navigating Programmatically
- Adding NavLinks
- Introducing Pathless Layout Routes
- Doing More with Pathless Layout Routes
- Introducing Resource Routes
- Understanding Splat Routes
- Working with URL Search Parameters (Query Parameters)
- Adding More Expense-related Links
- An Alternative Way Of Setting Up Routes
- Module Summary
UNIDAD 4 - Data Fetching & Mutations - Deep Dive · 29 leccionesUNIDAD 4 - Data Fetching & Mutations - Deep Dive
UNIDAD 4 - Data Fetching & Mutations - Deep Dive
- Module Introduction
- Project & Database (MongoDB) Setup
- Adding Prisma (A Package For Querying the Database)
- Adding an Expense Data Model
- Preparing the Code for Form Submissions
- Adding a Server-side "addExpense" Function
- Adding Expenses to the Database (via action())
- Adding Server-side Validation
- Submitting Forms Programmatically
- Adding Visual Submission Feedback
- Fetching Expenses (via loader())
- Loaders - A Closer Look
- Loading a Single Expense (via Dynamic Route Parameters)
- How Nested Loaders Are Executed
- Using Parent Loader Data via useMatches()
- Updating Data
- Deleting Data
- One Action - Multiple Forms
- Programmatic "Behind-the-Scenes" Submission via useFetcher()
- Extracting Search Parameters
- Adding Visual Feedback to the Authentication Form
- Adding a Shared Root Document
- Adding Default Error Handling Logic
- Handling Errors Without ErrorBoundary or CatchBoundary
- Managing Errors Inside Components
- Practice Time - Challenge
- Practice Time - Solution
- Updating the expenses/raw Route
- Module Summary
UNIDAD 5 - Adding User Authentication · 16 leccionesUNIDAD 5 - Adding User Authentication
UNIDAD 5 - Adding User Authentication
- Module Introduction
- Project Setup
- How Does User Authentication Work?
- Preparing the Database
- Adding Server-side Credentials Validation
- Check for Existing Users & Emails
- User Signup & Password Hashing
- Getting Started with User Login
- Sessions & Cookies - Preparation
- Creating Session Cookies
- Extracting Session Data & Rendering Conditional User Interfaces
- Adding Logout
- Protecting Routes
- More Route Protection
- Connecting Expenses & Users
- Module Summary
UNIDAD 6 - Optimizing & Deploying Remix Applications · 10 leccionesUNIDAD 6 - Optimizing & Deploying Remix Applications
UNIDAD 6 - Optimizing & Deploying Remix Applications
- Module Introduction
- Adding Metadata To Routes
- Why You Might Need Custom Page Response Headers
- Setting Page Response Headers
- Working with Nested Headers
- Using Action & Loader Headers
- Disabling JavaScript For Some Pages
- A Brief Look at the Remix Config File
- Deployment Options
- Deploying a Remix Website - An Example (Netlify)
UNIDAD 7 - Course Roundup · 2 leccionesUNIDAD 7 - Course Roundup
UNIDAD 7 - Course Roundup
- Course Roundup
- Bonus Lecture
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
7 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Academind by Maximilian Schwarzmüller.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 7 unidades · 114 lecciones · 35 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Academind by Maximilian Schwarzmüller; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
