30+ React Projects, Learn React JS by Building 30+ Web Apps

Focused View

Norbert B. Menyhart

12:54:44

259 View

1. Introduction

1. Introduction.mp4

02:17

2. Optional Env Setup & React Crash Course inkl Project

1. Setting up the React Development Env..mp4

07:24

3. P01 E-signature-App

1. Project overview.mp4

01:05

2. Create Title component and general styling in React.mp4

09:44

3. Learn how useState works and manipulate name and date.mp4

06:08

4. P02-Randomize-colors

1. Project overview.mp4

00:49

2. Using events and functions.mp4

12:19

5. P03-Like my photo

1. Project overview.mp4

00:39

2. Card design.mp4

05:23

3. Install and use React Icons to the project.mp4

07:16

4. React useState to like on click and double Click.mp4

05:41

6. P04- Testimonials

1. Project overview.mp4

00:55

2. Create a React Button components.mp4

07:35

3. Get PostUsersComments using React useState and useEffect Hooks.mp4

11:20

7. P05- Alerts

1. Project overview.mp4

01:01

2. Create a Alert component.mp4

07:14

3. Automatically close alert with delay using time trigger.mp4

02:55

8. P06-Temperature-controller

1. Project overview.mp4

00:58

2. Design the Controller component.mp4

04:41

3. Change temperature using the React useState Hook.mp4

03:28

9. P07-Dark-mode

1. Project overview.mp4

00:58

2. Create a Blog component.mp4

06:11

3. Dark mode using useContext.mp4

14:08

10. P08-Slide-to-unlock

1. Project overview.mp4

00:30

2. Create the UI.mp4

09:00

3. Create Lock screen.mp4

04:57

4. Creating the Lock screen state.mp4

04:06

5. Lock the screen.mp4

03:07

11. P09-Slider App

1. Project overview.mp4

00:41

2. Create the Slider Component.mp4

05:39

3. useState hook to manipulate the Circle using the slider Component.mp4

08:23

12. P10-Hidden-search-bar

1. Project overview.mp4

00:47

2. Create the search component and general styling.mp4

08:45

3. Show search bar.mp4

09:26

4. Auto focus on the input using useRef Hook.mp4

05:47

13. P11-Magic Popup

1. Project overview.mp4

00:50

2. Create a Popup component.mp4

09:12

3. Trigger a popup and close it.mp4

06:18

4. Time Triggered popup.mp4

06:44

14. P12- Project Progress tracker

1. Project overview.mp4

00:51

2. Ui design and input outo focus with useRef and useEffect.mp4

05:49

3. Create a Progressbar component.mp4

07:23

4. Add multiple Progress Bars using map method.mp4

04:17

5. Manipulate each Progress bars data with useState.mp4

04:06

6. Random Progress Bar data with useEffect.mp4

02:21

15. P13-Dialog-box

1. Project overview.mp4

00:51

2. Dialog Box component UI design.mp4

06:26

3. Hello Dialog Box component.mp4

08:06

4. Unsubscribe Dialog Box component.mp4

06:51

5. Bounce animation effect.mp4

05:22

16. P14-Filter-contacts-app

1. Project overview.mp4

01:35

2. UI design and Autofocus using useRef and useEffect.mp4

04:30

3. Import data from JSON file.mp4

03:12

4. Create a Contact component.mp4

07:49

5. Filer contacts.mp4

03:26

17. P15- Simple Form Registration with Validation

1. Project overview.mp4

01:22

2. Form Ui.mp4

05:44

3. Handle inputs and Registrations.mp4

07:16

4. Input fields individual validation.mp4

03:21

5. Form Submission and Validation.mp4

05:16

18. P16-Notes-app

1. Project overview.mp4

01:42

2. App UI design.mp4

03:51

3. Install and use React Styled Components.mp4

09:13

4. Add New Note.mp4

06:22

5. Delete Note.mp4

02:11

6. Create Random Note types.mp4

03:49

19. P17- Responsive navigation with hamburger menu on small screens

1. Project overview.mp4

00:54

2. Create a nav component.mp4

03:33

3. Create a Nav Item component.mp4

02:41

4. Style the Nav using React Styled Components.mp4

06:21

5. Show and Hide the navbar using React useState and useEffect.mp4

