React For Beginners From Html Css & Javascript To React Js

React For Beginners – From Html Css & Javascript To React.Js
Published 7/2023
MP4 | Video: h264, 1280×720 | Audio: AAC, 44.1 KHz

What you’ll learn

React Fundamentals: learn the basic concepts of React, including components, JSX (JavaScript XML), state, props, and the component lifecycle

Component-based Architecture: React is based on a component-based architecture, and students will learn how to design and create reusable components.

React Router: a library that enables navigation and routing in React applications. Set up routes, handle URL parameters, and create nested routes.

Hooks: React Hooks revolutionized how developers write React components. Students will learn about different hooks, such as useState, useEffect, useContext, etc

Forms and User Input: learn how to handle form submission, validation, and user input using React.

Asynchronous Data Fetching: learn data fetching data from APIs. learn techniques to handle asynchronous operations using features like the fetch API & axios.

Deployment and Build Processes

Requirements

Basic HTML CSS and JavaScript

Description

Overview

Section 1: Introduction

Lecture 1 Welcome to the course

Lecture 2 What is React & why learn it ?

Lecture 3 React DEMO

Lecture 4 What you need to know before React

Lecture 5 Environmental Setup for React JS

Lecture 6 Links & Resources

Section 2: React Basics

Lecture 7 Section overview

Lecture 8 Traditional HTML CSS & JS Website

Lecture 9 Adding React to your website

Lecture 10 Render a react component

Lecture 11 What is JSX

Lecture 13 Functions and Events in JSX

Lecture 14 Using Images

Section 3: Create React App

Lecture 15 Section overview

Lecture 16 How to create a React Application

Lecture 17 React Structure explained

Section 4: How to use Style in React

Lecture 19 Section overview

Lecture 20 Using the style attribute in React

Lecture 21 Using CSS in React

Section 5: React Components and Props

Lecture 22 Section overview

Lecture 23 What are Components and how to create a react components

Lecture 24 What are Props

Lecture 25 Children Prop

Lecture 26 Create a reusable Card Component

Lecture 27 Using Icons in React

Lecture 28 Using Bootstrap in React

Lecture 29 Create a Button Component

Lecture 30 Function props aka event handlers

Section 6: Project: E-Learning Platform

Lecture 31 Section overview

Lecture 32 Create the App

Lecture 33 Create a Title Component

Lecture 34 Header Component with child props

Lecture 35 Button component with click event handlers

Section 7: React State and useState Hook

Lecture 36 Section overview

Lecture 37 What is State and how to useState in React

Lecture 38 Example with useState Hook

Lecture 39 Create a Modal Comp and apply useState

Lecture 40 Extend components and state

Lecture 41 Using List in React

Lecture 42 useState on Lists

Section 8: Working with DATA and the React useEffect Hook

Lecture 43 Section overview

Lecture 44 Create a Testimonial component

Lecture 45 Working with JSON data

Lecture 46 What is useEffect and how to use it

Lecture 47 Dependency Array of useEffect

Lecture 48 Update testimonials with useEffect

Lecture 49 Add Star rating with useState and map

Section 9: Element Reference with React useRef Hook

Lecture 50 Section overview

Lecture 51 What is useRef and how to use it

Lecture 52 Page navigation with useRef

Lecture 53 Scroll Back To Top Button with useRef

Section 10: Forms submissions in React

Lecture 54 Section overview

Lecture 55 Forms label and inputs

Lecture 56 Form group component

Lecture 57 Input values and changing values

Lecture 58 Referencing inputs with useRef

Lecture 59 Form submission and reset

Lecture 60 Simple Login and Form validation

Lecture 61 Create a Registration Form Component

Lecture 62 Simple Form registration

Section 11: Error handling in React

Lecture 63 Section overview

Lecture 64 Throw error using try catch

Lecture 65 Waiting for server response

Lecture 66 Error by data fetching

Lecture 67 Custom Error Boundaries Component

Section 12: Refactoring React App

Lecture 68 Section overview

Lecture 69 Why should you refactor your code

Lecture 70 Refactoring the Header Component

Lecture 71 Refactored the Categories Section

Lecture 72 Refactored the Offers Section

Section 13: Navigating with React Router

Lecture 73 Section overview

Lecture 74 What is React Router

Lecture 75 How to install and adding a Router

Lecture 76 Create the Root Route

Lecture 77 Handling Not Found Errors

Lecture 78 Creating Routes

Lecture 79 Nested Routes, children and Outlet

Lecture 80 Client side Routing

Lecture 81 Active Link Styling

Lecture 82 The index Route

Lecture 83 Resources

Section 14: App Data Sharing with React useContext

Lecture 84 Section overview

Lecture 85 The Problem with Prop drilling

Lecture 86 What is useContext and why use it

Lecture 87 React useContext Hook example

Lecture 88 Create a Dark Theme

Lecture 89 Toggle Dark Theme

Lecture 90 Change Arrow Icon on Dark Theme

Lecture 91 Toggle Categories on Dark Theme

Lecture 92 Toggle Offers on Dark Theme

Section 15: React Styled Components

Lecture 93 Section overview of React Styled Components

Lecture 94 About React Styled Components

Lecture 95 Pros and cons of React Styled Components

Lecture 96 React Styled Components example

Lecture 97 Create a ModalStyle Component

Section 16: Project – Employee Payroll App

Lecture 98 Project overview

Lecture 99 Project setup

Lecture 100 Creating project components

Lecture 101 App Routing / Navigation system

Lecture 102 App Root, Index and Error page

Lecture 103 App Navigation with routs

Lecture 104 Page wrapper styled component

Lecture 105 App Contact form

Lecture 106 Contact form validation

Lecture 107 Contact form Successful submission

Lecture 108 Home page component

Lecture 109 Create a Login form component

Lecture 110 Login with useContext

Lecture 111 Display Personal and Logouton Authentication

Lecture 112 Login validation with styled component and context

Lecture 113 Create a Personal List component

Lecture 114 Personal Data and Storage

Lecture 115 Add Search functionality

Lecture 116 Display Personal Detail

Lecture 117 Source Code