Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
IT & Software
Other IT & Software
Front End Web Development
30+ React Projects, Learn React JS by Building 30+ Web Apps

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

Loại khoá học: Other IT & Software

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

image
50.000 VND
829.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

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:


  1. E-signature-app

  2. Randomize-colors

  3. Like my photo

  4. Testimonials

  5. Alerts in web apps

  6. Temperature-controller

  7. Dark-mode

  8. Unlock slider

  9. Slider App

  10. Hidden-search-bar

  11. Magic Popup...


My name is Norbert

Bạn sẽ học được gì

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

Yêu cầu

  • Basic HTML
  • Basic CSS
  • Basic JavaScript
  • PC or Mac

Nội dung khoá học

34 sections

Introduction

3 lectures
Introduction
02:17
How to get the most out of this course ?
00:48
Course Resources and Useful Links
00:54

Optional Env Setup & React Crash Course inkl Project

3 lectures
Setting up the React Development Env.
07:24
Node.js and npm resources
00:02
React Crash Course
00:13

P01 E-signature-App

4 lectures
Project overview
01:05
Create Title component and general styling in React
09:44
Learn how useState works and manipulate name and date
06:08
Finished project files
00:12

P02-Randomize-colors

3 lectures
Project overview
00:49
Using events and functions
12:19
Finished project files
00:12

P03-Like my photo

5 lectures
Project overview
00:39
Card design
05:23
Install and use React Icons to the project
07:16
React useState to like on click and double Click
05:41
Finished project files
00:12

P04- Testimonials

5 lectures
Project overview
00:55
Resources
00:01
Create a React Button components
07:35
Get Post/Users/Comments using React useState and useEffect Hooks
11:20
Finished project files
00:12

P05- Alerts

4 lectures
Project overview
01:01
Create a Alert component
07:14
Automatically close alert with delay using time trigger
02:55
Finished project files
00:12

P06-Temperature-controller

4 lectures
Project overview
00:58
Design the Controller component
04:41
Change temperature using the React useState Hook
03:28
Finished project files
00:12

P07-Dark-mode

4 lectures
Project overview
00:58
Create a Blog component
06:11
Dark mode using useContext
14:08
Finished project files
00:12

P08-Slide-to-unlock

7 lectures
Project overview
00:30
Create the UI
09:00
Create Lock screen
04:57
Creating the Lock screen state
04:06
Lock the screen
03:07
Toggle Lock and Unlock Screen
04:27
Finished project files
00:12

P09-Slider App

4 lectures
Project overview
00:41
Create the Slider Component
05:39
useState hook to manipulate the Circle using the slider Component
08:23
Finished project files
00:12

P10-Hidden-search-bar

5 lectures
Project overview
00:47
Create the search component and general styling
08:45
Show search bar
09:26
Auto focus on the input using useRef Hook
05:47
Finished project files
00:12

P11-Magic Popup

5 lectures
Project overview
00:50
Create a Popup component
09:12
Trigger a popup and close it
06:18
Time Triggered popup
06:44
Finished project files
00:12

P12- Project Progress tracker

7 lectures
Project overview
00:51
Ui design and input outo focus with useRef and useEffect
05:49
Create a Progressbar component
07:23
Add multiple Progress Bars using map method
04:17
Manipulate each Progress bars data with useState
04:06
Random Progress Bar data with useEffect
02:21
Finished project files
00:12

P13-Dialog-box

6 lectures
Project overview
00:51
Dialog Box component UI design
06:26
Hello Dialog Box component
08:06
Unsubscribe Dialog Box component
06:51
Bounce animation effect
05:22
Finished project files
00:12

P14-Filter-contacts-app

6 lectures
Project overview
01:35
UI design and Autofocus using useRef and useEffect
04:30
Import data from JSON file
03:12
Create a Contact component
07:49
Filer contacts
03:26
Finished project files
00:12

P15- Simple Form Registration with Validation

6 lectures
Project overview
01:22
Form Ui
05:44
Handle inputs and Registrations
07:16
Input fields individual validation
03:21
Form Submission and Validation
05:16
Finished project files
00:12

P16-Notes-app

7 lectures
Project overview
01:42
App UI design
03:51
Install and use React Styled Components
09:13
Add New Note
06:22
Delete Note
02:11
Create Random Note types
03:49
Finished project files
00:12

P17- Responsive navigation with hamburger menu on small screens

