Skip to content

Mobile and Web Development with React and React Native

Learn React with React JS, React Native, Router, Hooks and Context course and dive deeper into React Native


Oak Academy

Summary

Price
£18 inc VAT
Study method
Online, On Demand What's this?
Duration
18.5 hours
Qualification
No formal qualification
Optional extras

Digital certificate included in price

Add to basket or enquire

Overview

Hello there,

Welcome to Mobile and Web Development with React and React Native course.
Learn React with React JS, React Native, Router, Hooks and Context course and dive deeper into React Native

React is one of the best choices for building modern web applications. If you are new to React or maybe you've been struggling to learn and truly understand what’s going on then this course is the best way for you to learn React.

Each aspect of creating websites and applications entails a unique set of skills.

The world of web development is as wide as the internet itself. Much of our social and vocational lives play out on the internet, which prompts new industries aimed at creating, managing, and debugging the websites and applications that we increasingly rely on.

React-Native is a library developed by the React team and it is widely used to create mobile applications for both Android and IOS. You do not need to learn Java, Android, Swift, Objective-C, or anything of that. React and JavaScript is all you need to create awesome mobile apps that work on both Android and iOS.

  • Do you want to learn React Js from scratch?

  • Do you want to learn React Native 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 React Router; in a very detailed way?

If your answer is "Yes", you are in the right place. This Mobile and Web Development with React and React Native course will be a perfect match.

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

Dive in now to our Complete React Native Course with Router, Hooks and Context course

We offer full support, answering any questions.

See you in the course!

Curriculum