05:54

6. Open and Close the Navbar using React useState and useEffec.mp4

03:58

7. Show Active nav item and change page title using React useState.mp4

04:39

20. P18-Text-animation

1. Project overview.mp4

01:56

2. Form UI style.mp4

03:58

3. Create a React FormGroup Component.mp4

04:54

4. Working with the form group component.mp4

01:41

5. Install and use Animated Text component.mp4

08:06

6. Clear and Refocus the input field.mp4

01:57

21. P19-compound-interest-rate-calc

1. Project overview.mp4

01:39

2. UI Design using FormGroup Components.mp4

06:29

3. Get values using useState hook.mp4

03:33

4. Create a component to calc the interest.mp4

05:56

5. Calc the compounded interest.mp4

03:47

22. P20-Space-penguin

1. Project overview.mp4

00:59

2. Design the Space ENV.mp4

06:30

3. Space ship component.mp4

03:47

4. Earth and Moon Components.mp4

04:03

5. Launch and Land the Ship.mp4

04:50

6. Change the Spaceship in to a Penguin.mp4

04:16

23. React Quiz

24. P21-Tasks-tracker

1. Project overview.mp4

01:21

2. Planing the components layout for the UI.mp4

02:49

3. Task tracker style using Styled components.mp4

09:15

4. Input Task Component.mp4

07:30

5. Create and Add a New Task.mp4

08:11

6. Complete and Delete Task.mp4

07:13

25. P22-Card-game-ui

1. Project overview.mp4

00:47

2. Design the Start Menu.mp4

07:33

3. Create Units Card Component.mp4

16:02

26. P23-Animated-login-form

1. Project overview.mp4

00:48

2. UI planning and Design using Components.mp4

07:41

3. Login Container design using Styled Components.mp4

07:41

4. Animate using Styled Components.mp4

14:17

27. P24-phone-book

1. Project overview.mp4

01:18

2. Phone Book main UI.mp4

04:12

3. Create a Contact React Components.mp4

08:04

4. Create a Contact List React Components.mp4

04:55

5. Display all contacts from the Contacts Database.mp4

05:13

6. Create the Toggle Search and Filter Contacts Components.mp4

05:09

7. Sort Contact A-Z and Z-A.mp4

03:42

8. Search contact.mp4

04:08

28. P25-Expenses calculator and tracker App

1. Project overview.mp4

03:41

2. Components Planing.mp4

07:42

3. Create a Expenses Form Component.mp4

06:47

4. Create a Expenses List Component.mp4

04:28

5. Create a List Item Component.mp4

10:11

6. Style the budget using Styled components.mp4

05:18

7. Add state to all components.mp4

03:24

8. Add budget using useState , useEffect and useRef.mp4

03:35

9. Save and Load data from Local Storage.mp4

02:02

10. Handle all input and submission.mp4

03:40

11. Add unique Id.mp4

05:58

12. Display all expenses.mp4

07:20

13. Clear local storage and add new expenses.mp4

01:53

14. Handle Clear all expenses from storage and UI.mp4

02:27

15. Handle Delete one expense from storage and UI.mp4

03:00

16. Handle Edit one expense from storage and UI.mp4

07:43

17. Calculate the total expenses and economies.mp4

02:58

18. Add Alerts.mp4

07:55

29. P26-mortgage-calculator

1. Project overview.mp4

02:05

2. Main component and Ui design.mp4

08:25

3. Add State to all components.mp4

04:16

4. Calculate the Loan Amount.mp4

03:09

5. Calculate monthly payments.mp4

04:50

6. Display monthly payments and Alerts.mp4

03:31

30. P27-Course-store

1. Project overview.mp4

01:23

2. Project structure and UI design.mp4

04:50

3. Create the Courses component.mp4

03:01

4. Create a Course component and design.mp4

04:25

5. Create a Database for all Courses.mp4

06:24

6. Currencies Database and converter Buttons.mp4

05:10

7. Convert the Currencies with the React useContext Hook.mp4

04:15

8. Change Course appearance depending on its currency.mp4

03:02

31. P28-Authentication App

1. Project overview.mp4

00:52

2. Ui design.mp4

05:17

3. Form Wrapper and Shake animation.mp4

