Remix.js - The Practical Guide

Focused View

Academind by Maximilian Schwarzmüller,Maximilian Schwarzmüller

8:32:59

194 View

1 - Introduction

1 - Welcome to the Course.mp4

00:32

2 - What Is Remix And Why Would You Use Remix.mp4

05:40

3 - Remix vs NextJS.mp4

02:10

4 - About The Course.mp4

01:23

5 - How To Get The Most Out Of This Course.mp4

03:36

6 - Attachments & Discord Community.html

2 - Remix Essentials Core Concepts

7 - Module Introduction.mp4

01:43

8 - Creating a Remix Project.mp4

03:35

9 - Analyzing the Created Project.mp4

04:02

10 - Getting Started with Filebased Routing.mp4

03:46

11 - Adding Links & Building a SPA SinglePage Application.mp4

05:11

12 - Onwards to a Better Project.mp4

03:06

12 - indexjsx file.zip

13 - Styling Pages & Understanding the Root Route.mp4

09:05

13 - homecss file.zip

13 - maincss file.zip

13 - remix styling guide.zip

14 - Surfacing Component Styles.mp4

06:44

14 - newnotecss file.zip

14 - newnotejsx file.zip

15 - Styling Active Links via NavLink.mp4

03:02

15 - mainnavigationjsx file.zip

16 - How Form Submissions Work.mp4

03:57

16 - react router 64.zip

17 - Serverside Form Handling via action.mp4

03:23

17 - notesjs file.zip

18 - Adding Backend Code & Redirecting.mp4

09:16

19 - Fetching Page Data via loader.mp4

04:59

19 - notelistcss file.zip

19 - notelistjsx file.zip

20 - Returning & Using Fetched Data.mp4

07:51

21 - From form to Form.mp4

04:49

22 - Providing User Feedback via useNavigation.mp4

03:59

23 - Validating Input & Returning Data in action.mp4

06:04

24 - Error Handling via ErrorBoundary.mp4

06:52

25 - Handling Error Responses via CatchBoundary.mp4

07:34

26 - Adding Dynamic Routes & Dotdelimited Routes.mp4

07:53

26 - notedetailscss file.zip

27 - Fetching Data for Dynamic Routes.mp4

04:07

28 - Another CatchBoundary Example.mp4

01:41

29 - Setting Page Metadata.mp4

04:31

30 - Summary.mp4

02:17

3 - Routing & Layouts Deep Dive

31 - Module Introduction.mp4

01:33

32 - What Well Build A Demo.mp4

02:04

33 - Project Planning & Creation.mp4

03:54

34 - Creating Project Routes A Refresher.mp4

10:11

35 - Nested Paths An Alternative Approach.mp4

05:47

36 - Layout Routes.mp4

07:54

37 - Adding Components & Styling.mp4

06:38

37 - componentszip file.zip

37 - styleszip file.zip

38 - Using Custom Fonts.html

39 - Working on More Routes.mp4

10:50

40 - Marketing Pages & Static Images.mp4

04:04

40 - imageszip file.zip

40 - indexjsx file.zip

40 - pricingjsx file.zip

41 - Leveraging Layouts.mp4

02:41

42 - Rendering a Modal Page Overlay Page.mp4

03:30

43 - Adding Links.mp4

05:13

44 - Paths Absolute vs Relative.mp4

02:34

45 - Navigating Programmatically.mp4

03:33

46 - Adding NavLinks.mp4

03:32

47 - Introducing Pathless Layout Routes.mp4

08:56

48 - Doing More with Pathless Layout Routes.mp4

03:41

48 - expensesheaderjsx file.zip

49 - Introducing Resource Routes.mp4

03:39

50 - Understanding Splat Routes.mp4

05:31

51 - Working with URL Search Parameters Query Parameters.mp4

09:29

52 - Adding More Expenserelated Links.mp4

03:41

53 - Module Summary.mp4

01:52

4 - Data Fetching & Mutations Deep Dive

54 - Module Introduction.mp4

01:04

55 - Project & Database MongoDB Setup.mp4

03:40

55 - starting project.zip

56 - Adding Prisma A Package For Querying the Database.mp4

04:17

56 - get started with prisma.zip

57 - Adding an Expense Data Model.mp4

05:48

58 - Preparing the Code for Form Submissions.mp4

07:09

58 - databaseserverjs file.zip

59 - Adding a Serverside addExpense Function.mp4

06:08

60 - Adding Expenses to the Database via action.mp4

06:57

61 - Adding Serverside Validation.mp4

10:14

61 - validationserverjs file.zip

62 - Submitting Forms Programmatically.mp4

05:09

63 - Adding Visual Submission Feedback.mp4

05:28

64 - Fetching Expenses via loader.mp4

09:16

65 - Loaders A Closer Look.mp4

05:27

66 - Loading a Single Expense via Dynamic Route Parameters.mp4

08:47

67 - How Nested Loaders Are Executed.mp4

03:03

68 - Using Parent Loader Data via useMatches.mp4

06:27

69 - Updating Data.mp4

07:27

70 - Deleting Data.mp4

03:27

71 - One Action Multiple Forms.mp4

06:28

72 - Programmatic BehindtheScenes Submission via useFetcher.mp4

09:31

73 - Extracting Search Parameters.mp4

04:08

74 - Adding Visual Feedback to the Authentication Form.mp4

02:17

75 - Adding a Shared Root Document.mp4

07:25

76 - Adding Default Error Handling Logic.mp4

04:24

77 - Handling Errors Without ErrorBoundary or CatchBoundary.mp4

05:54

78 - Managing Errors Inside Components.mp4

04:06

79 - Practice Time Challenge.mp4

01:13

80 - Practice Time Solution.mp4

05:27

81 - Updating the expensesraw Route.html

82 - Module Summary.mp4

03:11

5 - Adding User Authentication

83 - Module Introduction.mp4

00:50

84 - Project Setup.mp4

01:01

84 - starting project.zip

85 - How Does User Authentication Work.mp4

02:15

86 - Preparing the Database.mp4

05:16

87 - Adding Serverside Credentials Validation.mp4

04:28

87 - validationserverjs file.zip

88 - Check for Existing Users & Emails.mp4

03:32

89 - User Signup & Password Hashing.mp4

06:32

90 - Getting Started with User Login.mp4

03:49

91 - Sessions & Cookies Preparation.mp4

04:52

92 - Creating Session Cookies.mp4

08:05

93 - Extracting Session Data & Rendering Conditional User Interfaces.mp4

06:52

94 - Adding Logout.mp4

06:36

95 - Protecting Routes.mp4

06:48

96 - More Route Protection.mp4

01:35

97 - Connecting Expenses & Users.mp4

08:31

98 - Module Summary.mp4

01:18

6 - Optimizing & Deploying Remix Applications

99 - Module Introduction.mp4

01:08

100 - Adding Metadata To Routes.mp4

08:01

101 - Why You Might Need Custom Page Response Headers.mp4

02:17

102 - Setting Page Response Headers.mp4

03:38

103 - Working with Nested Headers.mp4

03:38

104 - Using Action & Loader Headers.mp4

02:49

105 - Disabling JavaScript For Some Pages.mp4

06:49

106 - A Brief Look at the Remix Config File.mp4

04:48

107 - Deployment Options.mp4

02:02

108 - Deploying a Remix Website An Example Netlify.mp4

07:04

7 - Course Roundup

109 - Course Roundup.mp4

00:58

110 - Bonus Lecture.html

Description

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 JavaScript logic
Implement user authentication via session cookies

Who is this for?

React developers who want to build fullstack applications with React

More details

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

Who this course is for:
React developers who want to build fullstack applications with React

User Reviews

Rating

average 0

Total votes0

Focused display

React

Academind by Maximilian Schwarzmüller

Instructor's Courses

Bundling the courses and know how of successful instructors, Academind strives to deliver high quality online education. Online Education, Real-Life Success - that's what Academind stands for. Learn topics like web development, data analyses and more in a fun and engaging way.We've taught more than 2,000,000 students on a broad variety of topics. We'd love to teach you as well! :)Keep learning!

Maximilian Schwarzmüller

Instructor's Courses

Experience as (Web) DeveloperStarting out at the age of 12 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS in a lot of projects. I love both worlds nowadays!I also build full-stack applications and acquired expert DevOps and cloud computing knowledge - proven by the many AWS certifications I hold (incl. the top-level Solutions Architect Professional certification).As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.Experience as InstructorAs a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses and more than 2,000,000 students on Udemy is the best proof for that.Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.Together with Manuel Lorenz, I founded Academind to offer the best possible learning experience to our more than 2,000,000 students.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.