29
sections
154
lectures
18h 28m
total
    • 1: Project Files and Course Documents 01:00
    • 2: 2 - Your First App Overview 11:06
    • 3: 3 - Frequently Asked Questions 09:19
    • 4: 4 - Let, Const and Var in 3 minutes 03:53
    • 5: 5 -Install Node JS 05:26
    • 6: 6 - Create Your React App 05:36
    • 7: 7 - Why You Will Need To Create a React App_ 06:27
    • 8: 8 -Start Creating React App 06:24
    • 9: 9 - Do You Want to Learn How To Stop React App_ 05:18
    • 10: 10 - Important Functional Components 15:06
    • 11: FAQ about Full Stack Web Development with React, React native, Angular 03:00
    • 12: 11 - Converting HTML JSX 06:02
    • 13: 12 - Inline Styling with JSX in React JS 10:54
    • 14: 13 - JavaScript Variable in JSX 12:44
    • 15: 14 - Three Tenets of Components 03:34
    • 16: 15 - Simple App with React 02:55
    • 17: 16 - Styling App with Semantic UI 08:35
    • 18: 17 - Building Component 03:57
    • 19: 18 - Specifying The Image in React JS 03:19
    • 20: 19 - Duplicating The Single Component 01:59
    • 21: 20 - Component Nesting 12:06
    • 22: 21 - Props System 04:11
    • 23: 22 - Passing Props to Child 13:03
    • 24: 23 - Reusable Component Overview 02:47
    • 25: 24 - Props Children 12:42
    • 26: Quiz 01:00
    • 27: 25 - Class-Based Components and Functional Component 05:49
    • 28: 26 - New App Overview 08:43
    • 29: 27 - Getting Users Physical Location 07:58
    • 30: 28 - Handling Async Operation in React 03:35
    • 31: 29 - Transformation Functional Component to Class Based Component 04:53
    • 32: 30 - State Rules 04:19
    • 33: 31 - Initializing State In Constructor 13:49
    • 34: 32 - Lifecycle Method Overview 12:26
    • 35: 33 - Conditional Rendering 05:19
    • 36: 34 - Get to Know Lifecycle Method 12:55
    • 37: 35 - Refactoring App with Lifecycle Method 03:08
    • 38: 36 - Passing State As Props 04:27
    • 39: 37 - Ternary Expressions in JSX 05:49
    • 40: 38 - Showing Picture 06:34
    • 41: 39 - Styling The App 10:12
    • 42: 40 - Free React Developer Tools 03:49
    • 43: 41 - General App Review 06:55
    • 44: 42 - App Overview 02:43
    • 45: 43 - Component Design 03:03
    • 46: 44 - Handling Forms 08:31
    • 47: 45 - Styling The App 03:22
    • 48: 46 - Creating Event Handlers 06:16
    • 49: 47 - Controlled vs Uncontrolled Elements 04:41
    • 50: 48 - Why Controlled Elements 07:40
    • 51: 49 - Understanding ‘this’ Key Word In JS 10:06
    • 52: 50 - Communicating Child to Parent 03:02
    • 53: 51 - Invoking Callbacks in Children 04:43
    • 54: 52 - Fetching Data 03:50
    • 55: 53 - Axios vs Fetch 03:45
    • 56: 54 - Async Await Function 10:07
    • 57: 55 - Setting The State 03:23
    • 58: 56 - Rendering A List of Components 05:15
    • 59: 57 - Implementing The Key Values In List 04:35
    • 60: 58 - What We Have Learned From The App 04:05
    • 61: 59 - Initializing The Project 03:13
    • 62: 60 - The React Router 21:09
    • 63: 61 - Link and Nav Links 06:06
    • 64: 62 - Programmatic Redirects 07:21
    • 65: 63 - Route Parameters 15:07
    • 66: 64 - React Router Switch Tag 03:54
    • 67: 65 - Why React Portals_ 08:49
    • 68: 66 - How To Create A Modal_ 07:38
    • 69: 67 - Creating a React Portals 06:53
    • 70: 2 - Context and Hooks 03:23
    • 71: 4 - Let's Start Building Application 11:30
    • 72: 5 - Why Context API 06:40
    • 73: 6 - Context Provider 08:06
    • 74: 7 - Context Provider-2 06:06
    • 75: 8 - Lets Reach Out The Context State 10:21
    • 76: 9 - Consuming Data in TodoList Component 05:30
    • 77: 10 - Context Consumer 07:22
    • 78: 11 - Update The Context Data 07:05
    • 79: 12 - Create Multiple Context 09:26
    • 80: 13 - Use Multiple Context Inside One Component 09:00
    • 81: 14 - Hooks 04:01
    • 82: 15 - Let's Start Creating The App 03:51
    • 83: 16 - UseState Hook 13:25
    • 84: 17 - UseState With Forms 13:28
    • 85: 18 - useEffect hook 09:36
    • 86: 19 - useContext hook 08:50
    • 87: 20 - Create multiple context with useContext 05:51
    • 88: 21 - Create context with functional component 05:44
    • 89: 22 - Hooks and Context 10:22
    • 90: 23 - Let's add new todo with Hooks and Context 14:28
    • 91: 24 - Let's remove todo from context 09:23
    • 92: 25 - useReducer hook 06:07
    • 93: 26 - Let's implement useReducer 13:13
    • 94: 27 - Reducer component structure 05:01
    • 95: 4 - Free Tools For Windows 07:25
    • 96: 5 - Windows Setup for React Native 05:33
    • 97: 6 - How To Start Emulator in Android Studio 15:34
    • 98: 8 - Free Tools for IOS 04:47
    • 99: 9 - OSX Setup for React Native 04:46
    • 100: 10 - Start The Emulator 03:13
    • 101: 12 - How To Create An App 02:51
    • 102: 13 - See Content On Emulator 03:52
    • 103: 14 - Why Do We Need React and React-Native 03:50
    • 104: 15 - Es6 Syntax ( Let, Const, Var) 05:34
    • 105: 16 - First Component 08:41
    • 106: 17 - How To Show Component On Device 10:26
    • 107: 18 - How to Build Our First App 06:46
    • 108: 19 - How to Connect a Component To The Root Component 12:08
    • 109: 20 - Import a Component to Another Component 08:57
    • 110: 21 - Styling with JSX 13:44
    • 111: 22 - Displaying Views 10:45
    • 112: 23 - Header Component’s Styling 04:18
    • 113: 24 - React Props 07:55
    • 114: 25 - How to Reuse Code With Props System 08:31
    • 115: Quiz 01:00
    • 116: 26 - How To Show a List To The User 06:59
    • 117: 27 - The List Component 08:34
    • 118: 28 - Func Component vs Class Based Component 10:44
    • 119: 29 - When Do We Need Lifecycle Methods 09:32
    • 120: 30 - Lifecycle Methods 06:33
    • 121: 31 - Making Request With Axios 09:55
    • 122: 32 - What Is State and How To Initial State 08:44
    • 123: 33 - Using of State 10:33
    • 124: 34 - A Component’s Lifecycle With State 05:01
    • 125: 35 - List Component 08:24
    • 126: 36 - List Item Component 10:14
    • 127: 37 - Reusable Components 06:28
    • 128: 38 - Styled Component for List Items 05:19
    • 129: 39 - Usage of Props.Children 05:46
    • 130: 40 - Item Section 09:18
    • 131: 41 - Introduction to the Flexbox 06:47
    • 132: 42 - Section Header Component 06:04
    • 133: 43 - How to Show An Image 12:46
    • 134: 44 - Scrollable Content 05:23
    • 135: 45 - User Interaction with ReactNative 09:44
    • 136: 46 - Event Handlers 13:13
    • 137: 47 - How to Open Another App (Browser) 04:43
    • 138: 10 - React Native on Mobile Device 02:18
    • 139: 11 - Expo CLI project 06:46
    • 140: 48 - Router Expo CLI Project 02:50
    • 141: 49 - See The Content On A Device or Emulator 05:12
    • 142: 50 - What Is Router And Installation 04:38
    • 143: 51 - Setting up a Router in Project 09:51
    • 144: 52 - Flatlist 06:12
    • 145: 53 - Rendering A List With FlatList 08:09
    • 146: 54 - How Does FlatList Work 06:21
    • 147: 55 - Giving the Key Prop 08:42
    • 148: 56 - FlatList Props 07:23
    • 149: 57 - Book Detail Screen 06:21
    • 150: 58 - Navigate Between Screens 12:13
    • 151: 59 - Navigating from a Child Component 05:26
    • 152: 60 - Navigation Function 05:46
    • 153: 61 - Data Transfer Between Screens 07:13
    • 154: Quiz 01:00

