FREE Ep1 - WTF is React ? Introduction

React is one of the most used tool to build frontend UI in the modern internet. Let's explore the fundamentals and see why that is the case.

FREE Ep2 - React Setup, JSX and Architecture Basics

Let's talk about the architectural concepts in React and the tooling used in modern frontend development.

FREE Ep3 - Workout Timer App Overview | React Deep Dive

I always wanted a workout/rest interval timer. Let's see how we could build this app in React.

FREE Ep4 - Data binding and State

In React, we emphasise on data-driven rather than DOM-driven. We achieve this via reactive variables.

FREE Ep5 - React Event listener in 2 min

Let's learn how to write interactive Components in React with event listeners

FREE Ep6 - React Props | React Strict Mode

HTML has element attributes. In React, they are called props. Essentially, props allow us to pass data to React components.

FREE Ep7 - Looping Components in React

There are situations where we want to repeatedly generate a series of identical UI elements, eg the buttons in a navigation bar. Let's see how React could help us to write less code.

FREE Ep8 - React Use Effect in Simple English

Let's learn about the useEffect hook function in React.

FREE Ep9 - Rules of React Hooks

Hooks are useful, but we got to adhere to a few rules when we use them.

FREE Ep10 - How to write CSS in React ? | Best Practices

Writing CSS in React could be tricky. Let's talk about the best practices in this lesson.

FREE Ep11 - I tried to Rickroll in React, and this happened...

We will put everything that we have learnt so far and build a small app together.

FREE Ep12 - Think like a Modern Frontend Developer

Building UI in React is different to traditional JS. Let's talk about the modern ways in building a web app.

FREE Ep13 - How to structure a React project

Organising our React app could be intimidating in the beginning. Let's talk about the best practices.

FREE Ep14 - React Developer Tools | Productivity BOOST

The React Team has created an amazing browser extension that helps to debug our React components.

FREE Ep15 - WindiCSS and React

Windicss is an excellent utility first CSS library that fits right into an React project.

FREE Ep16 - React Router and SPA | Quick Intro

A typical React project relies on a client-side router to navigate around pages.

FREE Ep17 - Creating Links in React Router

We can't use the anchor tag element directly in React router. Let learn the proper way to create links in React Router.

FREE Ep18 - Programmatic Redirection in React

Let's learn how to programmatically redirect the user to a different page in React Router.

FREE Ep19 - Route Group & Dynamic Route

Organising routes could be tricky. Let's see what other options we have.

FREE Ep20 - URL info in React Router with useLocation

React Router provides a nice API to read the current URL info.

FREE Ep21 - React Router useRoutes hook

There is another way to define routes without using JSX!

FREE Ep22 - Hash Router

There are times when we don't have control over the backend server and hence we will get 404 errors on our SPA routes.Let's see how we could fix this issue using a Hash Router.

FREE Ep23 - Outlet | Secondary layout

Outlet is a way to provide an inner layout for parent components.

FREE Ep24 - Data API in React Router

React Router v6.4 introduced a set of brand new APIs, known as Data API.

FREE Ep25 - Loader | React Router Data API

Sometimes we need to perform an action when we are loading a certain resource.The Data API provides a handy way to achieve this!

FREE Ep26 - Action | React Router Data API

Action allows us to register a hook whenever there is a form submission or outgoing HTTP request.

FREE Ep27 - Fetcher | React Router Data API

Let's learn how to programmatically trigger a loader or an action

FREE Ep28 - Revalidation | React Router Data API

We could retrigger the loader after a form submission by using revalidation

FREE Ep29 - Organising Routes in React Router

Our routes could get messy when our project gets bigger.Let's see how we could solve this.

FREE Ep30 - Handling Error

We can't avoid error, but we can handle them

FREE Ep31 - Deploying React App In Github Pages

Github Pages is a static page hosting service, however the React browser router does not play nicely with github pages.

FREE Ep32 - Sass in React

Let's bring our css to the next level by introducing SASS to our project.

FREE Ep33 - React Props Type

A component can accept any arbitrary props, but it would be helpful if we could define the prop type.

FREE Ep34 - Creating Buttons in React

Let's build the buttons in our timer app

FREE Ep35 - Building a Switch / Toggle in React

We will build the switch component.

FREE Ep36 - Editable Field in React

Building the editable input.

FREE Ep37 - Progress Bar in React

Building the countdown progress bar

FREE Ep38 - Tooltip Component in React

Building the Tooltip component

FREE Ep39 - Countdown Clock

Building the countdown clock

FREE Ep40 - What is State Management and Why ?

State management is basically having a central location to store the app's state.

FREE Ep41 - Context API & Provider

React utilises the context api as its native solution to state management.

FREE Ep42 - Reducer

Reducer is a way to manipulate the state in the state management store

FREE Ep43 - Consumer

Consumers let us render components from the state in the store.

FREE Ep44 - Creating the dashboard

Let's build the dashboard of our timer app.

FREE Ep45 - Updating State

Let's apply the state management techniques to update the data in our store.

PREMIUM Ep46 - Creating the timers

We will put everything together and build the main logic of the timer app.

PREMIUM Ep47 - Playing Sound in React

Let's incorporate some sound effects using the Audio API