Mô tả

ReactJS is a JavaScript component library for creating user interfaces for websites and applications. Developed by Jordan Walke in 2011, it sets a new precedent for developing fast and dynamic websites using JavaScript.

Commonly known as React, it gives coders resources for developing reusable and easily integrate UI components that reduce development time and provide a responsive user interface for website, web app and mobile app.

The User Interface or UI is anything a user uses to interact with a website, such as a button, a link, menu tabs, or search bars. React offers an extensive collection of such UI components that front-end developers use for creating personalized interactive elements.

React mainly focuses on building the View Layer (consisting of all the parts of a page visible to users) of an application.

In This Course Learn React Programming Practically, Develop Real World Web Applications Using Socket, REST APIs, Firebase, React Hooks, Bootstrap, React.js, Webpack , HTML5 , CSS3 , React- Router.

React js developer: salaries per region

New York -$142,350

Georgia -$135,000

New Jersey -$131,625

California -$130,000

Illinois -$126,750

Arizona -$121,875

Texas -$117,000

In This Course, We Are Going To Work On 50 Real World React Development Projects Listed Below:


Project-1 : E-Commerce (Amazon Clone) - React, React-Context-Api, Firebase

Project-2 : Chat Application - React, React Chat engine, Socket, Rest Apis

Project-3 : Movies Application (Ott) - React, Omdb Api, React Hooks, Bootstrap

Project-4 : Video Sharing Website - React, Youtube Api, Material-Ui, Axios

Project-5 : Todolist Website - React, Material-Ui, React Hooks, State Management

Project-6 : Blog Website - React, Material-Ui, React Hooks, State Management, Gnews Api

Project-7 : Social Networking Website - Material-Ui, React Hooks, State Management, Google Oauth, Security And Authentication

Project-8 : Resume Website (Portfolio) - React, Material-Ui, React Hooks, State Management--

Project-9 : An Emoji Search Application Made With React - React, Reactdom, Html5, Css3

Project-10 : A Breaking Bad Character Application Made With React - React, Reactdom, Html5, Scss, React Context


Project-11 : A Random Quote Generator Application Made With React And Deployed On Heroku

Project-12 : A Password Generator Application Made With React - React, Reactdom, Html5, Css

Project-13 : A Quiz App Made With React - React, Reactdom, Html5, Scss

Project-14 : UnSplash Image Gallery Application made with React -ReactDOM, React Hooks

Project-15 : A React Router Demo Application made with ReactJs -React Js , NPM , CSS , React Router Dom , Context , React Hooks

Project-16 : A Book Shelf Application made with React- React Js , NPM , CSS , State Management

Project-17 : A Note Taking Application Made with React and Redux-React Js , NPM , CSS , State Management , Redux , React-Redux , CRA

Project-18 : A React Contact Register Application-React Js , NPM , CSS , State Management , React Context , Hooks

Project-19 : A Spend Money App made with React-React Js , NPM , CSS , State Management , React Context , Hooks

Project-20 : A Resort Booking Application made with React-React Js , NPM , CSS , State Management , Hooks , CRA


Project-21 : A Body Mass Index Calculator made with React-React Js , NPM , CSS , State Management , React Context , Hooks , Context

Project-22 : A Furniture Store made with React and Redux-React Js , NPM , CSS , State Management , React Context , Hooks

Project-23 : A Scoreboard Application made with ReactJS-React Js , NPM , CSS , State Management , React Context , Hooks

Project-24 : Meta Tag Generator Application made with React-React Js , NPM , CSS , State Management , React Context , Hooks

Project-25 : Food Ordering Web Application - ReactJs, Material-Ui, React Router, Css

Project-26 : Weather Web Application Using Api - ReactJs, Open Weather Api, Css

Project-27 : Food Recipe Application - ReactJs, Edamam Api, Firebase For Hosting, Css

Project-28 : My Cart Application - ReactJs, React-Hooks, External Api, Css

Project-29 : Cafe Menu Application - ReactJs, React-Hooks , Firebase, Css

Project-30 : Cocktail Hub Web Application - ReactJs, React-Hooks, External Api, Context Api, Css