Course media

Description

Hello there,

Welcome to Mobile and Web Development with React and React Native course.
Learn React with React JS, React Native, Router, Hooks and Context course and dive deeper into React Native

React is one of the best choices for building modern web applications. If you are new to React or maybe you've been struggling to learn and truly understand what’s going on then this course is the best way for you to learn React.

Each aspect of creating websites and applications entails a unique set of skills.

The world of web development is as wide as the internet itself. Much of our social and vocational lives play out on the internet, which prompts new industries aimed at creating, managing, and debugging the websites and applications that we increasingly rely on.

React-Native is a library developed by the React team and it is widely used to create mobile applications for both Android and IOS. You do not need to learn Java, Android, Swift, Objective-C, or anything of that. React and JavaScript is all you need to create awesome mobile apps that work on both Android and iOS.

  • Do you want to learn React Js from scratch?

  • Do you want to learn React Native 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 React Router; in a very detailed way?

If your answer is "Yes", you are in the right place. This Mobile and Web Development with React and React Native course will be a perfect match.

React is one of the best choices for building modern web applications. If you are new to React or maybe you've been struggling to learn and truly understand what’s going on then this course is the best way for you to learn React.

React-Native is a library developed by the React team and it is widely used to create mobile applications for both Android and IOS. You do not need to learn Java, Android, Swift, Objective-C, or anything of that. React and JavaScript is all you need to create awesome mobile apps that work on both Android and iOS.

This course is for all levels. We will take you from beginner to advance level. You will learn React development step-by-step with hands-on demonstrations. To be able to benefit from this course, all you need is a basic understanding of JavaScript.

In the course, we are going to tell you what dependencies you need to install and how in detail, to be able to create mobile apps on both MAC and Windows. 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 how to run an Android and IOS simulator on your MAC or Windows computer. Besides, with the Expo app, you will be able to run your apps on your own mobile device as well.

