Advanced React Course with Typescript, Router, SSR and Clean Frontend Architecture - Just Enough

🙋 Book a mentorship call: https://book.abdu.dev ✉️ Join my newsletter: https://newsletter.abdu.dev In this advanced ReactJS course, you will learn about the ins and outs of building complex and efficient web applications using ReactJS and take your knowledge to the next level. The course begins with an overview and a quick review of ReactJS. You will then dive into creating various Frontend Architecture patterns in ReactJs all with Typescript and Sass, and learn about JSX, components, containers, and styling. You will also learn about React Hooks, including useState, useEffect, and useRef, and create Custom Hooks. Additionally, you will learn about creating HTTP server calls, editing todos, re-rendering optimizations, Dependency Injection, React Router, code splitting, and React Server-Side Rendering. By the end of the course, you will have a deep understanding of how ReactJS works internally and the skills needed to build and optimize high-performance web applications using ReactJS, positioning yourself as a Senior Developer in the industry. Important Links: Course notes: https://github.com/abduvik/just-enough-series/tree/master/courses/react Introduction 00:00:00 - Course Overview 00:03:06 - About ReactJS 00:05:12 - App Structure, understanding Components & Containers Creating main files 00:07:48 - create-react-app and a bit of warning 00:08:23 - Create Hello React App with Typescript + Sass 00:08:44 - Explain the code structure and files 00:10:47 - Understanding JSX 00:13:28 - Creating the header component 00:17:29 - Styling components 00:21:20 - Explain css modules 00:25:58 - React Fragments 00:27:01 - Partials 00:31:06 - Props 00:37:01 - ReactNode vs ReactComponent 00:39:30 - Global Styles Creating TodoContainer 00:46:30 - Create TodoContainer 00:53:55 - Create TodoItem 01:04:35 - Using .map 01:08:16 - AddTodoItem form 01:18:36 - React Hook: useState + Passing Events 01:26:07 - Passing callback to setState 01:28:50 - Using states with forms 01:43:54 - React Hook: useEffect 01:47:00 - React Hook: useRef + forwardRef 01:55:32 - Custom Hooks Creating HTTP Server Calls 01:59:21 - Create a NodeJS service for HTTP API calls 02:03:48 - Get todos from the backend using useEffect + Fetch API 02:08:20 - Add todo through the API call 02:14:09 - Understanding Services & create HttpService 02:19:28 - Understanding Adapters & create HttpAdapter 02:32:03 - Dependency Injection with ReactJs Creating EditTodoContainer 03:09:59 - Creating EditTodoContainer 03:38:18 - Update Todo functionality 04:00:28 - Creating canvas element 04:14:39 - Add filters to todos Re-rendering Optimizations 04:31:02 - Virtual DOM in ReactJs (Fiber 04:38:13 - Using memo and useCallback 04:51:33 - React Hook: useContext React Router 05:21:21 - How routing works internally with History API 05:34:17 - Use react-router 05:39:26 - Create StatsContainer 05:48:34 - Create AboutContainer Code Splitting 05:57:36 - How code splitting works internally 06:14:15 - Replace with React Suspense & Lazy React Server-Side Rendering 06:22:46 - React Server Side Rendering 06:26:56 - Create Simple Server and return React Component 06:42:59 - Custom Webpack configurations 06:59:31 - SSR Hydration ============================================ Newsletters: https://newsletter.abdu.dev/ Connect on social media: - Twitter: https://twitter.com/abduvik - Medium: https://abduvik.medium.com/ - LinkedIn: https://www.linkedin.com/in/abduvik/ - Instagram: https://www.instagram.com/abduvik/ - Github: https://github.com/abduvik Freelancing: - Portfolio: https://www.flexnebula.com/portfolio/ #reactjs #reactjstutorial #seniorengineer