Introduction To React Js - Bare Bones

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