Get $1 credit for every $25 spent!

The Learn to Code with React Certification Bundle

Ending In:
Add to Cart - $24.99
Add to Cart ($24.99)
$1,791
98% off
wishlist
Courses
9
Lessons
513
Enrolled
115

What's Included

Introduction To React & Redux: Code Web Apps In JavaScript
$199 Value
Testing React Apps with React Testing Library
$199 Value
Building Modern React Apps (With Redux Toolkit + Typescript)
$199 Value
React Practice Course: Build React App from Scratch
$199 Value
Modern React JS Hooks & Context with Most Recent Edition
$199 Value
React Native & Router: Build Mobile Apps with React and Expo
$199 Value
React JS: Learn React JS from Scratch with Hands-On Projects
$199 Value
React Native: Learn React Native with Hands-On Practices
$199 Value
Redux with React JS: Learn Redux with Modern React JS
$199 Value

Product Details

Access
Lifetime
Content
18.0 hours
Lessons
169

Introduction To React & Redux: Code Web Apps In JavaScript

Create Professional Web Apps Using React & Redux

By Mammoth Interactive | in Online Courses

Used by the likes of Instagram, Facebook, Netflix, and Imgur, React is an efficient and flexible JavaScript library for building user interfaces. Meanwhile, Redux is a predictable state container that helps you manage the data your pages display. Together, these two tools play a key part in building professional, well-functioning apps; and you'll explore mastering them both in this training.

4.0/5 average rating: ★ ★ ★ ★ ★ ★

  • Access 169 lectures & 18 hours of content 24/7
  • Lay out a web app in a logical way
  • Use JSX, a pre-processor that adds XML syntax to JavaScript
  • Build a single-page app using React Router
  • Code in ES6 & JavaScript
  • Use webpack, a bundler for code
  • Transition from webpack 1.0 to webpack 2.0
  • Write modular CSS
  • Use Redux, a predictable state container for JavaScript apps
  • Refactor code (alter code to make it simpler & more efficient)
  • Fix bugs & handle errors
Mammoth Interactive
4.2/5 Instructor Rating: ★ ★ ★ ★ ★ ★
Mammoth Interactive produces XBOX 360, iPhone, iPad, Android, HTML 5, ad-games, and more. It's owned by top-rated instructor John Bura. Mammoth Interactive recently sold a game to Nickelodeon! John has been contracted by many different companies to provide game design, audio, programming, level design, and project management. To this day John has 40 commercial games that he has contributed to. Several of the games he has produced have risen to number 1 in Apple's app store. In his spare time, John likes to play ultimate Frisbee, cycle and work out.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: beginner
  • Have questions on how digital purchases work? Learn more here

Requirements

  • Modern web browser
  • Basic HTML/CSS knowledge

Course Outline

  • Your First Program
  • Introduction
    • Join Our Forum
    • Top 10 Things You Will Learn - 5:19
    • Common Pitfalls and Mistakes - 5:03
    • Quick Wins with React - 5:36
    • Webpack Version Explanation (To Be Watched Before Starting) - 2:26
  • Chapter 1: Introduction to React and JSX
    • 1.1 - Introduction to React and JSX Part 1 - 23:48
    • 1.2 - Introduction to React and JSX Part 2 - 19:40
    • 1.3 - Introduction to React and JSX Part 3 - 2:34
    • 1.4 - Introduction to React and JSX Part 4 - 5:27
    • Source Code 01: Setup
  • Chapter 2: Components
    • 2.1 - Virtual DOM and Classes - 15:43
    • 2.2 - ES6 Webpack Dev Server - 11:19
    • 2.3 - React Components - 7:28
    • 2.4 - React Components (Cont'd) - 9:04
    • 2.5 - React Component Validators - 14:24
    • Source Code 02: Components
  • Chapter 3: States
    • 3.1 - React States Part 1 - 12:02
    • 3.2 - React States Part 2 - 4:39
    • 3.3 - React States Part 3 - 6:01
    • 3.4 - React State Part 4 - 13:13
    • 3.5 - React State Part 5 - 5:06
    • 3.6 - React States "componentWillUnmount" - 6:34
    • 3.7 - React States Webpack Hot Reloading - 4:54
    • Source Code 03: States
  • Chapter 4: Event Handling
    • 4.1 - React Event Handling Part 1 - 12:57
    • 4.2 - React Event Handling Part 2 - 4:26
    • 4.3 - React Event Handling Part 3 - 3:57
    • 4.4 - React Event Handling Part 4 - 12:59
    • 4.5 - React Event Handling Part 5 - 6:54
    • Source Code 04: Event Handling
  • Chapter 5: React Routers
    • 5.1 - React Props.children - 6:01
    • 5.2 - React Router - 12:27
    • 5.3 - React Router Direct URL - 4:19
    • 5.4 - React Router Wildcard - 2:29
    • 5.5 - React Router "Indexroute" - 6:04
    • 5.6 - React Router Profile - 4:10
    • 5.7 - React Router Nested Routes - 6:31
    • 5.8 - React Router User Profile - 7:36
    • 5.9 - React Router Redirects - 7:33
    • 5.10 - React Redirects - 1:36
    • 5.11 - React Router Profile - 6:48
    • 5.12 - React Router Back Button - 3:25
    • 5.13 - React Router Activeclassname - 5:22
    • 5.14 - React Router Active Inline Styles - 2:57
    • 5.15 - React Router Navlinks Components - 10:14
    • Source Code 05: React Routers
  • Chapter 6: Refactoring
    • 6.1 - React Slight Refactoring - 5:25
    • 6.2 - React Slight Refactoring (Cont'd) - 4:57
  • Chapter 7: Products Components
    • 7.1 - React Products Component Part 1 - 9:31
    • 7.2 - React Products Component Part 2 - 4:23
    • 7.3 - React Products Components Part 3 - 7:29
    • 7.4 - React Products Component Part 4 - 7:20
    • 7.5 - React Products Component Part 5 - 6:39
    • 7.6 - React Products Component Part 6 - 8:56
    • Source Code 06 & 07: Refactoring and Product Component
  • Chapter 8: CSS
    • 8.1 - React Basic CSS Framework - 5:12
    • 8.2 - React Basic CSS Framework (Cont'd) - 7:51
    • 8.3 - React CSS Modules - 10:48
    • 8.4 - React CSS Styling Part 1 - 9:01
    • 8.5 - React CSS Styling Part 2 - 8:26
    • 8.6 - React CSS Styling Part 3 - 7:21
    • 8.7 - React CSS Styling Part 4 - 6:59
    • 8.8 - React CSS Stylings Part 5 - 3:33
    • 8.9 - React CSS Styling Part 6 - 4:23
    • 8.10 - React CSS Extract to Separate File - 8:21
    • 8.11 - React CSS Extract to Separate File (Cont'd) - 1:41
    • Source Code 08: CSS
  • Chapter 9: Introduction to Redux
    • 9.1 - Intro to Redux Part 1 - 9:25
    • 9.2 - Intro to Redux Part 2 - 7:57
    • 9.3 - Intro to Redux Part 3 - 7:15
    • 9.4 - Intro to Redux Part 4 - 4:22
    • 9.5 - Redux Store - 8:32
    • 9.6 - Redux Store (Cont'd) - 3:03
    • 9.7 - Redux Store Subscribe - 4:52
    • 9.8 - Redux Store Subscribe (Cont'd) - 3:09
    • 9.9 - Redux Combine Reducers - 9:45
  • Chapter 10: Adding Redux to React
    • 10.1 - Adding Redux To React Part 1 - 27:28
    • 10.2 - Adding Redux To React Part 2 - 3:31
    • 10.3 - Adding Redux to React Part 3 - 10:45
    • 10.4 - Adding Redux to React Part 4 - 10:27
    • 10.5 - Delete Names - 7:40
    • 10.6 - Babel and Spread Operators - 4:46
    • Source Code 09 & 10: Introduction to Redux and Adding Redux to react
  • Chapter 11: Redux Action Creator and Product Refactor
    • 11.1 - Action Creators - 10:23
    • 11.2 - Profile Page - 16:39
    • 11.3 - Dispatch and onEnter - 7:33
    • 11.4 - Refactor into Separate Files - 3:43
    • 11.5 - Refactor into Separate files (Cont'd) - 1:24
    • 11.6 - Product Page - 13:16
    • 11.7 - Product Profile Page - 14:56
    • Source Code 11: Redux Action Creators and Product Refactor
  • Chapter 12: Redux State in createStore
    • 12.1 - Initial State in createStore - 6:34
    • 12.2 - Initial State in createStore (Cont'd) - 3:57
    • 12.3 - Adding Generated Names with Faker - 8:30
    • Source Code 12: Redux State in createStore
  • Chapter 13: Redux Middleware and Async Dispatching
    • 13.1 - Fake Backend and Middleware - 15:06
    • 13.2 - Thunk Middleware - 16:14
    • 13.3 - Thunk Checking State - 6:24
    • 13.4 - Get Profile Part 1 - 8:53
    • 13.5 - Get Profile Part 2 - 4:46
    • 13.6 - Get Profile Part 3 - 4:18
    • 13.7 - Get Profile Part 4 - 3:22
    • 13.8 - Get Names Refactor - 5:47
    • 13.9 - Add Random Name - 6:04
    • 13.10 - Add Random Name (Cont'd) - 4:39
    • Source Code 13: Redux Middleware and Async Dispatching
  • Chapter 14: Redux Refactoring, Logging, and Error Handling
    • 14.1 - Refactor Name Reducers - 6:57
    • 14.2 - Using Actions - 2:44
    • 14.3 - Error Handling Part 1 - 10:11
    • 14.4 - Error Handling Part 2 - 7:04
    • 14.5 - Error Handling Part 3 - 8:59
    • Source Code 14: Redux Refactoring, Logging, and Error Handling
  • Chapter 15: Products Lists and Profiles
    • 15.1 - Product List - 13:24
    • 15.2 - Product List (Cont'd) - 3:04
    • 15.3 - Product Profile - 10:54
    • 15.4 - Product Profile (Cont'd) - 4:05
    • 15.5 - Error Handling Refactor - 4:57
    • 15.6 - Error Handling Refactor (Cont'd) - 3:14
    • Source Code 15: Product Lists and Profiles
  • Chapter 16: Loading Spinner and Error Component
    • 16.1 - Loading Spinner - 9:16
    • 16.2 - Loading Spinner (Cont'd) - 7:14
    • 16.3 - Error Component - 11:24
    • Source Code 16: Loading Spinner and Error Component
  • Chapter 17: Adding User-Written Reviews
    • 17.1 - Adding Reviews Part 1 - 23:01
    • 17.2 - Adding Reviews Part 2 - 11:32
    • 17.3 - Adding Reviews Part 3 - 10:48
    • 17.4 - Adding User Reviews - 19:46
    • 17.5 - Refining Review Containers Part 1 - 3:53
    • 17.6 - Refining Review Containers Part 2 - 3:24
    • 17.7 - Refining Review Containers Part 3 - 6:00
    • Source Code 17: Adding User-Written Reviews
  • Chapter 18: Prototypes and Refactoring Error Handling
    • 18.1 - Adding Prototypes - 28:57
    • 18.2 - Adding Prototypes (Cont'd) - 14:23
    • 18.3 - Action Types - 6:39
    • 18.4 - Refactoring Error Handling - 6:28
    • 18.5 - Refactoring Error Handling (Cont'd) - 1:57
    • Source Code 18: Prototypes and Refactoring Error Handling
  • Chapter 19: Updating to Webpack 2 And Building Production Abundle
    • 19.1 - Migrating to Webpack2 - 7:14
    • 19.2 - Hot Reloading - 5:43
    • 19.3 - Hot Reloading (Cont'd) - 9:31
    • 19.4 - HTML Webpack Plugin - 4:48
    • 19.5 - Simple Production Build - 7:34
    • 19.6 - Dev Config File Update - 3:49
    • Source Code 19: Updating to Webpack 2 And Building Production Abundle
  • Chapter 20: Styling the App
    • 20.1 - Final Style Part 1 - 7:13
    • 20.2 - Final Styling Part 2 - 4:07
    • 20.3 - Final Styling Part 3 - 10:53
    • 20.4 - Final Styling Part 4 - 3:58
    • 20.5 - Final Styling Part 5 - 2:40
    • 20.6 - Styling NavBar - 2:33
    • 20.7 - Styling Product List Part 1 - 6:06
    • 20.8 - Styling Product List Part 2 - 5:18
    • 20.9 - Styling Product List Part 3 - 1:34
    • 20.10 - Styling Product Profile Part 1 - 6:15
    • 20.11 - Styling Product Profile (Cont'd) - 5:06
    • 20.12 - Styling Review - 5:03
    • 20.13 - Styling Review (Cont) - 2:15
    • 20.14 - Styling Continued - 1:58
    • 20.15 - Styling Namelist Part 1 - 3:41
    • 20.16 - Styling Namelist Part 2 - 3:34
    • 20.17 - Styling Namelist Part 3 - 1:44
    • 20.18 - Styling Layout Footer - 5:44
    • 20.19 - Styling Layout footer (Cont'd) - 2:35
    • 20.20 - General Layout Styling - 5:07
    • 20.21 - General Layout Styling (Cont'd) - 1:07
    • 20.22 - Font Work and More Styling - 17:11
    • Source Code 20: Styling the App
  • Chapter 21: Epilogue
    • 21 - Final Thoughts - 2:50
    • Get 155+ courses!

View Full Curriculum

Access
Lifetime
Content
2.0 hours
Lessons
23

Testing React Apps with React Testing Library

Test React components with React Testing Library, The Recommended Library From Facebook for Testing

By David Armendariz | in Online Courses

This course shows you all the fundamental tools to test any React component and have that coverage at 100%! You will learn a lot of things including the principles of Test Driven Development, what React Testing Library (RTL) is, and its differences with Enzyme. You'll also learn how Create React App (CRA) works and how Jest works with RTL. This course packs 23 lectures to help expand your knowledge on RTL.

4.3/5 average rating: ★ ★ ★ ★ ★ ★

  • Access 23 lectures & 2 hours of content 24/7
  • Learn the principles of Test Driven Development
  • Know what is React Testing Library (RTL) & its differences with Enzyme (another popular test framework for React)
  • Understand how Create React App (CRA) works
  • Understand how Jest works with RTL
  • Test with RTL & query elements with getBy, queryBy, findBy, getAllBy, queryAllBy, findAllBy
  • Simulate user interaction with the fireEvent API
  • Simulate user interaction with the userEvent API
  • Test components in isolation (unit tests)
  • Learn about coverage & debugging
  • Mock 3rd party libraries like Axios & mock a GET request
  • Learn about the pitfalls of CRA
David Armendáriz | Mathematician & Software Developer
4.3/5 Instructor Rating: ★ ★ ★ ★ ★ ★
David Armendáriz studied mathematics at USFQ (Universidad San Francisco de Quito). However, he loves coding and that's why he transitioned to the software industry. He loves to share his knowledge here in various online learning platforms and in YouTube.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: intermediate
  • Have questions on how digital purchases work? Learn more here

Requirements

  • Be famliarized with React components

Course Outline

  • Introduction
    • Introduction to TDD - 9:23
    • Introduction to RTL - 4:01
  • Create React App
    • The repo for this course
    • CRA behind the scenes - 8:49
  • Jest
    • Understanding Jest - 4:46
    • Writing our first test - 11:22
  • React Testing Library
    • A little mistake I made!
    • Rendering a component with RTL - 12:54
    • Selecting elements with getByText - 7:01
    • Selecting elements with getByRole - 7:53
    • queryBy search variant - 6:23
    • findBy search variant (part 1) - 7:00
    • findBy search variant (part 2) - 10:11
    • findBy search variant (part 3) - 6:42
    • Querying multiple elements - 6:15
    • User interaction with the fireEvent function - 7:31
    • User interaction with the user event API - 2:52
    • Testing a component in isolation with the user event API - 8:13
  • Coverage and debugging
    • Coverage - 7:12
    • Debugging - 4:28
  • A more complex example
    • Creating a Pokemon component - 10:42
    • Testing the Pokemon component - 10:45
  • More custom matchers
    • Jest DOM library from RTL - 1:41

View Full Curriculum

Access
Lifetime
Content
4.0 hours
Lessons
57

Building Modern React Apps (With Redux Toolkit + Typescript)

Learn How to Build Simple Yet Complex Apps & Transfer That Knowledge to Real-World Application

By David Armendariz | in Online Courses

In this course, you will learn how to build a simple yet complex app (a code editor in the browser inspired in VS Code using the Monaco Editor). You will learn a lot of things from such a simple project. This course covers React with Typescript, best practices, Redux, and more. At the end of this course, you will be able to transfer all the knowledge you will get to a real-world application. You can also take this project as a portfolio project. It contains lots of things that you would use in a big React application.

4.2/5 average rating: ★ ★ ★ ★ ★ ★

  • Access 57 lectures & 4 hours of content 24/7
  • Use React Hooks & use it with Typescript
  • Configure Prettier for formatting your projects
  • Centralize environment variables & theme configuration
  • Dispatch actions, use selectors, & more
  • Create asynchronous & synchronous thunks, slices, etc
  • Configure an SPA with Auth0 & use its hooks
  • Protect routes with React Router Dom & Auth0
  • Implement dark mode with the help of MUI
David Armendáriz | Mathematician & Software Developer
4.3/5 Instructor Rating: ★ ★ ★ ★ ★ ★
David Armendáriz studied mathematics at USFQ (Universidad San Francisco de Quito). However, he loves coding and that's why he transitioned to the software industry. He loves to share his knowledge here in various online learning platforms and in YouTube.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: intermediate
  • Have questions on how digital purchases work? Learn more here

Requirements

  • Basic knowledge of React and JavaScript

Course Outline

  • Introduction
    • Introduction - 1:05
    • Defining the Code Editor App requirements - 3:03
    • Installing Node.js - 8:19
    • Creating the Auth0 account - 2:35
    • Installing Docker and Docker Compose - 3:33
    • The repo for this course
  • Setting up the project
    • Creating the project - 3:18
    • Configuring Prettier for formatting - 3:50
    • Dependencies
    • Adding the necessary dependencies - 2:23
    • Dockerizing the app - 7:34
    • Configuring Auth0 - 4:30
    • Setting up environment variables - 6:08
  • Writing our first components
    • Creating the AuthProvider component - 5:50
    • Creating a common Loading component - 2:23
  • Redux
    • Creating the dark mode slice - 3:54
    • Adding tests for the dark mode reducer - 3:53
    • Configuring Redux Persist - 4:13
    • Configuring the store - 5:15
    • Creating the ReduxProvider component - 2:20
    • Creating typed hooks - 1:46
  • Dealing with the theme
    • Configuring the app colors - 3:25
    • Creating the custom theme provider component - 5:29
  • Authentication components
    • Creating protected routes with Auth0 - 2:47
    • A little bug!
    • Creating the Routes component - 6:50
    • Creating the Header component - 6:28
    • Creating the SignIn component - 3:06
    • Creating the SignOut component - 1:17
    • Authenticated and unauthenticated components - 2:43
    • Testing the authentication - 2:30
  • Home page
    • Creating the home page component - 6:46
    • Testing the home page with React Testing Library - 3:04
  • File Viewer
    • Defining the Custom File and File Viewer Types - 5:03
    • Creating the files reducer - 4:24
    • Adding the files reducer business logic - 6:11
    • Testing the files reducer (part 1) - 9:44
    • Testing the files reducer (part 2) - 3:20
    • Changing the store folder structure - 1:59
    • Make sure to update your imports
    • Creating the selectActiveFiles selector - 6:58
    • Creating the Open Workspace button - 6:50
    • Reading files (part 1) - 10:00
    • Reading files (part 2) - 6:03
    • Creating an extension icon reusable component - 3:21
    • Tests for the selectFileViewerData selector - 6:21
    • Creating the selectFileViewerData selector - 10:13
    • Creating the file viewer component - 7:05
    • Creating the open file thunk - 7:16
  • The Code Editor
    • Creating the Code Editor Page - 5:40
    • Creating the Code Editor Container - 10:49
    • Creating the Custom Tab Panel - 4:47
    • Creating the onTabClick handler - 1:54
    • Creating the Custom Tab Label component - 6:47
    • Creating the Close File thunk - 8:59
    • Creating the Custom Monaco Editor and finishing - 8:13
  • Conclusion
    • Conclusion - 1:12

View Full Curriculum

Access
Lifetime
Content
4.0 hours
Lessons
44

React Practice Course: Build React App from Scratch

Deliver a High-Quality Product with Unit Tests & Storybook Stories for All Major Components

By Maksym Rudnyi | in Online Courses

React is the most popular Javascript library of the last five years, and the job market is still hotter than ever. Companies large and small can't hire engineers who understand React fast enough, and salaries for engineers are at an all-time high. It's a great time to learn to React! In this course, you'll do React practice. You'll deliver a high-quality product with unit tests (UT) and Storybook stories for all major components. These practices are a "must-have" for developers.

4.1/5 average rating: ★ ★ ★ ★ ★ ★

  • Access 44 lectures & 4 hours of content 24/7
  • Create React application
  • Develop independent components with Storybook
  • Create unit tests for components & hooks
Maksym Rudnyi | Senior Software Engineer
4.1/5 Instructor Rating: ★ ★ ★ ★ ★ ★
Maksym Rudnyi is a Senior Software Engineer with more than 8 years of production experience in web development, both in frontend and backend technologies. He offers courses in web development (front-end and back-end) and specifically JavaScript. Use this knowledge to improve yourself as a professional developer.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: intermediate
  • Have questions on how digital purchases work? Learn more here

Requirements

  • JavaScript + HTML + CSS fundamentals are absolutely required
  • Basic React knowledge
  • ES6+ JavaScript knowledge at beginning level

Course Outline

  • React practice intro
    • 1 React practice intro - 4:44
    • 2 What do we need to start - 3:28
  • App Development
    • 3 Installing ReactJS - 2:54
    • 4 Setting up React development app environment - 5:00
    • 5 Configuring Git and GitHub - 2:38
    • 6 React AutoComplete installation - 4:19
    • 7 Fetching data with REST from Wikipedia - 10:57
    • 8 useSearch custom hook with Axios - 7:44
    • 9 Cancelling Axios calls - 9:29
    • 10 useDebounce custom hook - 7:05
    • 11 Custom Input component - 9:33
    • 12 useSearchForm custom hook - 7:26
    • 13 useCallback hook - 2:21
    • 14 React render props pattern - 8:42
    • 15 Configuring SCSS - 3:12
    • 16 Routing with react-router-dom - 4:40
    • 17 Adding app pages - 5:25
    • 18 Home page - 9:26
    • 19 Search page - 10:17
  • Storybook configuration
    • 20 Installing Storybook - 2:13
    • 21 Storybook configuration - 2:57
    • 22 Fixing possible issues with Storybook - 2:12
    • 23 Storybook interface overview - 6:12
    • 24 The first story with Storybook - 2:44
    • 25 ListItem story - 8:23
    • 26 Search result page story - 4:39
    • 27 Installing moxios to configure mocks - 6:25
    • 28 Storybook documentation with mdx - 4:33
  • Unit tests
    • 29 Unit tests intro with Jest - 1:56
    • 30 Unit tests convention - 5:50
    • 31 Input component unit test - 6:52
    • 32 Enzyme installation - 8:20
    • 33 Coverage reporting - 8:27
    • 34 Autocomplete unit tests - 13:13
    • 35 Container component unit test - 12:16
    • 36 useSearchForm hook unit test - 7:00
    • 37 useDebounce hook unit test - 7:22
    • 38 useSearch hook unit test - 11:50
    • 39 App unit test - 7:43
    • 40 Unit tests summary - 4:28
  • Best practices of React app development
    • 41 React PropTypes - 3:40
    • 42 React DefaultProps - 3:09
  • Bonus
    • Installing NodeJS on Windows - 4:51
    • Installing Yarn on Windows - 3:11

View Full Curriculum

Access
Lifetime
Content
3.0 hours
Lessons
26

Modern React JS Hooks & Context with Most Recent Edition

Dive in React & Learn ReactJS, Hooks from Scratch!

By Oak Academy | in Online Courses

Do you want to learn React JS but have no experience at all. ThisReact JS Hooks and Context course is the perfect place for you to start. In this course, we designed React JS course to give you everything you need to become productive with Hooks and Context. This course will take you through what you need to know to master web development using ReactJS by providing powerful knowledge through a mixture of diagrams and the creation of a simple application. This course is made 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 ReactJS.

4.4/5 average rating: ★ ★ ★ ★ ★ ★

  • Access 26 lectures & 3 hours of content 24/7
  • Creating Context with Class Component
  • Access Context with Consumer
  • Access Context with Context Type
  • Manipulate the data in Context
  • Explore useState, useEffect, useReducer, & useContext Hooks
  • Learn Reducer, Action & Dispatch concepts
  • Learn much more about React Hooks
Oak Academy | Long Live Tech Knowledge
4.4/5 Instructor Rating: ★ ★ ★ ★ ★ ★
Oak Academy is a group of tech experts who have been in the sector for years and years. Deeply rooted in the tech world, they know that the tech industry's biggest problem is the "tech skills gap" and their online course are their solution. They specialize in critical areas like cybersecurity, coding, IT, game development, app monetization, and mobile. Thanks to their practical alignment, they are able to constantly translate industry insights into the most in-demand and up-to-date courses.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: intermediate
  • Have questions on how digital purchases work? Learn more here

Requirements

  • Basic level HTML, CSS, Javascript
  • React Js at basic level

Course Outline

  • What We Will Learn in React Js Hooks and Context Course?
    • What We Will Learn - 3:27
  • Let's meet Hooks and Context
    • Context and Hooks - 3:23
  • Create Application
    • Let's Start Building Application - 11:29
    • Why Context API - 6:40
    • Context Provider - 8:05
    • Context Provider-2 - 6:05
    • Lets Reach Out The Context State - 10:19
    • Consuming Data in TodoList Component - 5:29
    • Context Consumer - 7:21
    • Update The Context Data - 7:04
  • Multiple Context Usage
    • Create Multiple Context - 9:25
    • Use Multiple Context Inside One Component - 8:59
  • Introduction to React Hooks
    • Hooks - 4:00
  • Create Application
    • Let's Start Creating The App - 3:50
    • UseState Hook - 13:24
    • UseState With Forms - 13:26
    • useEffect hook - 9:35
    • useContext hook - 8:49
    • Create multiple context with useContext - 5:50
    • Create context with functional component - 5:43
  • Hooks & Context
    • Hooks and Context - 10:21
    • Let's add new todo with Hooks and Context - 14:26
    • Let's remove todo from context - 9:22
  • Get to Know the UseReducer Hook
    • useReducer hook - 6:11
    • Let's implement useReducer - 13:11
    • Reducer component structure - 5:00

View Full Curriculum

Access
Lifetime
Content
7.0 hours
Lessons
58

React Native & Router: Build Mobile Apps with React and Expo

Create Your Own Mobile App Both with React-Native-Cli & Expo-Cli

By Oak Academy | in Online Courses

React-Native is a library developed by the React team, and it is widely used to create mobile applications for both Android and IOS. It combines the native developers to create mobile apps with React, which is one of the best JavaScript libraries to create a user interface. In this course, you're gonna learn what dependencies you need to install and how in detail, to be able to create mobile apps on both Mac and Windows. You will use free tools and platforms, so you don't have to buy any tool or app. You will 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.

4.5/5 average rating: ★ ★ ★ ★ ★ ★

  • Access 58 lectures & 7 hours of content 24/7
  • Learn the basics of React, React-Native, React-Navigation libraries
  • Send an HTTP request from a mobile application
  • Use the flex-box system
  • Create reusable components
  • Reach another app on the device from your app
  • See different screens on the app
Oak Academy | Long Live Tech Knowledge
4.4/5 Instructor Rating: ★ ★ ★ ★ ★ ★
Oak Academy is a group of tech experts who have been in the sector for years and years. Deeply rooted in the tech world, they know that the tech industry's biggest problem is the "tech skills gap" and their online course are their solution. They specialize in critical areas like cybersecurity, coding, IT, game development, app monetization, and mobile. Thanks to their practical alignment, they are able to constantly translate industry insights into the most in-demand and up-to-date courses.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: intermediate
  • Have questions on how digital purchases work? Learn more here

Requirements

  • JavaScript + HTML + CSS fundamentals are absolutely required but you don't need to be an expert
  • Basic ES6 knowledge would be beneficial but not required

Course Outline

  • We Welcome You To React Native Router Course
    • How to Progress in In This React Native Router Course - 4:51
    • How To Get Help? - 1:43
  • Set Up For Windows
    • Tools We Need for React Native CLI - 7:25
    • React Native Windows Setup - 5:33
    • How to Start Emulator In Android Studio - 15:34
  • Set Up For OSX
    • Tools We Need For Installation React Native on OSX - 4:46
    • React Native OSX Setup - 4:45
    • Start the Emulator - 3:12
  • React Native and Expo
    • React Native on Mobile Device - 2:18
    • Expo CLI Project - 6:45
  • React Native and JSX
    • How To Create An App - 2:50
    • See Content on Emulator - 3:52
    • Why Do We Need React and React Native? - 3:50
    • Es6 Syntax ( Let,Const, Var ) - 5:34
    • First Component - 8:40
    • How To Show Component on Device - 10:26
    • How to Build Our First App - 6:46
    • How To Connect A Component To The Root Component - 12:08
    • Import A Component To Another Component - 8:57
  • Styling For React Native
    • Styling With JSX - 13:44
    • Displaying Of Views - 10:44
    • Header Component’s Styling - 4:17
    • React Props - 7:55
    • How To Reuse Code With Props System - 8:30
  • API Request With React Native
    • How To Show a List To The User - 6:58
    • The List Component - 8:34
    • Func Component vs Class Based Component - 10:43
  • LifeCycle Methods
    • When Do We Need Lifecycle Methods? - 9:58
    • LifeCycle Methods - 8:12
    • Making Request With Axios - 9:55
  • State in React Native
    • What Is State And How To Initial State - 8:44
    • Using of State - 11:06
    • A Component’s Lifecycle With State - 4:57
    • List Component - 8:23
    • List Item Component - 10:13
    • Reusable Components - 6:28
    • Styled Component for ListItems - 5:19
    • Usage of Props.children - 5:46
    • ItemSection - 9:17
  • Layout With Flexbox
    • Intro to the Flexbox - 6:46
    • Section Header Component - 6:04
    • How To Show An Image - 12:46
    • Scrollable Content - 5:22
    • User Interaction with React Native - 9:44
    • Event Handlers - 13:13
    • How To Open Another App (Browser) - 4:42
  • Router Expo CLI Project
    • Router Expo CLI Project - 2:49
    • See The Content On A Device or Emulator - 5:12
    • What Is Router And Installation - 4:37
  • Flatlist
    • Flatlist - 6:12
    • Rendering A List With FlatList - 8:08
    • How Does FlatList Work - 6:20
    • Giving the Key Prop - 8:42
    • FlatList Props - 7:23
  • Route Different Screens
    • Book Detail Screen
    • Navigate Between Screens - 12:12
    • Data Transfer Between Screens - 7:12
  • Final Words
    • What We Learned In this React Native Router Course - 5:28

View Full Curriculum

Access
Lifetime
Content
7.0 hours
Lessons
67

React JS: Learn React JS from Scratch with Hands-On Projects

Start Learning from Scratch, Dive in React JS & Become a React Developer

By Oak Academy | in Online Courses

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 JS. With 67 lectures, this course will take you through everything you need to know to master web development using ReactJS by providing powerful knowledge through a mixture of diagrams and the creation of a simple application.

4.6/5 average rating: ★ ★ ★ ★ ★ ★

  • Access 67 lectures & 7 hours of content 24/7
  • Build single page applications with React JS
  • Create reusable React Components
  • Learn components, props, states, & component life cycle methods in React JS
  • Know how to connect to an external API
Oak Academy | Long Live Tech Knowledge
4.4/5 Instructor Rating: ★ ★ ★ ★ ★ ★
Oak Academy is a group of tech experts who have been in the sector for years and years. Deeply rooted in the tech world, they know that the tech industry's biggest problem is the "tech skills gap" and their online course are their solution. They specialize in critical areas like cybersecurity, coding, IT, game development, app monetization, and mobile. Thanks to their practical alignment, they are able to constantly translate industry insights into the most in-demand and up-to-date courses.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: intermediate
  • Have questions on how digital purchases work? Learn more here

Requirements

  • JavaScript + HTML + CSS fundamentals are absolutely required but you don’t need to be an expert
  • ES6 knowledge would be beneficial but not required

Course Outline

  • What We Will Learn?
    • 1 - What You Will Learn and How to Get Help? - 1:22
  • Let`s Start to Learn React JS
    • 2 - Your First App Overview - 11:06
    • 3 - Frequently Asked Questions - 9:18
    • 4 - Let, Const and Var in 3 minutes - 3:53
    • 5 - Install Node JS - 5:26
    • 6 - Create Your React App - 5:35
    • 7 - Why You Will Need To Create a React App? - 6:27
    • 8 - Start Creating React App - 6:24
    • 9 - Do You Want to Learn How To Stop React App? - 5:17
    • 10 - Important Functional Components - 15:05
  • What is this JSX?
    • 11 - Converting HTML JSX - 6:02
    • 12 - Inline Styling with JSX in React JS - 10:53
    • 13 - JavaScript Variable in JSX - 12:43
  • React with Props
    • 14 - Three Tenets of Components - 3:34
    • 15 - Simple App with React - 2:55
    • 16 - Styling App with Semantic UI - 8:34
    • 17 - Building Component - 3:57
    • 18 - Specifying The Image in React JS - 3:19
    • 19 - Duplicating The Single Component - 1:58
    • 20 - Component Nesting - 12:06
    • 21 - Props System - 4:10
    • 22 - Passing Props to Child - 13:02
    • 23 - Reusable Component Overview - 2:46
    • 24 - Props Children - 12:42
  • Class-Based Components
    • 25 - Class-Based Components and Functional Component - 5:48
    • 26 - New App Overview - 8:42
    • 27 - Getting Users Physical Location - 7:57
    • 28 - Handling Async Operation in React - 3:35
    • 29 - Transformation Functional Component to Class Based Component - 4:53
  • State in React
    • 30 - State Rules - 4:19
    • 31 - Initializing State In Constructor - 13:48
    • 32 - Lifecycle Method Overview - 12:25
    • 33 - Conditional Rendering - 5:18
  • Lifecycle Methods
    • 34 - Get to Know Lifecycle Method - 13:26
    • 35 - Refactoring App with Lifecycle Method - 3:08
    • 36 - Passing State As Props - 4:27
    • 37 - Ternary Expressions in JSX - 5:48
    • 38 - Showing Picture - 6:33
    • 39 - Styling The App - 10:11
    • 40 - Free React Developer Tools - 3:48
    • 41 - General App Review - 7:23
  • User Inputs, Forms and Events in React JS
    • 42 - App Overview - 2:43
    • 43 - Component Design - 3:03
    • 44 - Handling Forms - 8:31
    • 45 - Styling The App - 3:22
    • 46 - Creating Event Handlers - 6:15
    • 47 - Controlled vs Uncontrolled Elements - 4:33
    • 48 - Why Controlled Elements? - 7:39
    • 49 - Understanding ‘this’ Key Word In JS - 10:18
    • 50 - Communicating Child to Parent - 3:02
    • 51 - Invoking Callbacks In Children - 4:54
  • API Request with React
    • 52 - Fetching Data - 3:50
    • 53 - Axios vs Fetch - 3:49
    • 54 - Async Await Function - 10:06
    • 55 - Setting The State - 6:08
    • 56 - Rendering A List of Components - 5:15
    • 57 - Implementing The Key Values In List - 4:35
    • 58 - What We Have Learned From The App? - 4:04
  • Navigation with React Router
    • 59 - Initializing The Project - 3:13
    • 60 - The React Router - 21:09
    • 61 - Link and Nav Links - 6:05
    • 62 - Programmatic Redirects - 7:20
    • 63 - Route Parameters - 15:07
    • 64 - React Router Switch Tag - 3:53
  • React Portals
    • 65 - How To Create A Modal? - 8:49
    • 66 - Why React Portals? - 7:38
    • 67 - Creating a React Portals - 6:53

View Full Curriculum

Access
Lifetime
Content
5.0 hours
Lessons
45

React Native: Learn React Native with Hands-On Practices

Dive Deeper Into React Native & Use It to Build iOS and Android Apps

By Oak Academy | in Online Courses

React-Native is a library developed by the React team, and it is widely used to create mobile applications for Android and IOS. React and JavaScript is all you need to create awesome mobile apps that work on Android and iOS. This course is for beginners...and it will take you from beginner to advance level. You will learn to React development step-by-step with hands-on demonstrations.

4.8/5 average rating: ★ ★ ★ ★ ★ ★

  • Access 45 lectures & 5 hours of content 24/7
  • Understand the basics of React and React-Native libraries
  • Send an HTTP request from a mobile application
  • Use the flex-box system
  • Create reusable components
  • Finally create your own mobile app
Oak Academy | Long Live Tech Knowledge
4.4/5 Instructor Rating: ★ ★ ★ ★ ★ ★
Oak Academy is a group of tech experts who have been in the sector for years and years. Deeply rooted in the tech world, they know that the tech industry's biggest problem is the "tech skills gap" and their online course are their solution. They specialize in critical areas like cybersecurity, coding, IT, game development, app monetization, and mobile. Thanks to their practical alignment, they are able to constantly translate industry insights into the most in-demand and up-to-date courses.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: intermediate
  • Have questions on how digital purchases work? Learn more here

Requirements

  • JavaScript + HTML + CSS fundamentals are absolutely required but you don't need to be an expert
  • Basic ES6 knowledge would be beneficial but not required

Course Outline

  • Introduction to the React Native Course
    • 1 - What We Will Learn? - 2:18
    • 2 - How To Get Help? - 1:43
  • Setup For Windows
    • 3 - Free Tools - 7:25
    • 4 - Windows Setup for React Native - 5:33
    • 5 - How To Start Emulator in Android Studio - 15:34
  • Setup For OSX
    • 6 - Free Tools - 4:46
    • 7 - OSX Setup for React Native - 4:45
    • 8 - Start The Emulator - 3:12
  • React Native and JSX
    • 9 - How To Create An App - 2:50
    • 10 - See Content On Emulator - 3:52
    • 11 - Why Do We Need React and React-Native? - 3:50
    • 12 - Es6 Syntax ( Let, Const, Var) - 5:34
    • 13 - First Component - 8:40
    • 14 - How To Show Component On Device - 10:26
    • 15 - How to Build Our First App - 6:46
    • 16 - How to Connect a Component To The Root Component - 12:08
    • 17 - Import a Component to Another Component - 8:57
  • Styling For React Native
    • 18 - Styling with JSX - 13:44
    • 19 - Displaying Views - 10:44
    • 20 - Header Component’s Styling - 4:17
    • 21 - React Props - 7:55
    • 22 - How to Reuse Code With Props System - 8:30
  • API Request With React Native
    • 23 - How To Show a List To The User - 6:58
    • 24 - The List Component - 8:34
    • 25 - Func Component vs Class Based Component - 10:43
  • Lifecycle Methods
    • 26 - When Do We Need Lifecycle Methods? - 9:58
    • 27 - Lifecycle Methods - 8:12
    • 28 - Making Request With Axios - 9:55
  • State In React Native
    • 29 - What Is State and How To Initial State? - 8:44
    • 30 - Using of State - 11:06
    • 31 - A Component’s Lifecycle With State - 4:57
    • 32 - List Component - 8:23
    • 33 - List Item Component - 10:13
    • 34 - Reusable Components - 6:28
    • 35 - Styled Component for List Items - 5:19
    • 36 - Usage of Props.Children - 5:46
    • 37 - Item Section - 9:17
  • Layout With Flexbox
    • 38 - Introduction to the Flexbox - 6:46
    • 39 - Section Header Component - 6:04
    • 40 - How to Show An Image - 12:46
    • 41 - Scrollable Content - 5:22
    • 42 - User Interaction with ReactNative - 9:44
    • 43 - Event Handlers - 13:13
    • 45 - What We Learned From App - 5:01
    • 44 - How to Open Another App (Browser) - 4:42

View Full Curriculum

Access
Lifetime
Content
3.0 hours
Lessons
24

Redux with React JS: Learn Redux with Modern React JS

Master Redux, React Router & Portals

By Oak Academy | in Online Courses

This course will take you through everything you need to know about Redux. You will find the most simple and easiest form of React-Router, React-Portal, and Redux. With 24 lectures, this class explains the theoretical knowledge about Redux on the ‘code pen’ tool, before proceeding to React. This course will take you from a beginner to a more advanced level with hands-on examples.

4.8/5 average rating: ★ ★ ★ ★ ★ ★

  • Access 24 lectures & 5 hours of content 24/7
  • Learn the most popular React-Router, React-Portal &Redux libraries used w/ React JS
  • Create modals w/ React Portals
  • Easily access the data we hold globally from our components
  • Create multi-page web applications with React-Router
Oak Academy | Long Live Tech Knowledge
4.4/5 Instructor Rating: ★ ★ ★ ★ ★ ★
Oak Academy is a group of tech experts who have been in the sector for years and years. Deeply rooted in the tech world, they know that the tech industry's biggest problem is the "tech skills gap" and their online course are their solution. They specialize in critical areas like cybersecurity, coding, IT, game development, app monetization, and mobile. Thanks to their practical alignment, they are able to constantly translate industry insights into the most in-demand and up-to-date courses.

Important Details

  • Length of time users can access this course: lifetime
  • Access options: desktop & mobile
  • Redemption deadline: redeem your code within 30 days of purchase
  • Experience level required: intermediate
  • Have questions on how digital purchases work? Learn more here

Requirements

  • Basic knowledge of HTML, CSS, JavaScript and React JS

Course Outline

  • Redux with React
    • 1 -What You Will Learn in This Redux with React Course? - 1:57
  • React Router
    • 2 - Intro to React Router - 3:04
    • 3 - React Router - 21:09
    • 4 - Link and Navlink - 6:05
    • 5 - Programmatic Redirects - 7:20
    • 6 - Route Parameters - 15:07
    • 7 - React Router Switch Tag - 3:53
    • 8 - React Portals - 8:49
    • 9 - Why React Portals? - 7:38
    • 10 - Creating Modal with React Portals - 6:53
  • Redux
    • 11 - Let`s Meet with Redux - 10:20
    • 12 - Redux Stores - 7:48
    • 13 - Redux Actions - 6:25
    • 14 - Redux Reducers - 4:05
    • 15 - Store Subscriptions - 8:51
    • 17 - Mapping State to Props - 13:16
    • 16 - Setting up Redux - 9:08
    • 18 - Card Page - 8:30
    • 19 - Map Dispatch to Props - 10:06
    • 20 - Map Dispatch to Props 2 - 7:36
    • 21 - Action Creators - 4:44
    • 22 - Redux Thunk Theory - 6:52
    • 23 - Redux Thunk - 13:23
  • The End
    • 24 - Final Words For Redux with React - 3:13

View Full Curriculum

Terms

  • Unredeemed licenses can be returned for store credit within 30 days of purchase. Once your license is redeemed, all sales are final.
See More Reviews