04:27

4. Authentication container.mp4

03:03

5. Authentication status using context.mp4

05:59

6. Authentication User name and password.mp4

05:21

7. Authentication Login Logout and Try again.mp4

05:40

32. P29-Speech Synthesizer

1. Project overview.mp4

00:44

2. UI Structure and main component.mp4

03:58

3. Speech Narrator UI Component.mp4

06:52

4. Text splitter and Highlighted Text.mp4

07:03

5. Start Pause and Rate.mp4

08:05

33. P30-lazy-loading

1. Project overview.mp4

01:46

2. Ui.mp4

06:13

3. Get post.mp4

06:09

4. Implement Lazy load.mp4

02:54

Description

Learn React.js and its most powerful and commonly used React Hooks like, useState, useEffect, useRef, useContext.

What You'll Learn?

Learn how to work with the React JavaScript Framework and create awesome web applications
Learn all the React Hooks like (useState, useEffect, useContext, useMemo, useRef) and use them in simple to more complex projects
Create powerful React Components witch you can use in later projects
Learn how to install and use React Icons and use them in a multitude of projects
Learn how to install and use React Styled Components and use them in a multitude of projects
Learn to create simple-to-grasp workflows using using React powerful libraries
Learn JSX syntax for extended HTML

Who is this for?

Beginner React developers who are looking to learn React js.

Beginner Front End developers who want to learn a front end JavaScript Framework.

Beginner developers who want to create simple-to-grasp dev workflows and have Ultimate flexibility and compatibility.

Developers who seek High performance reinforced by Virtual DOM and Hassle-free reusability. of components

Beginner or intermediate web developers who want to understand Reacts unique hooks.

More details

Description
About This Course

This React Course is a project based Course that focuses on sharpening your skills as a Web Developer by creating modern Web Applications using the React JavaScript Framework and its large library of npm packages.
This course will also teach you the most powerful and commonly used React Hooks like, useState, useEffect, useRef, useContext and together with them you will be able to buildÂ powerful reusable components for future projects.

This course will use only functional components and NOT class based components.

Who is this course for?
This course if for beginner and intermediate React developers who want to create a solid react projects portfolio with modern web applications ranging form simple to more complex ones, while also learning:
Structure
Use of React Hooks
Creation of reusable React components

What will you learn in this course?
By taking this course you will learn multiple use cases for the most powerful and commonly used React Hooks like, useState, useEffect, useRef, useContext.
You will also learn:
How to process data using local db's and server based db using mock servers.
How to use React Icons
How to use React styled components.
How to use React routing system
How to install and use third party npm packages
and more much much more... .

Why you should learn ReactJS?
React saves you time and money on development because it's component-based. You can break down an interface into reusable components that allow you to build dynamic user interfaces. This taps into the current thinking behind 'Design Systems'.

What is React ?
React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies

Here are even more reasons why you should learn React.
1. React is declarative
2. React makes app development easier
3. The React community is amazing
4. React is all about Reusable Components
5. React is used by huge organizations
6. React is SEO-friendly
7. React fully embraces JavaScript and TypeScript
8. React has a fast learning curve

At the end of the course, you will be able to build 30 Web Apps
Here are all of the projects we are going to build in this course:

E-signature-app
Randomize-colors
Like my photo
Testimonials
Alerts in web apps
Temperature-controller
Dark-mode
Unlock slider
Slider App
Hidden-search-bar
Magic Popup...

My name is Norbert
Who this course is for:
Beginner React developers who are looking to learn React js.
Beginner Front End developers who want to learn a front end JavaScript Framework.
Beginner developers who want to create simple-to-grasp dev workflows and have Ultimate flexibility and compatibility.
Developers who seek High performance reinforced by Virtual DOM and Hassle-free reusability. of components
Beginner or intermediate web developers who want to understand Reacts unique hooks.

User Reviews

Rating

average 0

Total votes0

Focused display

Hi I am a Self-taught Web Developer and I am a multimedia content creator with over 3k subscribers on YouTube.Join me on this journey and constantly evolve yourself. Enrich your Knowledge with the foundations of Web Development by learning HTMNL5, CSS3 and JavaScript and Applying them through Building from Easy to progressively more complex Responsive Web Pages.

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.