Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
Web Frameworks
Remix.js - The Practical Guide

Remix.js - The Practical Guide

Loại khoá học: Web Development

Learn how to build feature-rich & highly reactive fullstack React applications with Remix.

image
50.000 VND
1.699.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

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 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!


Bạn sẽ học được gì

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

Yêu cầu

  • Basic React knowledge is required
  • NO prior Remix knowledge is required
  • NO advanced React knowledge is required

Nội dung khoá học

7 sections

Introduction

6 lectures
Welcome to the Course!
00:32
What Is Remix? And Why Would You Use Remix?
05:40
Remix vs NextJS
02:10
About The Course
01:23
How To Get The Most Out Of This Course
03:36
Attachments & Discord Community
00:37

Remix Essentials - Core Concepts

27 lectures
Module Introduction
01:43
MUST READ: Creating a Remix v1 Project
00:22
Creating a Remix Project
03:35
Adjusting the Created Projects
00:35
Analyzing the Created Project
04:02
Solving Issues with Starting the Development Server
00:17
Getting Started with File-based Routing
03:46
Adding Links & Building a SPA (Single-Page Application)
05:11
Onwards to a Better Project
03:06
Styling Pages & Understanding the Root Route
09:05
Surfacing Component Styles
06:44
Styling Active Links via NavLink
03:02
How Form Submissions Work
03:57
Server-side Form Handling via action()
03:23
Adding Backend Code & Redirecting
09:16
Fetching Page Data via loader()
04:59
Returning & Using Fetched Data
07:51
From <form> to <Form>
04:49
Providing User Feedback via useNavigation
03:59
Validating Input & Returning Data in action()
06:04
Error Handling via ErrorBoundary
06:52
Handling Error Responses via CatchBoundary
07:34
Adding Dynamic Routes & Dot-delimited Routes
07:53
Fetching Data for Dynamic Routes
04:07
Another CatchBoundary Example
01:41
Setting Page Metadata
04:31
Summary
02:17

Routing & Layouts - Deep Dive

24 lectures
Module Introduction
01:33
What We'll Build - A Demo
02:04
Project Planning & Creation
03:54
Creating Project Routes - A Refresher
10:11
Nested Paths - An Alternative Approach
05:47
Layout Routes
07:54
Adding Components & Styling
06:38
Using Custom Fonts
00:25
Working on More Routes
10:50
Marketing Pages & Static Images
04:04
Leveraging Layouts
02:41
Rendering a Modal Page (Overlay Page)
03:30
Adding Links
05:13
Paths: Absolute vs Relative
02:34
Navigating Programmatically
03:33
Adding NavLinks
03:32
Introducing Pathless Layout Routes
08:56
Doing More with Pathless Layout Routes
03:41
Introducing Resource Routes
03:39
Understanding Splat Routes
05:31
Working with URL Search Parameters (Query Parameters)
09:29
Adding More Expense-related Links
03:41
An Alternative Way Of Setting Up Routes
00:41
Module Summary
01:52

Data Fetching & Mutations - Deep Dive

29 lectures
Module Introduction
01:04
Project & Database (MongoDB) Setup
03:40
Adding Prisma (A Package For Querying the Database)
04:17
Adding an Expense Data Model
05:48
Preparing the Code for Form Submissions
07:09
Adding a Server-side "addExpense" Function
06:08
Adding Expenses to the Database (via action())
06:57
Adding Server-side Validation
10:14
Submitting Forms Programmatically
05:09
Adding Visual Submission Feedback
05:28
Fetching Expenses (via loader())
09:16
Loaders - A Closer Look
05:27
Loading a Single Expense (via Dynamic Route Parameters)
08:47
How Nested Loaders Are Executed
03:03
Using Parent Loader Data via useMatches()
06:27
Updating Data
07:27
Deleting Data
03:27
One Action - Multiple Forms
05:30
Programmatic "Behind-the-Scenes" Submission via useFetcher()
09:31
Extracting Search Parameters
04:08
Adding Visual Feedback to the Authentication Form
02:17
Adding a Shared Root Document
07:25
Adding Default Error Handling Logic
04:24
Handling Errors Without ErrorBoundary or CatchBoundary
05:54
Managing Errors Inside Components
04:06
Practice Time - Challenge
01:13
Practice Time - Solution
05:27
Updating the expenses/raw Route
00:17
Module Summary
03:11

Adding User Authentication

16 lectures
Module Introduction
00:50
Project Setup
01:01
How Does User Authentication Work?
02:15
Preparing the Database
05:16
Adding Server-side Credentials Validation
04:28
Check for Existing Users & Emails
03:32
User Signup & Password Hashing
06:32
Getting Started with User Login
03:49
Sessions & Cookies - Preparation
04:52
Creating Session Cookies
08:05
Extracting Session Data & Rendering Conditional User Interfaces
06:52
Adding Logout
06:36
Protecting Routes
06:48
More Route Protection
01:35
Connecting Expenses & Users
08:31
Module Summary
01:18

Optimizing & Deploying Remix Applications

10 lectures
Module Introduction
01:08
Adding Metadata To Routes
08:01
Why You Might Need Custom Page Response Headers
02:17
Setting Page Response Headers
03:38
Working with Nested Headers
03:38
Using Action & Loader Headers
02:49
Disabling JavaScript For Some Pages
06:49
A Brief Look at the Remix Config File
04:48
Deployment Options
02:02
Deploying a Remix Website - An Example (Netlify)
07:04

Course Roundup

2 lectures
Course Roundup
00:58
Bonus Lecture
00:16

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

How To Create 2D Defender Game With Unity & C#

How To Create 2D Defender Game With Unity & C#

749.000 VND
50.000 VND
The Complete UML Course (2024): Learn to Design UML Diagrams

The Complete UML Course (2024): Learn to Design UML Diagrams

25 VND
50.000 VND
Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

1.699.000 VND
50.000 VND
Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

1.499.000 VND
50.000 VND
Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

99 VND
50.000 VND
Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

1.699.000 VND
50.000 VND
Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi