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
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