Tags
Language
Tags
June 2025
Su Mo Tu We Th Fr Sa
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 1 2 3 4 5
    Attention❗ To save your time, in order to download anything on this site, you must be registered 👉 HERE. If you do not have a registration yet, it is better to do it right away. ✌

    ( • )( • ) ( ͡⚆ ͜ʖ ͡⚆ ) (‿ˠ‿)
    SpicyMags.xyz

    Introduction To React Js - Bare Bones

    Posted By: ELK1nG
    Introduction To React Js - Bare Bones

    Introduction To React Js - Bare Bones
    Published 5/2023
    MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
    Language: English | Size: 1.98 GB | Duration: 4h 56m

    Learn JSX, Hooks, Vite setup & Grommet UI Component library

    What you'll learn

    Understand how React works without JSX

    Setup Vite from scratch without templates

    Setup Prettier & ESLint configuration

    Learn hooks - useState & useEffect and also developing custom hooks

    Using Grommet UI Component Library

    Mock server using json-server

    Requirements

    Basic JavaScript knowledge

    Basic HTML & CSS knowledge

    Description

    React JS is a UI library that helps in building UI applications. It is one of the most popular UI libraries being used worldwide with tremendous work opportunities.In this course, you will learnWhat React isUsing React without JSXConfiguring Vite from ScratchSetting up Prettier & ESLintUsing Grommet UI Component LibraryMock server using json-serverHooks like useState & useEffectCreating a Custom HookLearn by developing a TODO applicationThis is a beginner-level course and hence have kept the contents of the course to a bare minimum such that new learners are not feeling overwhelmed by the content the course. But also, the contents should suffice for the learner to get deeper into React once comprehends the basics very well. Thus this course will cover the bare minimum React JS knowledge required to keep learners motivated as well as covering 60 - 70% of the stuff we will be doing with React in day-to-day development.During this course, I do expect basic JavaScript and HTML CSS knowledge. But when using the latest ES6+ features I will explain where required.Also, all the concepts provided above will be explained by developing a hands-on TODO application and not just standalone theory lectures.Hopefully, for people looking to get an idea about React, I hope this course gives a big picture.Also, as an instructor, I am open to comments. Please review the course once completing it so I can take those reviews and keep this course updated and improve it.

    Overview

    Section 1: Introduction

    Lecture 1 Introduction

    Lecture 2 Why Learn React?

    Lecture 3 Installing Node.js & VS Code

    Section 2: Getting Started

    Lecture 4 Hello World in React

    Lecture 5 Hello World in React - Continued

    Lecture 6 First React Component

    Lecture 7 A TODO list component

    Lecture 8 Create Component in a separate file

    Lecture 9 Passing Props to Component

    Lecture 10 The Problem with Current React Workflow

    Section 3: Dev Tooling & JSX

    Lecture 11 Creating NPM project and Installing React as dependency

    Lecture 12 Setting up Vite

    Lecture 13 Prettier Setup

    Lecture 14 ESLint Setup

    Lecture 15 ESLint npm command and some refactor

    Section 4: JSX & React in Action

    Lecture 16 JSX and lint setup for React

    Lecture 17 Fix config error with ESLint

    Lecture 18 New component files

    Lecture 19 React Strict Mode

    Section 5: TODO Input Form

    Lecture 20 New Input Form Field Component

    Lecture 21 useState Hook in Action

    Lecture 22 handler to update state

    Lecture 23 what React does to update the view when state is changed?

    Lecture 24 We have a controlled component

    Lecture 25 Pass Todo item to parent

    Section 6: Working on Todo List Component

    Lecture 26 Where state should be kept

    Lecture 27 Need for Key Prop

    Lecture 28 Adding new Todo to the list

    Section 7: Grommet UI Component Library

    Lecture 29 Configuring Grommet UI Component Library

    Lecture 30 Upgrade App Component to use Grommet Styling

    Lecture 31 Upgrade other components to use Grommet

    Lecture 32 Update Todo Component to use Grommet

    Section 8: Improving Todo App with features

    Lecture 33 Let's add completion status

    Lecture 34 Toggle Completion Status

    Lecture 35 Add Edit & Delete Action Buttons

    Lecture 36 Add new ID when creating Todo

    Lecture 37 Delete a Todo

    Lecture 38 Edit Button Feature part 1

    Lecture 39 Edit form cancel

    Lecture 40 Show initial Todo value in Edit Form Input Field

    Lecture 41 Fix Event Bubbling issue

    Lecture 42 Edit Todo feature

    Section 9: Todo App filter section

    Lecture 43 Create a Filter Component

    Lecture 44 Implement Filter Functionality

    Section 10: Handling API call in the Todo App

    Lecture 45 A Mock Server

    Lecture 46 List Todos by reading the data from json-server

    Lecture 47 Handling errors and loading state

    Lecture 48 Create, Update and Delete Operations

    Section 11: Final Refactor

    Lecture 49 Lets create a new file for API call

    Lecture 50 Lets make use of Custom Hook

    Lecture 51 Final refactor

    Section 12: Conclusion

    Lecture 52 Thank You and Next Steps

    Lecture 53 Note

    Beginner JavaScript developers who are interested to learn React JS