RAJASTHAN TECHNICAL UNIVERSITY, KOTA
Industrial Training Presentation – 2025
SUBMITTED TO: PRESENTATION BY:
Department of Computer Science
Mrs. Amrata Pupneja Name: Altaf Maniyar
Rajasthan Technical University, Kota (Rajasthan)
College Roll No. 22/259
Univ. Roll No 22EUCCS007
My Web Development Journey
This presentation outlines my internship
experience in web development, with a specific
focus on a quick e-commerce project. It will
cover the essential skills I acquired, the
technologies I utilized, and the significant
impact this project had on my professional
growth and understanding of the industry.
1
Contents
• Introduction
• Objectives
• What is React?
• What is React Components?
• Structure of React Components
• What is JSX?
• Components Life Cycle
• Running a React Application
• Project Overview
• Future Scope
• Conclusion
2
Objectives of Internship
• Gain hands-on experience in developing responsive and scalable web
applications using [Link].
• Understand and implement component-based architecture and state
management effectively.
• Apply modern front-end tools and libraries such as Tailwind CSS,
Redux, and React Router in projects.
• Collaborate in a team environment using Git, GitHub, and Agile
development practices.
3
What is React?
- React is a Javascript framework that focuses on declarative syntax
and virtualization of DOM.
- It is an open-source Javascript library, Developed by Meta in 2013.
- It provides a declarative and efficient way to create interactive UI components.
- It allows building more reusable and maintainable UI components
with ease.
4
Virtual DOM
- A Virtual DOM is a lightweight copy of the real DOM.
- Traditionally, only way to change content dynamically on
web was to manipulate the real DOM.
- React's virtual DOM allows for efficient updates and
selective rendering, resulting in faster and smoother
user experiences.
5
Component-based Architecture
- ReactJS follows a component-based architecture, where UIs
are divided into reusable components.
- Traditional web development often involves a mix of HTML,
CSS, and JavaScript, leading to tightly coupled code.
- React's component-based approach promotes modularity,
reusability, and easier maintenance of code.
6
Unidirectional Data Flow
- ReactJS enforces a unidirectional data flow, also known
as one-way binding.
- Traditional web development often involves two-way data binding,
where changes in one part of the application affect others,
making it harder to track and manage data changes.
- React's unidirectional data flow simplifies data management,
reducing the likelihood of bugs and making the application
easier to reason about.
7
What is a React Component?
- ReactJS follows a component-based architecture, where UIs
are composed of reusable building blocks called components.
- A React component is a JavaScript function or class that
returns a JSX (JavaScript XML) representation of the UI.
- It encapsulates the UI logic and state, making it
reusable and modular.
8
Structure of React Component
- Props
- Props allow passing data from parent components to child components.
- Props are read-only and should not be modified within the component.
- State
- State represents the mutable data within a component.
- State is typically managed within class components using the [Link] object and the
setState method.
- Functional components can also have state using React hooks like useState.
- Styling
- Styling can be applied to React components using CSS classes, inline styles, or CSS-
in-JS libraries.
- CSS classes can be added using the className attribute in JSX.
9
What is JSX?
- JSX (JavaScript XML) is a syntax extension for
JavaScript used in React.
- JSX allows you to write HTML-like code within JavaScript,
making it easier to create and manipulate the UI.
- JSX allows embedding JavaScript expressions within
curly braces {}.
- JSX needs to be compiled into plain JavaScript to be
understood by the browser.
10
Component Life Cycle
- React components have a life cycle consisting of different phases and methods that are
executed at specific times.
- The mounting phase is when a new component is
created and inserted into the DOM.
- The updating phase is when the component updates
or re-renders. This reaction is triggered when the
props are updated or when the state is updated.
11
Life Cycle Hooks
- componentDidMount()
- This hook is called after a component is mounted (rendered for the first time) in the DOM.
- componentDidUpdate(prevProps, prevState)
- This hook is called after a component is updated and re-rendered in response to changes in props or state.
- componentWillUnmount()
- This hook is called just before a component is unmounted and removed from the DOM.
- shouldComponentUpdate(nextProps, nextState)
- This hook is called before a component is re-rendered and allows you to control if the re-rendering should
occur.
12
. Project Overview
React Ecommerce is a real-time e-commerce Clothes, Footwear, and
daily usage items delivery platform, inspired by successful models like
Blinkit, Instamart, and Dealshare. Our core mission is to provide users
with a seamless experience to browse products, add items to their cart,
and place quick delivery orders.
13
Snapshot of Project
14
Source code
15
16
Key Features
React E-commerce is engineered with a suite of powerful features designed to
enhance both user and administrator experiences.
• Effortless Product Management. • Streamlined Shopping Cart.
• Powered by Clerk for robust and • Smooth checkout flow from
easy login/signup. selection to purchase.
• Secure User Authentication. • Responsive Across Devices.
• Add, view, and manage products • Optimized for seamless
with intuitive controls experience on any screen
size.
17
Future Scope
At present, getting a job in our country is a challenge. It has become very difficult
for a newly passed student to get a job with a promising salary. Similarly, web
developers have the opportunity to get better pay and better positions if they are
very skilled and have high performance. There are many opportunities and scope for
a web developer like,.
• Software Engineer.
• IT Engineer
• Framework Expert.
• Security Engineer.
• 18
Conclusion
The need for internship is more emergent as one need to be oriented with self-
learning capacities required at a very short notice in industry. Got to know the
industrial standards, the skills that are required to help us contribute and grow with
the industry, the ability of learning by our own, logical thinking and many more.
The internship program has made me understand the career opportunities that can
be explored. An understanding is grown about the lifelong learning one need to
sustain in the industry and the curious and openminded attitude one need to have
for the same.
The internship helped in improving the interpersonal skills. In this internship, we
learnt how to design web pages. The trainer also helped us in improving our logical
thinking by giving us small assignments to write our own codes.
19
Certificate
20
Thank You!
21
