Register
Information Technology

Front End Development with ReactJs

Are you ready to build modern web applications using ReactJS? This comprehensive course starts with the basics—covering React fundamentals, TypeScript integration, and best practices for organizing your code. As you progress, you’ll explore advanced concepts like routing, global state management with the Context API and Redux, and efficient form handling. You’ll also learn how to style your applications with Tailwind CSS, creating responsive layouts using Flexbox and Grid. The course offers a hands-on introduction to AI-assisted coding with ChatGPT, culminating in real-world projects. By the end, you’ll be skilled with frontend, ReactJS, Git, Github.

16.5 hours
11 Lessons
Beginner

This course includes:

11Lessons
Access to laptops
Real-Time Project
Certificate of completion

Course Content

  • Recap of previous class & Overview of today's class
  • React Basics
  • Set up & First React Application with React Project Structure
  • Understanding the working of React and JSX code examples
  • Practice Project: Donation Card Page
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Practice Project: JSX Profile Card
  • Understanding Components & Props
  • Understanding children in React with practice project
  • Understanding States, Events and Hooks
  • Open to questions
  • Recap of previous class & Overview of today's class
  • useState hook code examples
  • Practice Project: Build Theme Switcher (useState)
  • Forms in React
  • Practice Project: React Form
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Practice Project: Refactor React Form
  • Practice Project: Feedback Project
  • Conditional Rendering (If-Else statement + Ternary Operator)
  • Data rendering using map
  • Understanding useContext API
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Understanding useReducer API
  • useContext + useReducer
  • React Router DOM
  • Socket.IO Introduction
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Chat App Part 1
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Chat App Part 2
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Chat App Part 3
  • Open to questions
  • Recap of previous class & Overview of today's class
  • React Redux
  • React Query (Tanstack Query)
  • Redux vs React Query
  • Important Redux Terminologies
  • Creating React Project + Packages and template Rendering
  • Redux Store, Actions and Reducers Configurations
  • Open to questions
  • Recap of previous class & Overview of today's class
  • Configuring React Query
  • React Query Overview and Login User
  • Dispatching Login Action with Redux and persisting the logged-in user
  • Showing Public & Private Navbar
  • Logout & user Registration with Fetch user profile
  • Open to questions
  • Overview & Project

What You Will Learn

Understand the core principles of ReactJs & Typescript
Writing JSX (JavaScript XML) for cleaner UI code
Developing both functional and class components
Passing and validating props with TypeScript interfaces
Building simple and advanced state-driven apps
Utilizing the Context API for lightweight global state
Introduction to Redux for more complex or large-scale state management
Overview of ChatGPT and how it can assist with coding tasks
Building a To-Do List app with ChatGPT prompts

Skills You Will Gain

React & TypeScript Setup
JSX & React Components
State Management & Event Handling
React Router
Global State Management
Forms & Validation
Styling in React
Introduction to AI Tools
Real-World Projects
Deployment
Share: