Master React, TypeScript, and Redux: Build Modern Web Apps (Arabic)

What you will learn:

TypeScript
React
Redux
Redux Toolkit
RTK Query
React Router
Tailwind CSS
API Integration
Asynchronous Programming
State Management
Component Lifecycle
Performance Optimization
Authentication
Next.js 13
Design Systems
MongoDB
Prisma
Full-Stack Development

Description

Dive into the world of modern frontend development with this comprehensive Arabic course! Learn to build dynamic and scalable web applications using React, TypeScript, and Redux. This practical, hands-on course is perfect for both beginners with JavaScript experience and those looking to enhance their skills.

You'll master React's core concepts, from components and JSX to state management and routing. TypeScript's strong typing will elevate your code quality and maintainability, and Redux will help you structure complex applications effectively. We cover essential techniques like asynchronous programming with promises and async/await, API integration, data fetching, and robust error handling.

Beyond the fundamentals, you'll build several real-world projects, applying your knowledge to create a product builder, a clone of the React.js documentation site, a full-stack todo application, and even a Visual Studio Code clone! You'll explore best practices for performance optimization, including techniques like memoization and component lifecycle management. We'll also explore state management using Redux Toolkit and RTK Query. Finally, get a taste of modern frameworks such as Next.js 13. By the end of this course, you’ll be well-equipped to tackle challenging frontend projects and create stunning web applications.

Enroll today and transform your frontend development skills!

Curriculum

TypeScript Foundations

This section lays the groundwork for TypeScript proficiency. Starting with an introduction and exploring its benefits, you'll set up your TypeScript environment and delve into concepts like type annotations, inference, various data types (string, number, object, array, etc.), interfaces, generics, and more. Lectures cover advanced topics such as type manipulation utilities, handling errors, and using TypeScript effectively with advanced JavaScript features.

JavaScript Refresher (using TypeScript)

A quick review of core JavaScript concepts, emphasizing best practices in variable scoping (var, let, const), operators, object manipulation (destructuring, spread, rest parameters), and the newest ECMAScript methods. All examples will be written in TypeScript to reinforce learning from previous section. This section solidifies your JavaScript base, vital for a strong React foundation.

Asynchronous Programming and Promises

Master the art of handling asynchronous operations in JavaScript. You'll differentiate between synchronous and asynchronous programming, understand callback functions, avoid 'callback hell,' and become proficient with JavaScript Promises. This section goes in-depth into Promise's methods (then, catch, finally, all, race, any), error handling and smoothly transitions into the use of async/await for cleaner asynchronous code.

React.js Fundamentals

Dive into React's core, covering project setup using Vite.js, JSX, component creation, props, state management with `useState`, handling form submissions (controlled vs. uncontrolled inputs), managing lists with keys, styling with inline styles and Sass, and leveraging React DevTools for debugging. The section provides a solid React foundation.

React Project 1: Building a Dynamic Alert Component

This project allows you to build a practical alert component using React, TypeScript, and Sass. You’ll learn to create reusable components, dynamically update them based on user input, handle different alert types, and style your component effectively using Sass, solidifying your understanding of React concepts in a real-world application.

React Project 2: Creating a Product Builder

Construct a sophisticated product builder application, applying your knowledge of React, TypeScript, Tailwind CSS, and component design systems. You'll build reusable components, implement form validation, handle data persistence, practice responsiveness through mobile-first development, and use various tools including headless UI. This project builds on earlier sections, creating a more complex application.

Component Lifecycle and useEffect Hook

Understand how React components behave throughout their lifecycle, learning about mounting, updating, and unmounting phases. Master the `useEffect` hook for side effects, including data fetching, cleanup functions, and advanced techniques like abort controllers for request cancellation. This section is crucial for building robust and efficient React applications.

Routing and Building a React.js Docs Clone

Implement client-side routing with React Router, building a clone of the React.js documentation site. This hands-on project will teach you how to manage page layouts, handle navigation, create protected routes, build a robust error handling system (404 page not found), and handle route conflicts to manage various route scenarios.

Mastering APIs with a Full-Stack Todo App

Build a complete full-stack Todo application, interacting with a Strapi backend API. This project will teach you about REST APIs, CRUD operations, working with JWT authentication, handling API responses, implementing error handling, working with React Query, integrating with a backend, and implementing features such as pagination and sorting. This project brings together all previous skills to create a robust, full-stack application.

Performance and Optimization

Optimize your React applications for speed and efficiency, focusing on preventing unnecessary re-renders. You'll learn memoization techniques (`memo`, `useCallback`, `useMemo`), understand shallow comparison, utilize React Profiler for component analysis and learn about list virtualization for handling large datasets efficiently.

Redux Toolkit for State Management

Explore Redux Toolkit, a simplified approach to managing application state. Learn the core principles of Redux and master the use of slices, actions, reducers, `useSelector` and `useDispatch` hooks. Build a shopping cart application to consolidate learning, optimizing your state management. You will learn techniques to debug and analyze your application state.

Visual Studio Code Clone Project

Build a simplified clone of Visual Studio Code, utilizing your skills in React, TypeScript, and Redux. This challenging project will allow you to apply your knowledge of file system navigation, recursive components, dynamic component rendering, context menus and overall application state management. This project is a significant culmination of all previous projects.

Redux Toolkit Query (RTK Query)

Learn to fetch and manage asynchronous data efficiently using RTK Query, a powerful add-on for Redux Toolkit. This section focuses on creating and using queries, handling loading states, error management, and utilizing advanced features like caching, invalidation, and mutation handling within your applications. This section allows you to optimize the way you manage API calls.

Build a Full-Stack E-commerce App

Create a full-featured e-commerce application, combining a React frontend with a Strapi backend. This comprehensive project will cover everything from product modeling, API interactions, user authentication, shopping cart functionality, and database management to deployment and utilizing third-party services like Cloudinary for image uploads. This project will solidify your experience in building a full featured application.

Next.js 13: Mastering a Modern React Framework

Explore Next.js 13, a powerful React framework. You will learn about routing, dynamic routes, data fetching with server components, image optimization, error handling, layouts, server components, API routes, SEO optimization, server-side rendering (SSR), client-side rendering (CSR), and list virtualization. This allows you to use a powerful framework to increase your development capabilities.

Design System: Building Your Own Framework

Learn to build a custom design system from scratch, achieving pixel-perfect consistency. You’ll design reusable components, apply them across projects, explore design system principles, and master responsive design. This project ensures that you will not only be able to build applications but also to build systems that guarantee consistency.

Build a Full-Stack TODO App with Next.js and MongoDB

Build a full-stack TODO app using Next.js, Prisma ORM, and MongoDB, learning to manage data efficiently. You will learn to implement authentication using Clerk. This project integrates your knowledge with Next.js, a modern framework and advanced database handling techniques.