Web Development


React JS: React with Modern Hooks and Context

Learn modern React Hooks and Context with my React Hooks and Context course and leverage your web development skills

4.50 (5 reviews)


11.5 hours


Jul 2021

Last Update
Regular Price

Unlimited access to 30 000 Premium SkillShare courses

What you will learn

This course is the best way to learn modern React JS and React Hooks and Context

Dive in React JS

Learn how to build single page applications with React JS

Learn components, props, states and component life cycle methods in React JS

Create reusable React Components

Learn modern JavaScript, ES6

Learn to connect to an external API

User Inputs, Forms and Events in React

Routing with React Router

Using React Portals to render Children Outside the DOM Hierarchy

React JS Hooks and Context

React’s modern face is to develop web applications with React Js Hooks and Context

Creating Hooks and Context structures

Creating Hooks and Context structures with explanatory diagrams

What is Context Api and how it is used

Using Context Api and Hooks together

Creating Context with Class Component

Access to Context with Context Type

To manipulate the data in Context

useState, useEffect, useReducer, and useContext hooks

Reducer, action and dispatch concepts and much more

How to use coding techniques to make efficient development

All you need is your computer and you!


Hello there,

Welcome to React JS: React with Modern Hooks and Context course.

  • Do you want to learn ReactJS from scratch?

  • Do you want to learn the latest React features of Hooks and Context system?

  • Do you want to create an app with React Hooks and Context; in a very detailed way?

If your answer is "Yes", you are in the right place. This React JS: React with Modern Hooks and Context course will be a perfect match.

Learn by doing!

So we have made this course as simple as possible in order to take you through step by step so you can feel confident and get a truly good understanding of how to utilize React.  In this course, we will be teaching React by creating various projects. This course will take you from a beginner to a more advanced level with hands-on examples.

Fresh Content

It’s no secret how technology is advancing at a rapid rate. New tools are released every day, and it’s crucial to stay on top of the latest knowledge for being a better React developer. You will always have up-to-date content for this course at no extra charge.

In the course, we are going to use free tools and platforms so you don't have to buy any tool or app.

You are going to learn the latest React features of Hooks and Context system. We are going to create two nice looking app, to show Hooks and Context; in a very detailed way. You are going to learn how to use and state in functional components with Hooks system and with Context API you won't need any third-party package to manage the Application state.

We tried to explain all complex topics in very detail on the course. I used some diagrams to tell some important topics and created a nice-looking mobile application. In the course, we created our applications with expo-cli.

At the end of the course, you will learn

  • How to create a Single Page Web Application with React JS.

  • The most important React topics like components, props, state and component life cycle methods

  • How to send request to an API and fetch data.

  • How to create multi-page web app with react-router-dom.

  • How to create a context with the class-based component.

  • How to consume context with ‘context consumer’.

  • How to consume context with ‘static contextType’.

  • How to manipulate context data in class-based components.

  • The most important hook functions like useState, useEffect, useReducer, and useContext.

  • How powerful when we use context and hooks together and much more…

Why would you want to take this course? 

Our answer is simple: The quality of teaching.

OAK Academy based in London is an online education company. OAK Academy gives education in the field of IT, Software, Design, development in English, Portuguese, Spanish, Turkish and a lot of different language on Udemy platform where it has over 1000 hours of video education lessons. OAK Academy both increase its education series number by publishing new courses, and it makes students aware of all the innovations of already published courses by upgrading.

When you enroll, you will feel the OAK Academy`s seasoned developers expertise. Questions sent by students to our instructors are answered by our instructors within 48 hours at the latest

No prior knowledge is needed! 

It doesn't need any prior knowledge to learn it and the React is easy to understand for the beginners. 

This course starts with very basics. First, you will learn how to install the tools, some terminology. Then the show will start and you will learn everything with hands-on practices.  I'll also teach you the best practices and shortcuts.

Step-by-Step Way, Simple and Easy With Exercises

By the end of the course, you’ll have a firm understanding of the React and valuable insights on how things work under the hood and you'll also be very confident in the basics of coding and game development, and hungry to learn more. The good news is since the Free and popular tools are used you don’t need to buy any tool or application.

Video and Audio Production Quality

All our videos are created/produced as high-quality video and audio to provide you the best learning experience.

You will be,

  • Seeing clearly

  • Hearing clearly

  • Moving through the course without distractions

You'll also get:

Lifetime Access to The Course

Fast & Friendly Support in the Q&A section

Udemy Certificate of Completion Ready for Download

Dive in now to our React JS: React with Modern Hooks and Context course

We offer full support, answering any questions.

See you in the course!


React JS: React with Modern Hooks and Context
React JS: React with Modern Hooks and Context
React JS: React with Modern Hooks and Context
React JS: React with Modern Hooks and Context


What You Will Learn in React with Modern Hooks and Context Course?

What You Will Learn and How to Get Help?

Let`s Start to Learn React JS

Your First App Overview

Frequently Asked Questions

Github Repo

Let, Const and Var in 3 minutes

Install Node JS

Create Your React App

Why You Will Need To Create a React App?

Start Creating React App

Do You Want to Learn How To Stop React App?

Important Functional Components

What is this JSX?

Converting HTML JSX

Inline Styling with JSX in React JS

JavaScript Variable in JSX

React with Props

Three Tenets of Components

Simple App with React

Styling App with Semantic UI

Building Component

Specifying The Image in React JS

Duplicating The Single Component

Component Nesting

Props System

Passing Props to Child

Reusable Component Overview

Props Children

Class-Based Components

Class-Based Components and Functional Component

New App Overview

Getting Users Physical Location

Handling Async Operation in React

Transformation Functional Component to Class Based Component

State System

State Rules

Initializing State In Constructor

Lifecycle Method Overview

Conditional Rendering

React Lifecycle Methods

Get to Know Lifecycle Method

Refactoring App with Lifecycle Method

Passing State As Props

Ternary Expressions in JSX

Showing Picture

Styling The App

React Developer Tools

General App Review


App Overview

Component Design

Handling Forms

Styling The App

Creating Event Handlers

Controlled vs Uncontrolled Elements

Why Controlled Elements?

Understanding ‘This’ Key Word and Binding

Communicating Child to Parent

Invoking Callbacks In Children

Asyncronous Programming

Fetching Data

Axios vs Fetch

Async Await Function

Setting The State

Rendering A List of Components

Implementing The Key Values In List

What We Have Learned From The App?

React Router

Initializing The Project

The React Router

Link and NavLink

Programmatic Redirects

Route Parameters

React Router Switch Tag

React Portals

How To Create A Modal?

Why React Portals?

Creating a React Portals


Let's Dive Into Hooks & Context

Context & Hooks

Let's Start Building Our Application

Why Context API?

Context Provider

Context Provider

Lets Reach Out The Context State

Consuming Data in TodoList Component

Context Consumer

Update The Context Data

Create Multiple Context

Use Multiple Context Inside One Component


Hooks Intro

Let's Start Creating The App

UseState Hook

UseState with Forms

UseEffect Hook

UseContext Hook

Create Multiple Context with UseContext

Create Context with Functional Component

Hooks & Context

Let's Add New Todo with Hooks and Context

Let's Remove Todo From Context

UseReducer Hook

Let's Implement UseReducer

Reducer Component Structure


Juan14 April 2021

It is helpful for my level to go through step by step and receiving specific information in that step.


4/19/202194% OFFExpired


Udemy ID


Course created date


Course Indexed date
Course Submitted by