Scribd
Upload
129 views

React & Next Js

This Udemy course provides a comprehensive overview of React by covering topics like components, props, state, effects, forms, authentication, and more. It also teaches important related topics such as Redux, React Router, and Next.js. Students will learn React fundamentals and advanced concepts through explanations and hands-on projects like building a Tic-Tac-Toe game, quiz app, and employee dashboard. The course utilizes the latest React features and patterns to help students develop production-ready single page applications.

Uploaded by

12002040701186
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
129 views

React & Next Js

This Udemy course provides a comprehensive overview of React by covering topics like components, props, state, effects, forms, authentication, and more. It also teaches important related topics such as Redux, React Router, and Next.js. Students will learn React fundamentals and advanced concepts through explanations and hands-on projects like building a Tic-Tac-Toe game, quiz app, and employee dashboard. The course utilizes the latest React features and patterns to help students develop production-ready single page applications.

Uploaded by

12002040701186
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

‭https://www.udemy.

com/course/react-the-complete-guide-incl-redux/‬
‭(All the topics will be available here in this course)‬

‭Getting Started With React Js‬


-‭ What is React.js? And Why Would You Use It?‬
‭- ReactJS vs "Vanilla JavaScript": Why Use React?‬
‭- Creating React Projects‬
‭- Why Do You Need A Special Project Setup?‬

‭JavaScript Refresher (Cover all topics)‬

‭ eact Essentials - Components, JSX, Props, State & More‬


R
‭- Setting Up The Starting Project‬
‭- JSX & React Components [Core Concept]‬
‭- Creating & Using a First Custom Component‬
‭- A Closer Look: Components & File Extensions‬
‭- How React Handles Components & How It Builds A "Component Tree" [Core Concept]‬
‭- Using & Outputting Dynamic Values‬
‭- Setting HTML Attributes Dynamically & Loading Image Files‬
‭- Making Components Reusable with Props [Core Concept]‬
‭- Best Practice: Storing Components in Files & Using a Good Project Structure‬
‭- Storing Component Style Files Next To Components‬
‭- Component Composition: The special "children" Prop [Core Concept]‬
‭- Reacting to Events [Core Concept]‬
‭- How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept]‬
‭- Managing State & Using Hooks [Core Concept]‬
‭- Rendering Content Conditionally‬
‭- CSS Styling & Dynamic Styling‬

‭ eact Essentials - Deep Dive‬


R
‭- Working with Fragments‬
‭- Splitting Components By Feature & State‬
‭- Forwarding Props To Wrapped Elements‬
‭- Setting Component Types Dynamically‬
‭- Setting Default Prop Values‬
‭- Best Practice: Updating State Based On Old State Correctly (imp)‬
‭- User Input & Two-Way-Binding‬
‭- Updating Object State Immutably‬
‭- Deriving State From Props‬
‭- Sharing State Across Components‬
‭- Outsourcing Data Into A Separate File‬
‭ tyling React Components‬
S
‭- Splitting CSS Code Across Multiple Files‬
‭- Styling React Apps with Vanilla CSS - Pros & Cons‬
‭- Vanilla CSS Styles Are NOT Scoped To Components‬
‭- Dynamic & Conditional Inline Styles‬
‭- Scoping CSS Rules with CSS Modules‬
‭- Introducing "Styled Components" (Third-party Package)‬
‭- Dynamic & Conditional Styling with Styled Components‬
‭- Adding & Using Tailwind CSS In A React Project‬
‭- Dynamic & Conditional Styling with Tailwind‬

‭ orking with Refs & Portals‬


W
‭- Introducing Refs: Connecting & Accessing HTML Elements via Refs‬
‭- Manipulating the DOM via Refs‬
‭- Refs vs State Values‬
‭- Setting Timers & Managing State‬
‭- Forwarding Refs to Custom Components‬
‭- Exposing Component APIs via the useImperativeHandle Hook‬
‭- Introducing & Understanding "Portals"‬
‭- Controlled vs Uncontrolled Components‬

‭ eact's Context API & useReducer - Advanced State Management‬


R
‭- Understanding Prop Drilling & Project Overview‬
‭- Prop Drilling: Component Composition as a Solution‬
‭- Introducing the Context API‬
‭- Introducing the useReducer Hook‬

‭ andling Side Effects & Working with the useEffect() Hook (get the idea of useEffect and‬
H
‭how it works)‬
‭- Cover other hooks (‬‭https://legacy.reactjs.org/docs/hooks-overview.html‬‭)‬

‭ Look Behind The Scenes Of React & Optimization Techniques‬


A
‭- React Builds A Component Tree / How React Works Behind The Scenes‬
‭- Avoiding Component Function Executions with memo()‬
‭- Understanding the useCallback() Hook‬
‭- Understanding the useMemo() Hook‬
‭- Virtual DOM‬
‭- Why Keys Matter When Managing State!‬
‭ n Alternative Way Of Building Components: Class-based Components (It is old version‬
A
‭of react, latest version function component has been used)‬
‭- Lifecycle method‬
‭- state management‬
‭- method binding‬

‭ PI integration (HTTP request)‬


A
‭- Using async / await‬
‭- Transforming Fetched Data‬

‭ ustom Hooks & HOC‬


C
‭- What are "Custom Hooks"?‬
‭- Using Custom Hooks‬
‭- Error Boundary‬
‭- HOC (Ex. Protected Route)‬

‭Working with Forms & User Input‬‭(‬‭https://react-hook-form.com/get-started‬‭)‬


-‭ Handling Form Submission‬
‭- Validation‬
‭- React-hook-form‬

‭Redux‬‭(‬‭https://redux.js.org/introduction/getting-started‬‭)‬
-‭ Redux vs React Context‬
‭- How Redux Works‬
‭- Redux with Class-based Components‬
‭- Redux-thunk / redux-saga‬
‭- Redux Challenges & Introducing Redux Toolkit‬

‭React router‬‭(‬‭https://reactrouter.com/en/main/start/overview‬‭)‬
-‭ Defining Routes‬
‭- Navigating between Pages with Links‬
‭- Working with Navigation Links (NavLink)‬
‭- Route & Search params‬
‭Testing React Apps (Unit Tests) (‬‭https://testing-library.com/docs/react-testing-library/intro/‬‭)‬

‭React + TypeScript (Cover all the topics)‬

‭Additional topics to be covered‬


-‭ Adding Authentication To React Apps‬
‭- React Query (‬‭https://tanstack.com/query/v3/docs/react/overview‬‭)‬

‭Next.js‬
-‭ Introduction to Next.js (Overview why Nextjs is introduced, Why it is considered as Framework‬
‭not library) (SSR) (‬‭https://www.udemy.com/course/nextjs-react-the-complete-guide/‬‭)‬
‭- Axios & Ftech (‬‭https://www.digitalocean.com/community/tutorials/react-axios-react‬‭)‬
‭- Material-UI & tailwind (‬‭https://mui.com/material-ui/getting-started/‬‭,‬
‭https://tailwindcss.com/docs/installation‬‭)‬

‭Projects and Problems‬


‭ ic-Tac-Toe Game‬
T
‭Building a Quiz App‬
‭Building a‬
‭Order App‬
‭Employee dashboard (manage the list of employees and their department)‬

You might also like