Remix.Js - The Practical Guide

Video Tutorials, Courses


Remix.Js - The Practical Guide
Published 11/2022
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 3.81 GB | Duration: 8h 35m



Learn how to build feature-rich & highly reactive fullstack React applications with Remix.
What you'll learn
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 jаvascript logic
Implement user authentication via session cookies
Requirements
Basic React knowledge is required
NO prior Remix knowledge is required
NO advanced React knowledge is required
Description
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.In general, in this course, the following concepts are covered in great detail:What Remix is & how it worksRemix vs NextJSAdding routes and pagesWorking with nested routesManaging (potentially nested) layoutsCombining pages with non-page componentsStyling pages and componentsFetching data (also for nested pages)Submitting data - via forms & programmaticallyHandling data submissions on the backendStoring data in databases & fetching data from databasesValidating user inputAuthenticating users (signup & login)Managing sessions via cookiesOptimizing Remix applicationsDeploying Remix applicationsAnd much more!
Overview
Section 1: Introduction
Lecture 1 Welcome to the Course!
Lecture 2 What Is Remix? And Why Would You Use Remix?
Lecture 3 Remix vs NextJS
Lecture 4 About The Course
Lecture 5 How To Get The Most Out Of This Course
Lecture 6 Attachments & Discord Community
Section 2: Remix Essentials - Core Concepts
Lecture 7 Module Introduction
Lecture 8 Creating a Remix Project
Lecture 9 Analyzing the Created Project
Lecture 10 Getting Started with File-based Routing
Lecture 11 Adding Links & Building a SPA (Single-Page Application)
Lecture 12 Onwards to a Better Project
Lecture 13 Styling Pages & Understanding the Root Route
Lecture 14 Surfacing Component Styles
Lecture 15 Styling Active Links via NavLink
Lecture 16 How Form Submissions Work
Lecture 17 Server-side Form Handling via action()
Lecture 18 Adding Backend Code & Redirecting
Lecture 19 Fetching Page Data via loader()
Lecture 20 Returning & Using Fetched Data
Lecture 21 From to
Lecture 22 Providing User Feedback via useNavigation
Lecture 23 Validating Input & Returning Data in action()
Lecture 24 Error Handling via ErrorBoundary
Lecture 25 Handling Error Responses via CatchBoundary
Lecture 26 Adding Dynamic Routes & Dot-delimited Routes
Lecture 27 Fetching Data for Dynamic Routes
Lecture 28 Another CatchBoundary Example
Lecture 29 Setting Page Metadata
Lecture 30 Summary
Section 3: Routing & Layouts - Deep Dive
Lecture 31 Module Introduction
Lecture 32 What We'll Build - A Demo
Lecture 33 Project Planning & Creation
Lecture 34 Creating Project Routes - A Refresher
Lecture 35 Nested Paths - An Alternative Approach
Lecture 36 Layout Routes
Lecture 37 Adding Components & Styling
Lecture 38 Using Custom Fonts
Lecture 39 Working on More Routes
Lecture 40 Marketing Pages & Static Images
Lecture 41 Leveraging Layouts
Lecture 42 Rendering a Modal Page (Overlay Page)
Lecture 43 Adding Links
Lecture 44 Paths: Absolute vs Relative
Lecture 45 Navigating Programmatically
Lecture 46 Adding NavLinks
Lecture 47 Introducing Pathless Layout Routes
Lecture 48 Doing More with Pathless Layout Routes
Lecture 49 Introducing Resource Routes
Lecture 50 Understanding Splat Routes
Lecture 51 Working with URL Search Parameters (Query Parameters)
Lecture 52 Adding More Expense-related Links
Lecture 53 Module Summary
Section 4: Data Fetching & Mutations - Deep Dive
Lecture 54 Module Introduction
Lecture 55 Project & Database (MongoDB) Setup
Lecture 56 Adding Prisma (A Package For Querying the Database)
Lecture 57 Adding an Expense Data Model
Lecture 58 Preparing the Code for Form Submissions
Lecture 59 Adding a Server-side "addExpense" Function
Lecture 60 Adding Expenses to the Database (via action())
Lecture 61 Adding Server-side Validation
Lecture 62 Submitting Forms Programmatically
Lecture 63 Adding Visual Submission Feedback
Lecture 64 Fetching Expenses (via loader())
Lecture 65 Loaders - A Closer Look
Lecture 66 Loading a Single Expense (via Dynamic Route Parameters)
Lecture 67 How Nested Loaders Are Executed
Lecture 68 Using Parent Loader Data via useMatches()
Lecture 69 Updating Data
Lecture 70 Deleting Data
Lecture 71 One Action - Multiple Forms
Lecture 72 Programmatic "Behind-the-Scenes" Submission via useFetcher()
Lecture 73 Extracting Search Parameters
Lecture 74 Adding Visual Feedback to the Authentication Form
Lecture 75 Adding a Shared Root Document
Lecture 76 Adding Default Error Handling Logic
Lecture 77 Handling Errors Without ErrorBoundary or CatchBoundary
Lecture 78 Managing Errors Inside Components
Lecture 79 Practice Time - Challenge
Lecture 80 Practice Time - Solution
Lecture 81 Updating the expenses/raw Route
Lecture 82 Module Summary
Section 5: Adding User Authentication
Lecture 83 Module Introduction
Lecture 84 Project Setup
Lecture 85 How Does User Authentication Work?
Lecture 86 Preparing the Database
Lecture 87 Adding Server-side Credentials Validation
Lecture 88 Check for Existing Users & Emails
Lecture 89 User Signup & Password Hashing
Lecture 90 Getting Started with User Login
Lecture 91 Sessions & Cookies - Preparation
Lecture 92 Creating Session Cookies
Lecture 93 Extracting Session Data & Rendering Conditional User Interfaces
Lecture 94 Adding Logout
Lecture 95 Protecting Routes
Lecture 96 More Route Protection
Lecture 97 Connecting Expenses & Users
Lecture 98 Module Summary
Section 6: Optimizing & Deploying Remix Applications
Lecture 99 Module Introduction
Lecture 100 Adding Metadata To Routes
Lecture 101 Why You Might Need Custom Page Response Headers
Lecture 102 Setting Page Response Headers
Lecture 103 Working with Nested Headers
Lecture 104 Using Action & Loader Headers
Lecture 105 Disabling jаvascript For Some Pages
Lecture 106 A Brief Look at the Remix Config File
Lecture 107 Deployment Options
Lecture 108 Deploying a Remix Website - An Example (Netlify)
Section 7: Course Roundup
Lecture 109 Course Roundup
Lecture 110 Bonus Lecture
React developers who want to build fullstack applications with React
Screenshots



https://rapidgator.net/file/ce4b8af538caee3f8958e7492957689b/Remixjs_The_Practical_Guide.part1.rar.html
https://rapidgator.net/file/8da17ca01aca851f91ef0328cfd295ee/Remixjs_The_Practical_Guide.part2.rar.html
https://rapidgator.net/file/73ea4d614f4a1145c05ebd59c110f57c/Remixjs_The_Practical_Guide.part3.rar.html
https://rapidgator.net/file/4ea9fa4660f25ea76e0b7922c90d223b/The_Practical_Guide.part4.rar.html

https://uploadgig.com/file/download/d7d31Cf240ddF059/The_Practical_Guide.part4.rar
https://uploadgig.com/file/download/29680d081C686f0b/Remixjs_The_Practical_Guide.part1.rar
https://uploadgig.com/file/download/9598b79cd0E2Ddfd/Remixjs_The_Practical_Guide.part2.rar
https://uploadgig.com/file/download/E817AF48a171Af96/Remixjs_The_Practical_Guide.part3.rar