INT252
Web App Development with
ReactJS
Lecture 0
Welcome!!!!
Vision
To be a globally recognized school through excellence in
teaching, learning, and research for creating Computer
Science professionals, leaders, and entrepreneurs of the
future contributing to society and industry for sustainable
growth.
Mission
• To build computational skills through hands-on and practice-
based learning with measurable outcomes.
• To establish a strong connect with industry for in-demand
technology driven curriculum.
• To build the infrastructure for meaningful research around
societal problems.
• To nurture future leaders through research-infused education
and lifelong learning.
• To create smart and ethical professionals and entrepreneurs
who are recognized globally
Assessment/ Evaluation
Scheme
• Attendance: 5%
• CA: 45%
• MTT: No MTT
• ETP: 50%
Assessment/ Evaluation
Scheme
• CA1: Visual Implementation (30 Marks)
• CA2: Visual Implementation (30 Marks)
• CA3: Project Mandatory (30 Marks)
• (Note: The CA3 will be allocated in 3rd week and
student will submit it in 11th week)
• End Term Practical: 100 Marks
• CA1 and CA2 consider best 1 out of 2
CA3 Project Rubrics
• Functionality and Deployment(5),
• User Interface(5),
• Novelty/Uniqueness(5),
• Documentation(5),
• Presentation(5),
• Client Involvement(5)
NOTE:- Client involvement depicts the revenue
generated by the students through the client.
Students will be required to submit the proof of
revenue generation
Revised Bloom’s Taxonomy
Course Details
L:2 T:0 P:2
Credits: 3
Course Outcome’s:
Through this course students should be able to
• CO1 :: understand advanced JavaScript concepts
• CO2 :: develop JSX components and use props in
React app
• CO3 :: compose and manipulate states and
should develop an understanding of events &
Course Details
L:2 T:0 P:2
Credits: 3
Course Outcome’s:
• CO4 :: use forms with state and validating the
form for errors and display errors
• CO5 :: make a react app by using HTTP methods
and routing the pages
• CO6 :: validate or debug the react app and
deploy app onto the server
Program Outcomes
PO1: Engineering knowledge: Apply the
knowledge of mathematics, science, engineering
fundamentals, and an engineering specialization to
the solution of complex engineering problems.
PO2: Problem analysis: Identify, formulate,
research literature, and analyze complex
engineering problems reaching substantiated
conclusions using first principles of mathematics,
natural sciences, and engineering sciences.
Program Outcomes
PO3: Design/development of solutions: Design
solutions for complex engineering problems and
design system components or processes that meet
the specified needs with appropriate consideration
for the public health and safety, and the cultural,
societal, and environmental considerations.
PO4: Conduct investigations of complex problems:
Use research-based knowledge and research
methods including design of experiments, analysis
and interpretation of data, and synthesis of the
information to provide valid conclusions.
Program Outcomes
PO5 : Modern tool usage: Create, select, and
apply appropriate techniques, resources, and
modern engineering and IT tools including
prediction and modeling to complex engineering
activities with an understanding of the limitations.
PO6: The engineer and society: Apply reasoning
informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues
and the consequent responsibilities relevant to the
professional engineering practice.
Program Outcomes
PO7: Environment and sustainability::Understand
the impact of the professional engineering
solutions in societal and environmental contexts,
and demonstrate the knowledge of, and need for
sustainable development.
PO8: Ethics::Apply ethical principles and commit
to professional ethics and responsibilities and
norms of the engineering practice.
PO9: Individual and team work::Function
effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary
settings.
Program Outcomes
PO10: Communication: Communicate effectively
on complex engineering activities with the
engineering community and with society at large,
such as, being able to comprehend and write
effective reports and design documentation, make
effective presentations, and give and receive clear
instructions.
PO11: Project management and finance:
Demonstrate knowledge and understanding of the
engineering, management principles and apply the
same to one’s own work, as a member or a leader
in a team, manage projects efficiently in respective
disciplines and multidisciplinary environments
Program Outcomes
PO12: Life-long learning: Recognize the need for,
and have the preparation and ability to engage in
independent and life-long learning in the broadest
context of technological change.
PO13: Competitive Skills: Ability to compete in
national and international technical events and
building the competitive spirit along with having a
good digital footprint.
Program Specific Outcomes
PSO1: Apply acquired skills in software
engineering, networking, security, databases,
intelligent systems, cloud computing and
operating systems to adapt and deploy innovative
software solutions for diverse applications.
PSO2: Apply diverse IT skills to design, develop,
and evaluate innovative solutions for business
environments, considering risks, and utilizing
interdisciplinary knowledge for efficient real-time
projects benefiting society.
Unit 1
• Refreshing JavaScript : ES6 Refresher-
Classes, Arrow Functions, Variables (let, const,
var), Array Methods like .map(), Destructuring,
Spread Operator, Modules
• Introduction to SPA, MPA and React
framework : Best practices of front-end
development, Understanding Single Page
Applications and Multi Page Applications (Real-
World SPAs & React Web Apps, Introduction to
Unit 2
• ReactJS installation : Installing React using
Create React App, React Environment , Folder
Structure, JSX, Understanding Component
Basics, JSX introduction, createElement()
argumets, JSX vs React.createElement() method,
JSX expressions, Rendering Elements into DOM
• Components and styles in React : Creating
components, Class components and Function
components Functional Components, React
Virtual DOM, Props, CSS in React - Inline styling,
CSS stylesheets, CSS Modules, Adding Bootstrap
Unit 3
• Understanding Hooks : Hooks basics, Built-in
hooks, useState, useEffect, useContext, useRef,
useReducer, useCallback, useMemo, custom
hooks
• Events, States and component lifecycle in
React : Event handling in React, Stateless and
Stateful Components, Creating State, Common
pitfalls of state management, Component
Lifecycle
Unit 4
• Working with Forms : Adding forms, Handling
forms, Submitting forms, controlled and
uncontrolled components, Forms validation -
error checking and displaying errors
Unit 5
• HTTP Methods : Fetch() and Axios, GET
Requests, POST Requests, PUT Request and
DELETE Action
• Routing : Setting up routing and routes,
Navigating to pages, Navigating back and next
page, Passing data via Query Params, Passing
data between pages, Fetching data
Unit 6
• Redux : Redux basics, App starting Point for
Redux, Understanding the Redux flow, Store and
Reducer, Connecting Components, Dispatching
actions
• Debugging and Deployment : Debugging the
React App, Building the app, Best practices for
its build & deployment process
List of Practicals
• Demonstrate let, var and const in JavaScript
with an example
• Demonstrate classes, arrow Functions, map() in
JavaScript
• Demonstrate Destructuring, Spread Operator,
Modules
• Demonstrate The difference between JSX and
React.createElement() method in ReactJS
• Implement class components in ReactJS
• Implement function components in ReactJS
List of Practicals
• Demonstrate States in ReactJS
• Demonstrate styling in ReactJS inline
stylesheets, CSS modules
Bootstrap
• Demonstrate hooks in ReactJS.
• Implement event handling in ReactJS
• Implement a form with Redux
• Create a React app with routes
• Create a React app that fetches data from a
public API
• Implement props in ReactJS
Why React is Star Course
Industry Demand:
High: Essential for front-end web development roles
across industries.
Skills Needed: Proficiency in creating and styling web
pages using state,redux,JSX, and hooks for interactive
features.
Product-Based Companies:
Skills Sought: Ability to create responsive and visually
appealing web applications that enhance user
experience.
Service-Based Companies:
Demand: Significant, especially in client-facing projects
and website development services.
Government Jobs:
Relevance: Increasingly important in digital government
initiatives and web-based services.
Books
• Text Books:
1. ADVANCED WEB DEVELOPMENT WITH REACT by
MEHUL MOHAN, BPB PUBLICATIONS
• References:
1. REACT: THE COMPREHENSIVE GUIDE by
SEBASTIAN SPRINGER, SHROFF/O'REILLY
Open Education Resources
• https://www.w3schools.com/react/
react_es6_destructuring.asp
• https://www.javatpoint.com/pros-and-
cons-of-react
• https://www.geeksforgeeks.org/reactjs-
environment-setup/?ref=lbp
• https://www.javatpoint.com/react-
components
• https://www.almabetter.com/bytes/
tutorials/reactjs/reactjs-hooks
• https://www.w3schools.com/react/
react_lifecycle.asp
Open Education Resources
• https://www.cronj.com/blog/learn-stateful-
and-stateless-components-in-reactjs/
• https://www.youtube.com/watch?
v=UvH70UkbyfE
• https://www.youtube.com/watch?
v=UvH70UkbyfE
• https://www.youtube.com/watch?
v=kREAjKyPbSI
Thank You