Project-31 : Review Posting Application - ReactJs, Material-Ui, Css, Nanoid

Project-32 : Pomodoro Application - ReactJs, React Countdown Timer Npm Package, Css

Project-33 : Google Search Application Using Api - ReactJs, Tailwind Css, Google Search Api, React Router Dom, React Player--

Project-34 : Tic-Tac-Toe game with React js

Project-35 : Word and letter counter apllication using react js, including useState hooks and pure javascript.

Project-36 : Currency converter using React js

Project-37 : Speech Recogitio, Voice assistant app using react js

Project-38 : How to build a Calculator using react js, with hooks

Project-39 : Build a budget app using react js, hooks, custom hooks, react-contex concept

Project-40 : Music Player using react js (Spotify clone) using react js with proper user interface using official spotify api


Note (Read This): This Course Is Worth Of Your Time And Money, Enroll Now Before Offer Expires.

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

Learn how to create React development projects

Assemble incredibly reusable React components

See the step-by-step process of designing and assembling an advanced project

Learn how to create React Components, React Forms

Manage a project using a package-based architecture

Create portfolio of real- world projects on one of the most in-demand web development technologies

Learn and understand what is React and how it works

Build powerful, fast, user-friendly and reactive web apps

Yêu cầu

  • Basic knowledge of React

Nội dung khoá học

41 sections

Introduction To The Course

2 lectures
Introduction To The Course
01:58
Course Projects Outline
00:34

Project-1 : E-Commerce (Amazon Clone) - React, React-Context-Api, Firebase

13 lectures
Introduction To The Project - E-Commerce (Amazon Clone)
02:35
Getting Started With React
04:52
E-Shop Header.
20:49
E-Shop Home Page
14:04
React Props
07:19
React Routing
08:44
E-Shop Checkout Page
20:01
React Context API
20:52
Add To Basket
12:18
Remove From Basket
09:11
Authentication Using Firebase
20:49
Deploying The App
04:58
Download The Project Files
00:01

Project-2 : Chat Application - React, React Chat engine, Socket, Rest APIs

12 lectures
Introduction To The Project -Chat Application
02:22
Getting Started
04:26
React Chat Engine
09:42
Components
08:18
Chat Feed
16:04
My Message Component
05:37
Their Message Component
07:53
Render Read Receipts
05:52
Message Form
14:49
Login Form
14:07
Finishing Up The Project
05:34
Download The Project Files
00:01

Project-3 : Movies Application (Ott) - React, Omdb Api, React Hooks, Bootstrap

11 lectures
Introduction To The Project - Movies Application (Ott)
03:26
Getting Started
04:15
OMDb AP
02:53
Movie List
12:22
MovieListHeading and Searchbox
13:53
Implementing Search Feature
08:29
Add To Favourite
19:08
Remove From Favourites
10:53
Local Storage
07:14
Finishing Up The Project
06:23
Download The Project Files
00:01

Project-4 : Video Sharing Website - React, Youtube Api, Material-Ui, Axios

11 lectures
Introduction To The Project - Video Sharing Website
04:38
Getting Started
06:26
React Material-UI
08:24
Youtube API
06:40
SearchBar Component
18:08
React State Hooks
06:37
VideoDetail Component
11:53
VideoList Component
07:20
VideoItem Component
10:39
Finishing Up
06:15
Download The Project Files
00:01

Project-5 : Todolist Website - React, Material-Ui, React Hooks, State Manageme

13 lectures
Introduction To The Project - To do list Website
04:24
Getting Started With React
07:38
Header Component
12:30
CreateArea Component
17:22
Add Note
09:23
Add Note Continuation
06:02
CreateArea CSS
06:00
Note Component
10:08
Deleting Note
06:05
Footer Component
03:34
Completing CSS.
06:33
Finishing Up
06:47
Download The Project Files
00:01

Project-6 : Blog Website - React, Material-Ui, React Hooks, State Management,

11 lectures
Intro To The Project
03:41
Getting Started
09:06
userSlice.js
12:08
store.js _ index.js
07:12
Homepage Component
14:31
Navbar Component
13:04
Finishing Navbar
03:27
Gnews API
03:53
Blogs Component
09:08
Finishing Up The Project.
05:48
Download The Project Files
00:01

Project-7 : Social Networking Website - Material-Ui, React Hooks, State Manage

11 lectures
Intro To The Project
05:43
Getting Started
11:00
Authentication and Security.
17:53
Database Encryption
06:11
Environment Variables
05:41
Hashing
07:10
Salting and Hashing
07:31
Cookies
04:40
Sessions
08:23
Google OAuth
10:07
Download The Project Files
00:01

Project-8 : Resume Website (Portfolio) - React, Material-Ui, React Hooks, Stat

11 lectures
Intro To The Project
03:08
Getting Started
07:23
Dependencies and Components
09:31
React-Router-DOM
07:32
Props and Home Component
06:37
Navbar Component
06:30
About Component
02:34
Destructuring Assignment
09:50
Finishing Component.
05:36
Finishing Up The Project
05:50
Download The Project Files
00:01

Project-9 : A React Router Demo Application made with ReactJs -React Js , NPM

21 lectures
App Introduction
03:24
Creating React App
01:51
House Keeping
03:53
Hello World
03:06
Context part1
06:45
Context Part2
10:17
Homepage
09:15
About Page
08:11
Validation of Form
08:52
Contact Form Part 1
14:22
Contact Form Part 2
14:05
Contact Form Part 3
04:49
User Component Part 1
10:00
User Component Part 2
11:02
Creating User Component Part 1
14:45
User Component Part 2
13:53
Error Page
02:29
Necessary Imports
08:33
Navabar
10:46
User Component Part 2
13:53
Download The Project Files
00:01

Project-10 : A Book Shelf Application made with React- React Js , NPM , CSS ,

16 lectures
App Intro
00:37
CRA
02:10
First Run
04:10
House Keeping
04:50
Fonts
01:50
Creating Context
03:45
How to use Create Context
02:28
Creating Theme Contex
09:17
Content Context
04:14
Creating Components
03:30
Next Part
04:33
Creacting BookList
10:24
Creating Book
12:35
Final Fix.
01:14
Deployment
02:51
Download The Project Files
00:01

Project-11 : A Note Taking Application Made with React and Redux-React Js , NP

16 lectures
App Intro
01:19
CRA
02:08
First Run
05:43
Extensions For React
01:30
Creating Components
07:55
Components Part 2.
04:59
Adding Components Part 3
02:54
Adding Redux
03:03
Creating Store
07:33
Making Store Available
07:21
Adding Store Part 2
07:54
Connecting
06:36
Creating Search Component
05:20
Creating NoteItem.
11:01
App Completion
00:50
Download The Project Files
00:01

Project-12 : A React Contact Register Application-React Js , NPM , CSS , State

10 lectures
App Introduction
00:59
CRA
02:57
Folder Structure
02:39
Extensions
04:16
Creating Components
08:47
Creating ContactList
09:27
Creating Contact Form
10:07
Styles
05:15
Styles 2
07:12
Download The Project Files
00:01

Project-13 : A Spend Money App made with React-React Js , NPM , CSS , State Ma

13 lectures
App Introduction
01:17
Creating React Application.
02:26
First Run
04:48
Extensions For React
01:30
Creating Components.
04:42
Making Required Components
08:36
Creating App.jsx
06:06
Creating A Component
06:43
CardItem
04:10
Add Basket
08:44
Remove Item
03:46
Final Touch
08:07
Download The Project Files
00:01

Project-14 : A Resort Booking Application made with React-React Js , NPM , CSS

17 lectures
App Intro
01:55
CRA
01:54
First Run
03:43
Extensions
04:16
Creating State
09:18
Creating State
04:38
Adding Methods
06:07
Defining Methods
03:54
Completing Booking.js
07:35
Creating Billing.js
05:51
Creating Methods in Billing
07:14
Billing.js Part 1
04:51
Billing.jsx Part 2.
03:47
DateSelector.js
11:03
RoomDetails.js
04:20
Adding Dynamics to RoomDetails.js
10:04
Download The Project Files
00:01