9 lectures
Project overview
00:54
Create a nav component
03:33
Create a Nav Item component
02:41
Style the Nav using React Styled Components
06:21
Show and Hide the navbar using React useState and useEffect
05:54
Open and Close the Navbar using React useState and useEffec
03:58
Show Active nav item and change page title using React useState
04:39
Finished project files
00:12
UPDATE - Adding pages to navigate to
11:22

P18-Text-animation

7 lectures
Project overview
01:56
Form UI style
03:58
Create a React FormGroup Component
04:54
Working with the form group component
01:41
Install and use Animated Text component
08:06
Clear and Refocus the input field
01:57
Finished project files
00:12

P19-compound-interest-rate-calc

6 lectures
Project overview
01:39
UI Design using FormGroup Components
06:29
Get values using useState hook
03:33
Create a component to calc the interest
05:56
Calc the compounded interest
03:47
Finished project files
00:12

P20-Space-penguin

7 lectures
Project overview
00:59
Design the Space ENV
06:30
Space ship component
03:47
Earth and Moon Components
04:03
Launch and Land the Ship
04:50
Change the Spaceship in to a Penguin
04:16
Finished project files
00:12

React Quiz

1 lectures
Test your React Might
15 questions

P21-Tasks-tracker

7 lectures
Project overview
01:21
Planing the components layout for the UI
02:49
Task tracker style using Styled components
09:15
Input Task Component
07:30
Create and Add a New Task
08:11
Complete and Delete Task
07:13
Finished project files
00:12

P22-Card-game-ui

4 lectures
Project overview
00:47
Design the Start Menu
07:33
Create Units Card Component
16:02
Finished project files
00:12

P23-Animated-login-form

5 lectures
Project overview
00:48
UI planning and Design using Components
06:46
Login Container design using Styled Components
07:41
Animate using Styled Components
14:17
Finished project files
00:12

P24-phone-book

9 lectures
Project overview
01:18
Phone Book main UI
04:12
Create a Contact React Components
08:04
Create a Contact List React Components
04:55
Display all contacts from the Contacts Database
05:13
Create the Toggle Search and Filter Contacts Components
05:09
Sort Contact A-Z and Z-A
03:42
Search contact
04:08
Finished project files
00:12

P25-Expenses calculator and tracker App

19 lectures
Project overview
03:41
Components Planing
07:42
Create a Expenses Form Component
06:47
Create a Expenses List Component
04:28
Create a List Item Component
10:11
Style the budget using Styled components
05:18
Add state to all components
03:24
Add budget using useState , useEffect and useRef
03:35
Save and Load data from Local Storage
02:02
Handle all input and submission
03:40
Add unique Id
05:58
Display all expenses
07:20
Clear local storage and add new expenses
01:53
Handle Clear all expenses from storage and UI
02:27
Handle Delete one expense from storage and UI
03:00
Handle Edit one expense from storage and UI
07:43
Calculate the total expenses and economies
02:58
Add Alerts
07:55
Finished project files
00:12

P26-mortgage-calculator

7 lectures
Project overview
02:05
Main component and Ui design
08:25
Add State to all components
04:16
Calculate the Loan Amount
03:09
Calculate monthly payments
04:50
Display monthly payments and Alerts
03:31
Finished project files
00:12

P27-Course-store

9 lectures
Project overview
01:23
Project structure and UI design
04:50
Create the Courses component
03:01
Create a Course component and design
04:25
Create a Database for all Courses
06:24
Currencies Database and converter Buttons
05:10
Convert the Currencies with the React useContext Hook
04:15
Change Course appearance depending on its currency
03:02
Finished project files
00:12

P28-Authentication App

8 lectures
Project overview
00:52
Ui design
05:17
Form Wrapper and Shake animation
04:27
Authentication container
03:03
Authentication status using context
05:59
Authentication User name and password
05:21
Authentication Login Logout and Try again
05:40
Finished project files
00:12

P29-Speech Synthesizer

6 lectures
Project overview
00:44
UI Structure and main component
03:58
Speech Narrator UI Component
06:52
Text splitter and Highlighted Text
07:03
Start Pause and Rate
08:05
Finished project files
00:12

P30-lazy-loading

5 lectures
Project overview
01:46
Ui
06:13
Get post
06:09
Implement Lazy load
02:54
Finished project files
00:12

Extra section

1 lectures
Bonus lecture
00:36

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

The Complete UML Course (2024): Learn to Design UML Diagrams

The Complete UML Course (2024): Learn to Design UML Diagrams

25 VND
50.000 VND
Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

1.699.000 VND
50.000 VND
Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

1.499.000 VND
50.000 VND
Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

99 VND
50.000 VND
Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

1.699.000 VND
50.000 VND
Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi