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
