Web Development
Frontend Development with ReactJS
- 1k Enrolled
- All levels
- Last updated 01/2024
- English,Telugu,Hindi
Course Description
Welcome to the Frontend Development with ReactJS course.
In this practical hands-on training, you're going to master web development using ReactJS with this ultimate course that includes all the latest web development technologies.
We provide an end-to-end guidance to all topics necessary for current industry level standards. We focus on foundational topics so that students have a strong knowledge on basics. We understand that theory alone isn't going to give you the best experience, so that's why this course is packed with practical hands on examples that you can follow step by step.
What you'll learn
- Introduction to Web Development
- HTML, CSS and Bootstrap
- Programming Foundation with JavaScript
- Data Structures in JavaScript
- Functional Programming with JavaScript
- Asynchronous activities, Events and DOM
- TypeScript and ReactJS Foundation
- Components
- Handling Data with Forms and Routing
- Redux and Redux Toolkit with Query
- Project and Case Study
- Assignments
HTML
What is Web?
HTML building blocks
Text formatting elements
Structure content with lists and tables
User input with forms
Working with images and media
Navigation with anchors
CSS
Apply styling to HTML page
Fundamental CSS Properties
Box Model
Selectors
Flexbox
Responsive design
Animations and Transitions
Bootstrap
Utility classes
Helpers
Components
Layout creation
Responsive layout
Forms
Icons and Images
Building Blocks
Variables, declarations: var,let and const
Data types
Operators
Expressions
Statements
Blocks and Iteration
if..else
switch...case
while
for
nested for
Logic Development
Conditional programs
Iterative programs
Pattern programs
Accumulation programs
Typecasting
Arrays
Indexing and memory
Creation, reading and updation
Searching, sorting and filtering
Working with scenarios
Duplication and processing
Object Literals and JSON
Properties, keys and values
Creation, accessing and updation
for-in based processing
Array of objects
Working with JSON
Strings
Immutability
String handling
String methods
Array of strings
Working with strings and JSON
Foundation
Declaration and definition
Parameters and arguments
Call by value and reference
Working with functions
Reusability
Types
Function expressions and literals
Firstclass functions and callbacks
Object oriented principles
IIFE and anonymous functions
Arrow functions and default parameters
Scope
Global scope, block scope and closure
Lexical scope
Working with array methods
Methods and this keyword
call, apply and bind
Imperative Element Creation
DOM element creation
Selection, reading, updation and deletion
Styling elements
Generation of user interface
Nodelist vs HTMLCollection
Events
Event listeners, handlers and event binding
Event Object and target
Form handling
Working with events
Working with DOM
AJAX
Asynchronous functions
Event based API call handling
Callbacks and Promises
axios
Working with json-server
Typescript
Types, Functions and execution flow
Classes and class inheritance
Decorators in TypeScript
Organising our application with modules
Interfaces
Setup and Foundation
CDN based ReactJS application
React and ReactDOM library
JSX
Data binding and event handling
React virtual DOM
State and Props
Reusability and refactoring
useState and rendering
Immutability and state updation
List generation and interactivity
Parent-child component communication
Hooks
useEffect
useCallback and useMemo
useRef
React.memo
Custom Hooks
React API
Context API
useContext
Working with Context
Component communication with Context
Data handling with forms
Types of components
Controlled vs uncontrolled components
Class components
Higher Order COmponents
Pure components
CLass component lifecycle
Forms Handling
State management of forms
Validation and error handling
Styling and classes
Formik
Formik error handling
Routing
Configuration and SPA
React Router DOM
BrowserRouter, Route, Link and NavLink
useNavigate and useParams
Parameterised routing
Working With Routing
Website navigation
Function based navigation
Login and logout
Conditional routing
Redux
Configuration of redux store
Reducers and action object
Connect and dispatch
mapStateToProps and mapDispatchToProps
Selectors, reselect and performance
Redux Toolkit
createSlice
Generation of reducer and actions
Selectors
Mutable state updates
Working with Redux Toolkit
Redux Toolkit Query
Configuration of API
Services
Query architecture
json-server CRUD operations
Render JSX element in HTML
Evaluate expression in JSX element in HTML
Evaluate string concatenation in JSX element in HTML
Evaluate logical expression in JSX element in HTML
Print array of numbers in JSX element in HTML
Print array of strings in JSX element in HTML
Print square root of 14 in JSX element in HTML
Print integer part of the number 134.42 in JSX element in HTML
Print String praveen in uppercase in JSX element in HTML
Print String length of praveen in JSX element in HTML
Print reverse of string praveen in JSX
Evaluate addition of two variable values in JSX
Display greatest of two variable values in JSX
Display variable value is even or odd in JSX
Display variable value is positive or negative in JSX
Display greatest variable value of three in JSX
Display different elements conditionally JSX
Display different images conditionally JSX
Conditionally apply url to image in JSX
Print array values in list items in JSX
Print squared array values in list items in JSX
Print array values in h1 elements
Print array values in sorted order in list items in JSX
Print merged array values of given two arrays
Print merged array values in sorted order of given two arrays
Print array strings in list items in JSX
Print array strings ol and ul
Print array strings ol of uppercase strings and ul of lowercase
Print array strings in lowercase in list items
Print array strings length in list items
Print array strings in list items in JSX copy
Print first two characters of array values in h1 elements copy
Print only first character of array values in h1 elements
Print array strings reverse in list items
Print array strings sorted order in list items
Print only the even numbers of array of numbers in list items
Print only the odd numbers of array of numbers in list items
Print only the numbers of array greater
than 25 of numbers
in list items copy
Print flatten array of multiDimentionalArray
Print even numbers in italics and odd numbers in bold in list
Print only the numbers of array less than
25 of numbers
in list items copy
Print the sum of all numbers of array in JSX using reduce method
Print the images from array of image urls
Print the images as list items from array of image urls
Print the images as table cells from array of image urls
Print the object properties in JSX
Print the string object property values in Uppercase in JSX
Print each object in a seperate list for a given array of student objects
Print a table for the given array of students
Print a student details align with gender image
Print the given array of students in cards
Generate galleries using JSX
Generate gallery for the given array of image urls
Generate list of strings for the given array of strings
Generation of table using JSX
GenUI with JSX
Likes dislikes-JSX
Rating-JSX
Todolist-JSX
Apply red color to JSX h1 Element
Apply red color to JSX h1 with green background
Display each array element in flex boxes
Display each string of array in flex boxes
Display each object properties
Display each array object in flex boxes
Display each array object in flex boxes with respective gender images
Display each array object in table
Display array of objects in table with female students row in pink
Display array of objects in table with
female students row in pink
male in blue
Apply the color name stored in a variable to JSX h1
Apply the color names stored in two variable to JSX different h1
Apply the color names stored in two
variable to JSX h1 for color
and backgroundColor
Apply the border width with variable value to JSX h1
Apply green color if variable value is even red for odd
Apply green background color if variable value is even red for odd
Apply green color if variable value is positive red for negative
Apply green color if string length is even red for odd
Display even array value in green and odd in red list items
Display female students in pink background male in blue
Bind event handler to alert something on button click in JSX
Console something on button click
Console event object on button click
Display the event object for a click on
div with 300px width and
200px height with 2px border
Display the clientX clientY position for a
click on div with 300px
width and 200px height with 2px border
copy
Display the text of div on click in console
Console the id of div on click
Display the text of h1 on click in console
Console respective button label click
Console text box value on button click
Display text box value in h1 on button click
Display text box value in uppercase h1 on button click
Display text box value in uppercase h1 on textbox keyup
Display text box value in uppercase h1 on textbox blur
Display text box value in h1 on textbox keyup event
Reset the textbox text on a button click
Display addition of two text box values in
h1 on textbox on button
click
Display substraction of two text box
values in h1 on textbox on
button click
Display result of two text box values in
h1 on textbox on
multiplication and division buttons
Display radio button value on check
Display respective image on radio button value
Display select box value in h1
Display selected checkbox values in console
Display the selected day in h1
Bindevent handler with arguments
Bindevent handler with arguments as index
for list item genereted
from array
Bindevent handler with arguments as values
for list item genereted
from array
Bindevent handler with arguments as values
for list item genereted
from array
of objects
Display values in h1
Display name in h1 id on h2
Display name in h1 id in h2 on button beside student name
Display name in h1 id in h2 on button beside student name copy
Display variable value in h1
Display incremented value variable value in h1 on a button click
Display decremented value variable value in h1 on a button click
Implement counter application
Implement counter application with reset button
Push text box value to an array console the array
Push text box value to an array display in h1
Push text box value to an array display in list items
Todolist with delete button
Implement a clock
Implement a stopwatch
Rendering React component
Evaluate expression in React component
Evaluate string concatenation in React component
Evaluate logical expression in React component
Print array of numbers in React component
Print first two character of array values in React component
Print square root of 14 in React component
Print integer part of the number 134.42 in React component
Print string praveen in uppercase in React component
Print string length of praveen in React component
Print reverse of string praveen in React component
Evaluate addition of two variable values in React component
Display greatest of two variable values in React component
Display variable value is even or odd in React component
Display variable value is positive or negative in React component
Display greatest variable value of three in React component
Display different elements conditionally React component
Display different images conditionally React component
Conditionally apply url to image in React component
Print array strings ol and ul in React component
Print array strings ol of uppercase and ul
of lowercase strings
in React component
Print array values in React component
Print squared array values in list items in React component
Print merged array values of given two arrays in React component
Print merged array values in sorted order
of given two arrays
in React component
Print only the even numbers of array of
numbers in list items
in React component
Print only the odd numbers of array of
numbers in list items in
React component
Print only the numbers of array greater
than 25 of numbers
in list items copy in React component
Print even numbers in italics and odd
numbers in bold in list in
React component
Print the sum of all numbers of array in React component
Print array strings sorted order in list items in React component
Print array strings length in list items in React component
Print array values in list items in React component
Print array strings in list items in React component
Print a table for the given array of students in React component
Print student details along with gender image in React component
Print array values in sorted order in list items in React component
Print flatten array of Multi-dimensional array in React component
Print only first character of array values in React component
Print only the numbers of array less than
25 of numbers in
React component
Print array strings in lowercase in list items in React component
Print array strings reverse in list items in React component
Print the images from array of image urls in React component
Print the images as list items from array
of image urls in
React component
Print the images as table cells from array
of image urls in
React component
Print the object properties in React component
Print the string object property values in
Uppercase in
React component
Print each object in a seperate list for a
given array of student
objects in React component
Print array strings in list items in React component
Print the given array of students in cards in React component
Generate galleries using in React component
Generate list of strings for the given
array of strings in
React component
Generation of table in React component
Apply red color to React Component
Apply red color to React Component with green background
Apply the color name stored in a variable in React Component
Display each string of array in flex boxes in React Component
Display each object properties in React Component
Display each array object in flex boxes in React Component
Display each array object in flex boxes
with respective gender
images in React Component
Apply green background color if variable
value is even red for odd
in React Component
Display each array object in table using React Component
Apply green color if variable value is
positive red for negative in
React Component
Display array of objects in table with
female students row in pink
in React Component
Apply green color if string length is even
red for odd in
React Component
Display array of objects in table with
female students row in pink
male in blue in React Component
Display even array value in green and odd
in red list items in
React Component
Display each array element in flex boxes in React Component
Display female students in pink background
male in blue in
React Component
Apply the color names stored in two variable in React Component
Apply the color names stored in two
variable in React Component
for color and backgroundColor
Apply the border width with variable value in React Component
Apply green color if variable value is
even red for odd
in React Component
Bind event handler to alert something on
button click in
React Component
Console something on button click in React Component
Console event object on button click in React Component
Display the event object for a click on
div with 300px width and 200px
height with 2px border in React Component
Display the clientX clientY position for a
click on div with 300px width
and 200px height with 2px border copy in
React Component
Display the text of div on click in console in React Component
Console the id of div on click in React Component
Display the text of h1 on click in console in React Component
Console respective button label click in React Component
Console text box value on button click in React Component
Display text box value in h1 on button click in React Component
Display text box value in uppercase h1 on
button click in
React Component
Reset the textbox text on a button click in React Component
Display text box value in uppercase h1 on
textbox keyup in
React Component
Display text box value in h1 on textbox
keyup event in
React Component
Display result of two text box values in
h1 on textbox on multiplication
and divsion buttons in React Component
Display addition of two text box values in
h1 on textbox on button
click in React Component
Display radio button value on check in React Component
Display respective image on radio button value in React Component
Display select box value in h1 in React Component
Display selected checkbox values in console in React Component
Bindevent handler with arguments in React Component
Display the selected day in h1 in React Component
Push text box value to an array console the array in React Component
Push text box value to an array display in h1 in React Component
Push text box value to an array display in listitems in React Component
Todolist with delete button in React Component
Implement clock in React Component
Implement rating app in React Component
Implement like dislike app in React Component
Display variable value in h1 in React Component
Display incremented value variable value
in h1 on a button click
in React Component
Display decremented value variable value
in h1 on a button click
in React Component
Implement counter application in React Component
Implement counter application with reset button in React Component
Bindevent handler with arguments as index
for list item generated
from array in React Component
Bindevent handler with arguments as values
for list item generated
from array in React Component
Bindevent handler with arguments as values
for list item generated
from array of objects in React Component
Display values in h1 in React Component
Display name in h1 id on h2 in React Component
Implement stopwatch in React Component
Display name in h1 id in h2 on button
beside student name copy
in React Component
Display name in h1 id in h2 on button
beside student name in
React Component
Display text box value in uppercase h1 on
textbox blur in
React Component
Display substraction of two text box
values in h1 on textbox on
button click in React Component
Vacation planner
Testimonial reviews
Accordion
Shopping cart
Cocktails
Light mode dark mode
Movie DB app
Quiz app
News App
Array rendering in component
Multiple List Genration live
Proj-comp-prop-galleries
props in react
SetInterval based data change
Conditional Styling a table
Conditional Styling class based
Conditional Styling class cards
Conditional Styling icons
Counter
Counter2
Likes and Dislikes button
Likes and Dislikes icons
React-todolist-component
Calculator
Calculator complete
Accordion
Component-state-ex2
Component-state-ex3
Component-state
Controlled-comp-table single state
Image slider
Array rendering with sorting buttons
Array rendering with sorting
Cricket score
Array rendering with sorting radio button
Refactoring-child-parent-comm-project-todolist
React-Component-Reusability-Counter
Sorting table header click
Toggle sorting table header click
Checkboxes
Conditional rendering on radio button input
Handling radio buttons
Radio-button
Select box
Todolist with modal
Controlled-components
Text-box data binding
Controlled-comp-table
IPL team selection
Closure genreationoftable
React-food-cart-billing-level1
React-food-cart-billing-level2
Football project basic
Form validations
Rating
Routing basic using Event handling
Custom-Hooks
Multiple Todolist
Todolist complete project
FrankOrganicClingfish-size_restricted
MultipleTodolistStateMgmt
Project
useRef Project
Parent-child-comm-project-ecom-cart
passing_object_as_props-props-mapp
refactoring_component_with_props-todolist-mapp
Reusable Carousal Component using Props
Styling Components using styled-components library
state modification and rendering
Stopwatch in react
blogpost app in react
passing personal details object using context api
Statemanagement and event handling
todolist with timestamp
preview upload image
Sample shopping cart
higherorder component example
parent child communication example
Performance optimisation using useCallback hook
Performance optimisation using useMemo hook
Changing Focus to Next Input using useRef hook
forwarding focus with useRef forwardRef
Performance optimisation using PureComponents
using_content_api_to_pass_data-contextapi-mapp
useEffect_useRef_hook-lifecycle-mapp
Todolist with Filters using Redux
redux advanced async calls-redux-quiz-submission-mapp
redux state management-redux-quiz-mapp
redux rating app
working with redux map state dispatch async-redux-mapp
Counter with Redux toolkit
Apicommunication with ReduxSaga
Saga Counter
Multiple sagas
redux reselet example
likes dislikes
counter
rating
todolist
Book A Trip
The Book A Trip project utilises Google Maps and helps a user to enter their destination and get the directions to the specified location. It also prints the distance between the two locations. The user can also manually drag the location marker to change their source and destination locations on the map.
Book Mart
The Book Mart project is an e-commerce application which consists of a big list of books that a user can choose from. It lets the user search, sort and filter the books according to title, discount, price or categories. Users can add the books to cart where they can add, remove or increase the number of each book they want to buy. The cart display the total price after deducting the discount and adding delivery charge wherever applicable.
Credo Card
The Credo Card project is a credit card application that displays a customer's credit card information like spending limit, pending transaction, spending availability etc. It allows customers to login according to their credentials and display the details(Go to the live demo and enter email as 'admin' and password as 'password' to see the complete application).
Countries List
The Countries List project displays a list of all countries of the world. This project lets us sort,filer and search the countries list. It lets the user to sort the countries in ascending and descending order of their populations. It also allows users to filter the countries according to region and subregion. It consists of a search box where users can search for a particular country. There is also an option to switch the view between card view and details view. When users click on a particular country, it locates the country on the world map.
Memory Game
The Memory Game project is a basic remembering game where users can score points by remembering the cards displayed on the screen. Initially, the screen displays eight cards consisting of different pairs of pictures. After a certain time, the cards flip and hides the pictures. Players need to remember the picture cards and match them in pairs. Players score points according to the number of pairs they can match. The players can also select the number of rounds they want to play.
₹25000(Offline)
₹20000(Online)
This course includes
- Lectures 50
- Duration 1h 30m
- Skills Beginner
- Language English,Telugu,Hindi
- Certificate Yes
Top Listed Courses
Frontend with Angular
₹20000
Frontend with ReactJS
₹20000
Fullstack with MEAN
₹30000
Fullstack with MERN
₹30000
Programming with Java
₹30000