Project-15 : A Body Mass Index Calculator made with React-React Js , NPM , CSS

13 lectures
App Intro
01:52
Create React Application
02:32
First Run
03:43
Extensions
04:16
Using useState
06:55
Creating Structure
05:53
Creating Structure Part 2
07:52
Creating Structure Part 2
03:47
Creating Methods
07:18
Methods Part 2
07:13
Creating Methods Final Part
09:48
Final Fix
06:20
Download The Project Files
00:01

Project-16 : A Furniture Store made with React and Redux-React Js , NPM , CSS

14 lectures
App Intro
01:20
CRA
01:44
Configuring Application
07:47
Index.js
05:04
Creating App.js
06:10
Creating Reducer
10:10
Actions Creators.
09:19
Using connect
08:48
MapStatetoProps
07:34
Creating Components Part 1
12:02
Creating Components Part 2
05:38
Creating Component Part 3
10:13
Connecting Components
04:12
Download The Project Files
00:01

Project-17 : A Scoreboard Application made with ReactJS-React Js , NPM , CSS ,

12 lectures
App Intro.
01:35
CRA
02:52
Extensions
05:42
Creating Components
07:50
Creating Methods
07:02
Creating Methods Part 2
07:28
Adding Player.js
06:53
Creating Counter.ks
04:07
Creating Stats
11:05
Creating StopWatch
12:01
Final Component.
05:19
Download The Project Files
00:01

Project-18 : Meta Tag Generator Application made with React-React Js , NPM , C

11 lectures
App Intro
01:43
CRA
03:04
Extensions
05:42
Creating Components
07:57
Configuring Components
06:58
Creating Structure
05:01
Creating Structure Part 2
06:20
Creating Generator.js
11:00
Finishing MetaAtgs
11:55
Final Fix
05:28
Download The Project Files
00:01

Project-19 : Food Ordering Web Application - React.Js, Material-Ui, React Rout

9 lectures
Introduction To The Project.
03:55
Project Installation And Setup
27:19
Applying React Router Trim
12:01
Creating & Styling The Nav Bar Trim
09:32
Finishing Up The Nav bar Trim
15:01
Creating the Homepage and Footer Trim
18:49
Menu Page And Mapping The Data.
21:05
About _ Contact Page - Finishing Up The Project
19:54
Download The Project Files
00:01

Project-20 : Weather Web Application Using Api - React.Js, Open Weather Api, C

12 lectures
Introduction To The Project.
02:22
Generating the API Key
05:37
Creating the Search Component
14:19
Search Component Continuation
12:10
Creating Weather Card
09:36
Styling The Weather Card
13:31
The useEffect Hook
09:40
Promises, Async, Await Try and Catch
12:54
Configuring the API Endpoint
09:23
Grabbing The Data From API.
12:47
Fetching Data To The UI
14:34
Download The Project Files
00:01

Project-21 : Food Recipe Application - React.Js, Edamam Api, Firebase For Host

13 lectures
Introduction To The Project
03:35
Generationg API ID _ Key
06:22
React Project Installation
06:40
Creating the Basic Structure
07:44
Styling The Input And Search Field
12:40
Calling the API Through Endpoint
12:54
Implementing Custom Search
13:34
The Category Dropdown
07:24
Mapping The Data From The API
12:51
The RecipeTile Component
11:29
Adding RegEx To Filter Images
06:43
Hosting The Website on Firebase
14:00
Download The Project Files
00:01

Project-22 : My Cart Application - React.Js, React-Hooks, External Api, Css

14 lectures
Introduction To The Poject
02:37
Project Setup And Installation
09:27
Creating The Navbar (2)
13:02
Styling The Navbar
10:12
Creating The Context
11:52
Creating CartContainer
10:05
Creating CartItem Component
16:49
The useReducer Hook
11:15
Implementing The useReducer
08:22
Clear Cart
09:26
Adding And Removing Items From Cart.
10:56
Creating The Actions In Reducer
17:05
Dispatch And Actions Final
18:06
Download The Project Files
00:01