Later on the course, we are going to learn basics of React and React Navigation. JSX, 'props system' and 'state system' are going to be crystal clear for you at the end of the course. We are going to create nice looking reusable components. You are going to be able to use these reusable components in your own future projects. You are going to go to different screens from the app with React-navigation.

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

We tried to tell all complex topics in very detail on the course. We used some diagrams to tell some important topics and created a nice-looking mobile application. We showed two different ways to create a mobile app. We showed both react-native-cli and expo-cli in our course.

At the end of the course;

  • Basics of React, React-Native, React-Navigation libraries

  • How to send an HTTP request from a mobile application

  • How to use flex-box system

  • How to create reusable components

  • To reach another app on the device from our app

  • Creating your own mobile app both with react-native-cli and expo-cli

  • Creating Context with Class Based and Functional Components

  • How to Consume Context in Class Based and Functional Components

  • How to Use Multiple Context in one single component

  • Hooks Functions(useState, useEffect, useReducer, useContext...)

  • Creating Reducer and

  • Using Reducer is going to be clear for you.

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

Dive in now to our Complete React Native Course with Router, Hooks and Context course

We offer full support, answering any questions.

See you in the course!

Who is this course for?

  • Beginner who wants to be React developer
  • Anyone who has basic HTML, CSS and JavaScript knowledge and wants to learn how to create complex applications
  • Anyone planning a job transformation and wants to become a React developer
  • Anyone who wants to build amazing React single page web applications
  • Anyone who wants to create mobile applications for both Android and IOS
  • People who are planning a career in the application world
  • Developers who have researched React but have had trouble mastering some concepts
  • Anyone who want to start from scratch and to move more advanced level
  • People who to become web developer
  • People who to become mobile developer
  • People who to become front end web developer
  • People who to become backend web developer
  • People who to become full stack web developer
  • People who to become web developement with react, react native
  • People who to learn full stack web development
  • People who to learn full stack web development or mobile app development

Requirements

  • No prior knowledge is required! about react, react native web development or mobile development
  • A Windows PC, Mac or Linux Computer
  • JavaScript + HTML + CSS fundamentals are absolutely required but you don’t need to be an expert
  • Desire to learn React
  • Nothing else! It’s just you, your computer and your ambition to get started today
  • Desire to learn React or React JS
  • Desire to learn web development with react, or react js
  • Desire to learn mobile development with react native, redux, hooks and context
  • Desire to learn full stack web development with react, react native
  • Desire to learn React js
  • Desire to learn React js, typescript

Questions and answers

Currently there are no Q&As for this course. Be the first to ask a question.

Optional extras

Digital certificate

Reed courses certificate of completion is included in course price

Additional information:

Will be downloadable when all lectures have been completed

Reviews

Currently there are no reviews for this course. Be the first to leave a review.

FAQs

What does study method mean?

Study method describes the format in which the course will be delivered. At Reed Courses, courses are delivered in a number of ways, including online courses, where the course content can be accessed online remotely, and classroom courses, where courses are delivered in person at a classroom venue.

What are CPD hours/points?

CPD stands for Continuing Professional Development. If you work in certain professions or for certain companies, your employer may require you to complete a number of CPD hours or points, per year. You can find a range of CPD courses on Reed Courses, many of which can be completed online.

What is a ‘regulated qualification’?

A regulated qualification is delivered by a learning institution which is regulated by a government body. In England, the government body which regulates courses is Ofqual. Ofqual regulated qualifications sit on the Regulated Qualifications Framework (RQF), which can help students understand how different qualifications in different fields compare to each other. The framework also helps students to understand what qualifications they need to progress towards a higher learning goal, such as a university degree or equivalent higher education award.

What is an ‘endorsed’ course?

An endorsed course is a skills based course which has been checked over and approved by an independent awarding body. Endorsed courses are not regulated so do not result in a qualification - however, the student can usually purchase a certificate showing the awarding body’s logo if they wish. Certain awarding bodies - such as Quality Licence Scheme and TQUK - have developed endorsement schemes as a way to help students select the best skills based courses for them.