Introduction to React JS - Bare Bones

Focused View

Harish Krishnan

4:56:19

56 View

1. Introduction

1. Introduction.mp4

05:20

2. Why Learn React.mp4

05:33

3.1 Node.js Installation.html

3.2 NVM - Mac And Linux Users.html

3.3 NVM - Windows Users.html

3.4 Visual Studio Code.html

3. Installing Node.js And VS Code.mp4

08:02

2. Getting Started

1.1 unpkg React.html

1.2 unpkg React DOM.html

1. Hello World in React.mp4

07:07

2. Hello World in React - Continued.mp4

05:36

3. First React Component.mp4

04:21

4. A TODO list component.mp4

04:46

5. Create Component in a separate file.mp4

02:03

6. Passing Props to Component.mp4

05:45

7. The Problem with Current React Workflow.mp4

03:34

3. Dev Tooling And JSX

1. Creating NPM project and Installing React as dependency.mp4

04:46

2. Setting up Vite.mp4

07:14

3. Prettier Setup.mp4

02:28

4. ESLint Setup.mp4

12:08

5. ESLint npm command and some refactor.mp4

03:14

4. JSX And React in Action

1. JSX and lint setup for React.mp4

12:13

2. Fix config error with ESLint.mp4

03:24

3. New component files.mp4

09:09

4. React Strict Mode.mp4

03:25

5. TODO Input Form

1. New Input Form Field Component.mp4

06:15

2. useState Hook in Action.mp4

08:50

3. handler to update state.mp4

05:41

4. what React does to update the view when state is changed.mp4

02:35

5. We have a controlled component.mp4

02:44

6. Pass Todo item to parent.mp4

08:03

6. Working on Todo List Component

1. Where state should be kept.mp4

07:12

2. Need for Key Prop.mp4

04:15

3. Adding new Todo to the list.mp4

03:48

7. Grommet UI Component Library

1.1 Grommet UI.html

1. Configuring Grommet UI Component Library.mp4

08:19

2. Upgrade App Component to use Grommet Styling.mp4

03:32

3. Upgrade other components to use Grommet.mp4

05:59

4. Update Todo Component to use Grommet.mp4

02:29

8. Improving Todo App with features

1. Lets add completion status.mp4

03:03

2. Toggle Completion Status.mp4

04:32

3. Add Edit And Delete Action Buttons.mp4

03:46

4. Add new ID when creating Todo.mp4

03:07

5. Delete a Todo.mp4

04:32

6. Edit Button Feature part 1.mp4

05:15

7. Edit form cancel.mp4

04:15

8. Show initial Todo value in Edit Form Input Field.mp4

05:05

9. Fix Event Bubbling issue.mp4

06:51

10. Edit Todo feature.mp4

04:25

9. Todo App filter section

1. Create a Filter Component.mp4

03:55

2. Implement Filter Functionality.mp4

05:57

10. Handling API call in the Todo App

1.1 Json-server.html

1. A Mock Server.mp4

04:57

2. List Todos by reading the data from json-server.mp4

09:48

3. Handling errors and loading state.mp4

08:10

4. Create, Update and Delete Operations.mp4

13:34

11. Final Refactor

1. Lets create a new file for API call.mp4

12:20

2. Lets make use of Custom Hook.mp4

05:42

3. Final refactor.mp4

05:06

12. Conclusion

1. Thank You and Next Steps.mp4

02:09

2.1 react-todo-app-final.zip

2. Note.html

Description

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

Who is this for?

Beginner JavaScript developers who are interested to learn React JS

What You Need to Know?

Basic JavaScript knowledge

Basic HTML & CSS knowledge

More details

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 learn
What React is
Using React without JSX
Configuring Vite from Scratch
Setting up Prettier & ESLint
Using Grommet UI Component Library
Mock server using json-server
Hooks like useState & useEffect
Creating a Custom Hook
Learn by developing a TODO application
This 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 contents of 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.
Who this course is for:
Beginner JavaScript developers who are interested to learn React JS

User Reviews

Rating

average 0

Total votes0

Focused display

React

Harish Krishnan

Instructor's Courses

A Software Engineer with experience over six years of working in small start-ups as well as big companies. Have worked with a multitude of technologies like JavaScript, TypeScript, React, Angular, Vue, NodeJs, etc.Always had an idea to teach and hence using this platform to teach people and improve myself in the process as well.In my free time, I go to Gym, follow NBA and Formula 1, and like to learn new technologies & programming languages.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.