Project-23 : Cafe Menu Application - React.Js, React-Hooks , Firebase, Css

11 lectures
Introduction To The Project.
01:39
Initialising The Project.
10:20
Styling The Title
09:57
Creating The Category Component.
12:53
The Menu Component.
15:06
Styling The Menu Component.
11:25
Working On The Category Component
10:03
Passing And Mapping Data To Menu Component
10:18
Redering The Data In The App Component
11:38
Hosting Application On Firebase
24:12
Download The Project Filesv
00:01

Project-24 : Cocktail Hub Web Application - React.Js, React-Hooks, External Ap

12 lectures
Introduction To The Project
02:45
Creating Navbar
12:00
Linking Components To Navbar.
12:01
Linking Components To Navbar.
10:23
The API We Are Going To Use
11:54
Setting Up Global Context
12:46
Fetching Data From Try And Catch
12:04
Creating Global Context
08:32
Creating Search Component
13:02
Loader,Cocktails,CocktailList Components
14:07
SingleCocktail Component
13:28
Download The Project Files
00:01

Project-25 : Review Posting Application - React.Js, Material-Ui, Css, Nanoid

12 lectures
Introduction To The Project
02:25
Setting Up The Project
11:41
Using Material-UI and Navbar
11:50
Dark Mode Feature
10:04
Dark Mode Feature
10:13
Posting The Review Component
11:41
Adding JS To The AddNote
11:02
Creating The Review(Note) Component
12:02
Creating The Review List (NoteList)
10:22
Configuring The App-js
12:38
Finishing Up The Project.
15:30
Download The Project Files
00:01

Project-26 : Pomodoro Application - React.Js, React Countdown Timer Npm Packag

12 lectures
Introduction To The Project
02:25
Setting Up The Project
11:01
Creating The Button Component
12:02
Styling The Button
11:08
SetPomodoro Component
12:03
Configuring The SetPomodor
12:29
CountDown Animation Component
12:51
Creating The GlobalContext
11:15
Configuring The Global Context
11:29
Configuring The App-js
13:10
Finishing Up the Project with App-Js
11:49
Download The Project Files
00:01

Project-27 : Google Search Application Using Api - React.Js, Tailwind Css, Goo

12 lectures
Introduction To The Project
02:04
Setting Up The Project.
11:51
Installing Tailwind And Craco
09:07
Creating The Navbar
14:17
Creating The Search Component
11:25
Completing The Search And Creating Links
14:10
Creating Loading And Footer Component.
10:04
Creating The Global Context.
14:21
Creating The Results Component Structure
10:02
Distributing Data According To Search Field
11:50
Setting Up The Routes And App-Js
13:00
Download The Project Files
00:01

Project-28 : Tic-Tac-Toe game with React js

10 lectures
Introduction to Tic tac Toe game Project
02:13
Environment Setup for the project
03:09
Getting started with React Component and Understanding Folder Structure
03:43
Introduction to react props and passing function to componnennts
08:12
Rendering our player using useState Hooks
10:53
Toggle between player_s X and O using useEffect hooks
15:01
Giving action to the restart button
04:46
Making condition for a tie match
06:17
Adding sound effect to our project.
03:29
Download The Project Files
00:01

Project-29 : Word and letter counter apllication using react js, including use

6 lectures
Introduction to Word Counter using React js.
01:06
What we are going to make
01:06
Getting started with our user Interface for word counter
05:36
Completing our counter letters and words
11:09
Completing with our button
03:18
Download The Project Files
00:01

Project-30 : Currency converter using React js

5 lectures
Introduction to currency converter
00:50
What we are going to make
00:31
Get started with our project user Interface
10:49
Our final result with convert api.
07:45
Download The Project Files
00:01

Project-31 : Speech Recogitio, Voice assistant app using react js

5 lectures
Introduction to the project
01:51
Let_ see what we are going to make and how it work
02:24
Understanding the speech recognition logic and passing commands
05:42
Rendering HTML elements inside browser and applying CSS
05:33
Download The Project Files
00:01

