React Frontend Development

Categories: Software Development
Wishlist Share
Share Course
Page Link
Share On Social Media

About Course

In this course, you will learn how to use the React JavaScript library to develop frontend web applications in-depth. The course covers key concepts, starting with the fundamentals of React, and then delving into Tailwind CSS for styling. You’ll also learn how to interact with data sources using React APIs and React Queries. The course culminates with an exploration of Next.JS which is a React Framework that can aid in building full-stack applications.

Course Content

1.1 Introduction To React
You will be introduced to the basics of React and learn some of the important fundamentals needed to build your first React application. By the end of this lesson you should be able to initialize a React application, understand the folder structure, and be able to create your first React component and pass information to it using props.

  • What is React?
    00:00
  • CLI Tooling (Vite VS CRA)
    00:00
  • Introduction to Components
    00:00
  • Introduction to JSX
    00:00

1.2 Styling, State and Events
In this lesson you'll be introduced to a styling pre-processor(Saas) and a utility-first CSS framework (Tailwind CSS). You'll also be introduced to the useState hook and event handling in React by building a simple calculator app. Sass documentation. useState Hook documentation. TailwindCSS documentation

1.3: Props vs State & Conditional Rendering
In this lesson, you will get to understand the difference between props(properties) in React and what state is. You will also build some logic using conditional rendering with JavaScript's ternary operator.

1.4: Lists and Keys, useEffect, Vercel Deployment
In this lesson we will get to learn the concept of lists and keys (Displaying Multiple dynamic data), useEffect (Component Lifecycle), Vercel Deployment (Deploying our React App)

1.5: WEEK 1 PROJECT

2.1: Routing.
React is referred to as a Single Page Application SPA. To implement routing in React you need an external library called react-router-dom..

2.2: Dynamic Routing

2.3: Handling Not Found Errors

2.4: Nested Routing

2.5: Week 2 Project

3.1: Hooks

3.2: useMemo Hook

3.3: useCallBack Hook

3.4: Custom Hooks

3.5: Week 3 Project

4.1: State Management

4.2: Context API for state management

4.3: useReducer Hook

4.4: Testing in React

4.5: Week 4 Project

Student Ratings & Reviews

No Review Yet
No Review Yet