React Js Basic To Advance (Learn By Doing)

React js course with best explanations

What you'll learn

You will know everything about reat js

You will learn how to build and optimize web applications

You will be able to build complex web applications

Deployment to server

Requirements

Html

css

java script

Description

About This ClassWelcome to React for Beginners, a course designed to teach React.js to web developers, even if they have never written any React.js code before.No one will be left behind in this session as we begin from the very beginning!Because React combines HTML and JavaScript, it may seem awkward to write at first, but I'll show you how to remember when to write JavaScript and when to write HTML (or what's known as JSX).React syntax, importing from other files, components, dividing components into new files and importing them, extending components, component properties and state, click events, and how to incorporate an API request when a button is hit will all be covered in this lesson.If that seemed complex and intimidating, don't worry; I'll show you all you need to know about React.js so you can start using it right now.Why learn React.js:You can create crazily dynamic and responsive webpages and applications with the JavaScript framework React. Your JavaScript might want to do some kind of action when a user types or clicks on something. That is simpler to write and maintain thanks to react. Additionally, it may be extended, allowing you to create a small amount of code once and reuse it across the board to avoid having to write code all day.In addition, React is a skill that is in high demand. React is used by many startups, large corporations, and development firms. It allows them to build incredible user interfaces like the Netflix movie collection.Vanilla JavaScript can be used to construct anything that can be built in React, however React makes it simple to maintain and easy toWho uses React.js:Nowadays, almost everyone uses React. Whether it's a full website like Netflix or just a small section of one with intricate logic. Nowadays, React is written by pretty much everyone and their pets. And for that reason, learning is crucial.About the teacher:I'm your teacher, Edubaba Ehizeex. Since 2015, I've been instructing others how to code. Tens of thousands of students on Skillshare alone are among the hundreds of thousands of pupils I have instructed and coached.As a web programming instructor, I was able to secure a prominent position in the development community.I'll be teaching you React.js today. It's okay if you've never written a react; I'll guide you over the learning curve. If you've never developed React, you MUST first become familiar with JavaScript. So if you are unfamiliar with JavaScript, please wait before beginning this course.Throughout this course, we're going to create a fully functionalNetflix Website (clone)Professional DashboardRecipe websiteQuiz AppProfessional Portfolio website to showcase your jobs.Finally, We are gonna deploy all the project on server so that you can share the links with your employers and your sponsors.

Overview

Section 1: Introduction

Lecture 1 React Foundamentals

Lecture 2 Introduction to react js

Lecture 3 Introduction to Components

Lecture 4 Tool installations

Lecture 5 React installation

Lecture 6 React boiler plate

Lecture 7 How React js works

Lecture 8 Introduction to jsx

Lecture 9 comment in jsx

Lecture 10 Types of component

Lecture 11 Creating our first functional component

Lecture 12 Types of export

Lecture 13 Props

Lecture 14 Props.children

Lecture 15 Props Immutability

Lecture 16 Props destructuring

Lecture 17 function as props

Lecture 18 React State (useState)

Lecture 19 Event handling

Lecture 20 Conditional Rendering

Lecture 21 Map Method (List Rendering)

Lecture 22 Unique Key Props (Mapping)

Lecture 23 Regular css

Lecture 24 Css Module

Lecture 25 Form input (Controlled Component)

Lecture 26 React Fragment

Section 2: Hooks (React js Advance Topics)

Lecture 27 useState Hooks

Lecture 28 update state based on the previous state value

Lecture 29 Object as state variable

Lecture 30 Array As state variable

Lecture 31 Organize the code

Lecture 32 useEffect Intro

Lecture 33 Component did mount and update

Lecture 34 Conditionally run Effect

Lecture 35 effect clean up function

Lecture 36 Component will unmount

Lecture 37 Fetch multiple posts

Lecture 38 Button click id

Lecture 39 Implement context

Lecture 40 useContext for multiple context

Lecture 41 useReducer Hooks

Lecture 42 useReducer State and action object

Lecture 43 Multiple useReducer

Lecture 44 useState and useReducer

Lecture 45 useState Data Fetch

Lecture 46 useReducer DataFetch

Lecture 47 useCallback Hook

Lecture 48 useMemo Hook

Lecture 49 useRef Hooks

Lecture 50 useRef Hooks Timer

Section 3: YumEat Project

Lecture 51 51 Building Yum Eat Website (react installation )

Lecture 52 Clean up boiler plate

Lecture 53 Create components

Lecture 54 Tailwind Installation

Lecture 55 TopNav Component

Lecture 56 SideNav

Lecture 57 SideNav Menu design

Lecture 58 SideNav Final Touch

Lecture 59 Featured component

Lecture 60 Quick delivery component

Lecture 61 Top Pick component

Lecture 62 Meal Component

Lecture 63 Sort Buttons

Lecture 64 Trending Categories

Lecture 65 Meal Component Key

Lecture 66 Trending Category count down

Lecture 67 Footer Component

Lecture 68 Testing and Fixing

Section 4: Building Netflix Clone

Lecture 69 Netflix Clone (Create React App )

Lecture 70 Components and pages

Lecture 71 Setting Up the routes

Lecture 72 BackgroundImage reUseAble Component

Lecture 73 Header reUseAble component

Lecture 74 SignUp Page

Lecture 75 Login

Lecture 76 Login Fix

Lecture 77 SettingUp Firebase

Lecture 78 CreateUsers

Lecture 79 Login Authentication

Lecture 80 OnScrollEvent

Lecture 81 TopNav Component

Lecture 82 Global css

Lecture 83 TopNav Component

Lecture 84 LogOut

Lecture 85 Hero Component

Lecture 86 Consistent Margin

Lecture 87 VideoPlayer Component

Lecture 88 MovieCard

Lecture 89 Card css

Lecture 90 Api Key

Lecture 91 Redux toolkit

Lecture 92 Fetch Genres

Lecture 93 Fetches Movies

Lecture 94 Global State

Lecture 95 Stop infinite Loop

Lecture 96 Styling Movie Component

Lecture 97 Render Movie on The Screen

Lecture 98 Performance Optimization

Lecture 99 Slider Control

Lecture 100 Implementing the Slider

Section 5: Dashboard Project (Building Dashboard website)

Lecture 101 React js Installation

Lecture 102 Cleaning Up The Boiler Plate

Lecture 103 Understanding The Flow

Lecture 104 TopNav Component

Lecture 105 TopNav Css

Lecture 106 SideNav Component

Lecture 107 Side Nav Css

Lecture 108 Featured Item Component

Lecture 109 Featured Item Css

Lecture 110 Chart Component

Lecture 111 Chart Css

Lecture 112 Style Configuration

Lecture 113 Display Total Component

Lecture 114 Styling Display Total

Lecture 115 Order Widget Component

Lecture 116 Styling Order Widget

Lecture 117 Member Widget Component

Lecture 118 implementing the Routes

Lecture 119 Styling The Member Widget

Lecture 120 User List Table

Lecture 121 Refactoring

Lecture 122 Adding Custom Data

Lecture 123 Delete Button

Lecture 124 User Profile

Lecture 125 Profile Css

Lecture 126 Create User Route

Lecture 127 Create User Component

Lecture 128 Create User Css

Lecture 129 ProductLIst Component

Lecture 130 Product List Design

Lecture 131 Product List Css

This course is for beginners of all level, who want to learn react basics and advance topics.