Project-32 : How to build a Calculator using react js, with hooks

6 lectures
Introduction to calculator presentation
01:53
Getting started with the html
07:17
Handling the buttons with click
05:37
Making our delete button functional
04:04
Error Handling and the Equal button.
04:11
Download The Project Files
00:01

Project-33 : Build a budget app using react js, hooks, custom hooks, react-con

15 lectures
Introduction to the Budget App using react js with presentation
02:28
Getting started with initialization of our react application
08:12
Rendering our header for budget app
13:33
Making Budget Card component.
10:20
Completing Budget Card Header
06:33
Completing Budget Card component
10:54
Completing Budget Card component
06:08
Calling the functions for budget card funtionality.
15:23
Completing add Budget and add Expenses function.
06:23
Learn how to use Local Storage.
11:44
Handling Budget Modal.
15:25
Maping through budget
07:54
Add expenses modal and Uncategorized section
15:04
Completing the application
11:09
Download The Project Files
00:01

Project-34 : Music Player using react js (Spotify clone) using react js with p

11 lectures
Introduction to Schedule Application using react JS
04:07
Getting startded with ur project
13:14
Installing Bootstrap using terminal
02:31
Redirectig to authorization.
15:17
Creating Server for our application.
14:55
Modifying the server
15:04
Managing the Authentication of user.
14:41
Completing authorisation
14:40
Making the song component
16:40
Concluding the project
04:36
Download The Project Files
00:01

Project-35 : Calender Application with scheduling events functionality

11 lectures
Introduction to our project Callender App using React Js
03:42
Getting Started With Project Initialization
14:32
Lets Make the application more handy
03:50
Binding more additional fields and restricting user
08:33
Customizing Views
15:43
Let_s make a proper css view now
14:50
Learining about some new components
14:10
Initializing second half modules
13:52
Handling Event for the calender
14:50
Concluding our application
09:52
Download The Project Files
00:01

Project-36 : Dictionary App using react js

9 lectures
Introduction to Dictionary App Using React Js
03:53
Getting started with our project Initialization
15:04
Learn about hooks in react
14:33
Finishing with css in component
15:02
Working with functional components and UI
15:10
Rendering Definition component.
14:45
Styling Definition Component
14:56
Completing Definition Component
02:39
Download The Project Files
00:01

Project-37 : Youtube Clone using react js

8 lectures
Introduction to Youtube Clone
01:44
Getting started with our project
15:05
Initializing fetch and learning Api.
15:07
. Setting sate for using hooks
15:07
Fetching api data to log and render
15:07
Arranging Video Components
10:15
Concluding with our project
08:54
Download The Project Files
00:01

Project-38 : Canndy Crush game usinng react js

8 lectures
Introduction to Candy Crush app using react js
02:05
Getting started with our project initialization
14:57
Initializing array of colors in our project
15:07
Arranging array with colors and images
15:23
Getting the drag and drop event
15:18
Getting the drag and drop event
15:03
Concluding with the game
12:15
Download The Project Files
00:01

Project-39 : Astronomy stuff of the day Using React.Js CSS , react hooks, APOD

9 lectures
The introduction to the project
08:31
Setting up the react project and environment
08:08
Setting up the components
10:44
introduction to Hooks and useState hook
11:23
Getting started with the axios , asynchronous Javscript
06:41
Using useState to render data from the API and showing on the main page
11:03
The designing of the whole application Part-1
08:29
The designing of the whole application Part-2
08:35
Download The Project Files
00:01

Project-40 : Rock paper Scissors using React.js , CSS, React hooks

11 lectures
introduction to the project
06:20
Getting started with the project and creating the development enviornment
04:31
Setting up the three main components for the project
05:31
creation of the main body part-1
12:07
setting up the functionality using useState() andcreation of the main body part
06:07
working with the functionality using useEffect() and creation of the main body p
13:58
Complete functionality of the project
10:39
Designing the whole application part-1.
10:31
Designing the whole application part-2
06:00
Designing the whole application part-3
06:18
Download The Project Files
00:01

Đá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?

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.