ACKNOWLEDGEMENT

The Internship opportunity I had with “FULL STACK WEB

DEVELOPMENT WITH MERN ” was a wonderful experience for lessons of life
and professional development. Therefore I consider myself as a very obliged
individual to be the part of PHOENIX SOFTECH internship program. I am
thankful also for having a chance to meet so many people and professionals who
led me through this internship period.

We would like to express our deep sense of gratitude to our respected

Principal Dr.C.Vasanthanayaki., M.E., Ph.D., who has bestowed the kind grace
and affection of us in accomplishing this internship.

Sincere thanks to Dr. C. RANI, M.E., Ph.D., Head of the Department of

Computer Science and Engineering on providing facilities to attend the internship
in PHOENIX SOFTECH, Madurai and utilize all the facilities in this college.

We would like to thank our faculty adviser Mrs.R.VIMALA M.E., Assistant

Professor , Department of Computer Science and Engineering, who guided us
throughout the entire phase of this internship.

It is her motivation and guidance which made us explore this internship.

It is our opportunity to express gratitude and sincere thanks to our guide

Dr.B.Sivaranjani M.Tech., Ph.D., Assistant Professor , Department of Computer
Science and Engineering who gave us the motivation and guided us to do this
internship.

I express my deepest thanks to the PHOENIX SOFTECH members for

taking part in useful decision and giving necessary advices, guidance and arranged
all facilities to make things easier.

I choose this moment to acknowledge your contribution gratefully.

I perceive this opportunity as a big milestone in my professional

development. I will strive to use gained skills and knowledge in the best possible
way, and I will continue to work on their improvement, in order to attain the gist of
our profession.

1
 CONTENTS

Acknowledgement

Chapter 1: Company Profile

Chapter 2: Basic HTML Concepts

2.1: Introduction to HTML
2.2: Text formatting tags
2.3: Multimedia Elements
2.4: Forms and user input
2.5:Semantic Elements

Chapter 3: BASIC CSS CONCEPTS

3.1: Introduction to CSS
3.2: Advanced CSS selectors
3.3: CSS Layout Techniques
3.4: Flexbox Layout
3.5: CSS Grid Layout
3.6 :CSS Animations and Transitions

Chapter 4: Node JS
4.1 Introduction to Node.js
4.2 Node.js HTTP Module: Reading the Query String

Chapter 5: Express JS
5.1 Express JS Http Methods, URL Building
5.2 Express JS – MySQL, Mongo DB

Chapter 6: React JS
6.1 Introduction to React
6.2 Core Concepts of React
6.3 Managing State in React Components and props
6.4 React Lifecycle Methods and Hooks

Chapter 7:Conclusion

Chapter 8:Gallery

2
 CHAPTER 1
COMPANY PROFILE

Phoenix Softech, based in Madurai, is a trusted IT solutions provider known for its
wide-ranging services, including website design, web application development,
search engine optimization (SEO), and vehicle tracking systems.
Phoenix Softech’s team of experienced professionals collaborates closely with
clients to understand their goals, providing expertise at every stage, from planning
and design to implementation and support.
Vision
 To become a leader in IT solutions by continually advancing technology to
create substantial value for clients.
 To empower businesses with customized digital tools that drive growth,
enhance operational efficiency, and provide a competitive advantage in an
evolving marketplace.
 To establish Phoenix Softech as a preferred technology partner for
businesses by consistently delivering reliable, innovative solutions.
Mission
 To provide high-quality IT solutions that align with each client’s business
goals, delivering expertise in design, development, and strategic digital
solutions.
 To deliver tailored services that evolve with the client’s needs, ensuring
long-term reliability and measurable results.
 To create collaborative client relationships, emphasizing continual
enhancement of systems and processes to achieve optimal project outcomes.

3
 CHAPTER 2
BASICS HTML CONCEPTS

2.1 Introduction to HTML

HTML, short for Hypertext Markup Language, is the standard language for
creating and organizing content on web pages. It’s a markup language that defines
the structure of a webpage using elements and tags. Each tag in HTML specifies a
piece of content, such as headings, paragraphs, images, links, or interactive forms,
making it essential for web developers to build and organize content that browsers
can interpret and display.

Core Structure of an HTML Document

An HTML document has a basic structure that ensures browsers can correctly
interpret the content:

Document Declaration: Every HTML file starts with <!DOCTYPE html>, which
tells the browser it’s an HTML5 document, the latest standard for web pages.
HTML Root Element: The <html> tag wraps all content on the page, indicating the
start and end of the HTML code.
Head Section (<head>): Contains meta-information like the page’s title, character
set, and links to external resources (e.g., CSS, JavaScript files).
Title (<title>): Sets the page’s title that appears on browser tabs.
Meta Tags: Provide metadata like character encoding (<meta charset="UTF-8">)
and descriptions, which improve SEO.
Body Section (<body>): Contains the main content visible to users, such as text,
images, links, and interactive forms.

4
Key HTML Tags and Their Uses

2.2 Text Formatting Tags

HTML uses tags to format text, making content readable and structured:

Headings (<h1> to <h6>): Define page titles and subtitles, with <h1> as the main
heading and <h6> as the smallest.
Paragraphs (<p>): Group blocks of text, creating distinct sections within the
content.
Line Break (<br>): Inserts a line break within text.
Bold and Italic Text:
<strong> and <em> tags convey importance and emphasis, respectively.
<b> and <i> tags also bold or italicize text but without added meaning.

2.3 Multimedia Elements

HTML supports images, videos, and audio, enhancing interactivity and user
engagement:

Images (<img src="URL" alt="description">): Adds images to a page. The alt

attribute provides text descriptions for accessibility.
Videos (<video src="URL" controls>): Embeds videos with playback controls.
Audio (<audio src="URL" controls>): Embeds audio files with playback options.
Links and Navigation
Hyperlinks allow users to navigate between web pages and resources:

Anchor (<a href="URL">): Creates clickable links to other pages or resources.

Links can open in new tabs using the target="_blank" attribute.

5
Navigation Lists: Organize links within a <nav> tag for easy navigation.
Commonly structured as unordered lists (<ul>) with <li> items.

Lists
HTML supports two main types of lists:

Unordered Lists (<ul>): Displays bullet points; each item is marked with <li>.
Ordered Lists (<ol>): Displays numbered items, with each list item wrapped in an
<li> tag.

Tables
Tables organize content into rows and columns, using:

<table>: Defines the table.

<tr>: Table rows.
<th>: Header cells, typically bolded.
<td>: Data cells in each row.
Attributes and Their Importance
HTML attributes enhance tags with additional information or behaviors:

id: Assigns a unique identifier to elements, useful for linking sections or applying
unique styles.
class: Groups elements for collective styling, useful in CSS.
src and href: Define sources for images, videos, or links.
alt: Provides alternative text for images, improving accessibility.

6
2.4 Forms and User Input
HTML forms enable user interactions, allowing data submission to servers:

Form Element (<form action="URL" method="POST">): Defines the form and

specifies where the data will be sent.
Input Types (<input type="text">, <input type="password">, <input
type="email">): Collect user data in different formats.
Textarea (<textarea>): Allows multiline text input, ideal for comments or
messages.
Select (<select>): Creates dropdowns with multiple options (<option>).
Buttons: Submit (<button type="submit">) triggers form submission, and Reset
(<button type="reset">) clears form entries.

2.5 Semantic Elements

HTML5 introduced semantic tags, improving code readability and accessibility:

<header>: Defines the top section of a page, often containing logos or navigation.
<nav>: Contains navigational links, helping search engines understand site
structure.
<main>: Wraps the main content, distinguishing it from sidebars or footers.
<section>: Groups related content, often used in long articles.
<footer>: Defines the footer, which often includes copyright info, links, and
contact information.

7
 CHAPTER 3
BASIC CSS CONCEPTS

3.1Introduction to CSS
CSS, or Cascading Style Sheets, is a language used to style and layout web pages.
While HTML provides the structure of a webpage, CSS handles the visual
appearance, including colors, fonts, layout, and spacing. By separating content
(HTML) from presentation (CSS), CSS allows for greater design flexibility and
efficiency in web development.

Core Concepts in CSS

Selectors
CSS selectors are used to target HTML elements for styling. Common selectors
include:

Element Selector: Targets all elements of a specific type, e.g., p { color: blue; } for
all <p> tags.
Class Selector: Targets elements with a specific class, using a period (.) before the
class name, e.g., .intro { font-size: 18px; }.
ID Selector: Targets a unique element with an ID, using a hash (#) before the ID,
e.g., #header { background-color: gray; }.
Attribute Selector: Targets elements with a specific attribute, e.g., [type="text"]
{ color: red; } for input fields of type text.
Universal Selector (*): Targets all elements on the page.
Combinator Selectors: Target elements based on their relationships. For example:
Descendant selector (space): div p targets all <p> elements inside <div>.

8
Child selector (>): div > p targets only direct child <p> elements within <div>.
Properties and Values
CSS properties define the styles applied to selected elements, while values specify
the style’s exact characteristics. For example, in color: blue;, color is the property
and blue is the value.

The Cascade and Inheritance

CSS styles "cascade" based on order and specificity. Later rules can override
earlier ones, and more specific selectors take precedence over general ones. Some
properties are also inherited by child elements (like font styles), while others (like
margin and padding) are not. The cascading and inheritance aspects of CSS allow
for hierarchical styling across the entire webpage.

Types of CSS Styling

Inline CSS
Inline styles apply directly within an HTML element using the style attribute.
While useful for quick fixes or single-use cases, it’s less efficient for large-scale
styling.
Example: <h1 style="color: green;">Hello World</h1>

Internal CSS
Internal CSS is placed within the <style> tag in the HTML document's <head>.
This is useful for styling a single page with a unique design, but it doesn’t apply
across multiple pages.

html

9
Copy code
<style>
body {
background-color: lightblue;
}
</style>
External CSS
External stylesheets, written in .css files, are linked to the HTML document using
the <link> tag in the <head>. External CSS allows styles to be applied across
multiple pages, improving maintainability and consistency.

Eg:
<link rel="stylesheet" href="styles.css">
Essential CSS Properties

Color and Background

color: Sets text color. Example: color: #333;

background-color: Sets the background color of an element. Example: background-
color: lightgrey;
background-image: Adds a background image. Example: background-image:
url("image.jpg");
Font and Text Styling

font-family: Specifies the font type. Example: font-family: Arial, sans-serif;

font-size: Defines text size. Example: font-size: 16px;
font-weight: Controls the thickness of the font (e.g., bold, normal).

10
text-align: Aligns text within an element (e.g., left, center, right).
text-decoration: Adds effects like underline, overline, or line-through.

3.2 Advanced CSS Selectors

CSS provides several advanced selectors that allow for highly specific targeting of
elements within a webpage. These advanced selectors are particularly useful for
efficient styling, allowing developers to create more flexible and powerful designs.

Pseudo-Classes

Pseudo-classes allow you to define special states of elements that cannot be

selected using normal selectors. Examples include:

 :hover: Targets an element when it is hovered over by the mouse.

CSS

a:hover {

color: red;

 :focus: Targets an element when it gains focus, often used with form
elements.

11
CSS

input:focus {

border-color: blue;

 :nth-child(n): Targets elements based on their position in a parent element,

such as every second list item.

CSS

li:nth-child(2) {

background-color: yellow;

 :first-child and :last-child: Targets the first or last child element within a
parent.

CSS

p:first-child {

font-weight: bold;

Pseudo-Elements

12
Pseudo-elements allow you to style specific parts of an element, such as the first
letter, first line, or content inserted before or after an element.

 ::before: Inserts content before an element's content.

CSS

h1::before {

content: "★ ";

color: gold;

 ::after: Inserts content after an element’s content.

CSS

p::after {

content: " (read more)";

color: blue;

 ::first-letter: Styles the first letter of a block element, such as making it

larger.

13
CSS

p::first-letter {

font-size: 2em;

color: red;

3.3 CSS Layout Techniques

CSS provides multiple techniques for laying out elements on a webpage, each with
its own use cases. These techniques include traditional methods like floats and
positioning, as well as modern methods such as Flexbox and CSS Grid.

Floats

Floats have traditionally been used for layout purposes, such as creating multi-
column designs or aligning images within text. However, with the advent of newer
layout systems like Flexbox and Grid, floats are used less often.

To create a basic two-column layout using floats:

CSS

.left-column {

float: left;

14
 width: 50%;

.right-column {

float: left;

width: 50%;

To clear the float, the clear property is often used to prevent elements from floating
next to each other unintentionally:

CSS

.clear {

clear: both;

Positioning

CSS positioning allows for more control over where elements appear on a page.
There are several types of positioning:

 Static: The default positioning for all elements, where they appear in the
normal document flow.

15
CSS

.static {

position: static;

 Relative: The element is positioned relative to its normal position.

CSS

.relative {

position: relative;

top: 20px;

 Absolute: The element is positioned relative to the nearest positioned

ancestor (non-static). If there is no positioned ancestor, it will be positioned
relative to the initial containing block (usually the viewport).

CSS

.absolute {

position: absolute;

top: 50px;

right: 10px;

16
}

 Fixed: The element is positioned relative to the viewport, meaning it stays in

place even when the page is scrolled.

CSS

.fixed {

position: fixed;

top: 10px;

left: 10px;

 Sticky: A hybrid of relative and fixed positioning. The element is treated as

relative until the page is scrolled past a defined point, at which it becomes
fixed.

CSS

.sticky {

position: sticky;

top: 0;

17
3.4 Flexbox Layout

Flexbox (Flexible Box Layout) is a modern layout module in CSS that enables
more efficient arrangement of elements within a container. Flexbox is ideal for
building responsive layouts as it adapts to screen sizes and content changes.

Flexbox Properties

 display: flex: Defines the container as a flex container.

CSS

.container {

display: flex;

 justify-content: Aligns items along the main axis (horizontally for row-based
layouts).

CSS

.container {

justify-content: center;

Common values for justify-content include:

18
 o flex-start: Aligns items to the start of the container.
o flex-end: Aligns items to the end of the container.
o center: Centers items.
o space-between: Distributes items with space between them.
o space-around: Distributes items with space around them.
 align-items: Aligns items along the cross axis (vertically for row-based
layouts).

CSS

.container {

align-items: stretch;

Common values for align-items include:

o flex-start: Aligns items to the top of the container.

o flex-end: Aligns items to the bottom of the container.
o center: Centers items vertically.
o stretch: Stretches items to fill the container.
 flex-direction: Defines the direction of the flex items.

CSS

.container {

flex-direction: row; /* Default: items arranged horizontally */

19
Common values for flex-direction include:

o row: Horizontal layout.

o column: Vertical layout.
o row-reverse: Reversed horizontal layout.
o column-reverse: Reversed vertical layout.
 flex-wrap: Allows items to wrap onto multiple lines if necessary.

CSS

.container {

flex-wrap: wrap;

Common values for flex-wrap include:

o nowrap: All items remain in a single line.

o wrap: Items wrap to new lines when necessary.

3.5 CSS Grid Layout

CSS Grid Layout is a powerful two-dimensional layout system that allows you to
design complex layouts with ease. It works with both rows and columns, making it
a perfect choice for creating more intricate grid-based designs.

Basic Grid Setup

20
  display: grid: Defines the container as a grid container.

CSS

.container {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-gap: 10px;

In the above example, grid-template-columns defines three equal-width columns,

and grid-gap adds spacing between grid items.

Defining Grid Items

Grid items are automatically placed into the grid according to the specified
columns and rows. You can control their placement using properties like grid-
column and grid-row.

 grid-column: Defines where an item should start and end in the horizontal
direction.

CSS

21
.item1 {

grid-column: 1 / 3; /* Spans from column 1 to column 3 */

 grid-row: Defines where an item should start and end in the vertical
direction.

CSS

.item2 {

grid-row: 2 / 4; /* Spans from row 2 to row 4 */

Advanced Grid Features

 grid-template-areas: Assigns names to grid sections, making it easier to

position items by name.

CSS

.container {

grid-template-areas:

"header header header"

"main content content"

"footer footer footer";

22
}

.header { grid-area: header; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Grid Layout allows for more flexibility than Flexbox when creating more complex,
multi-dimensional layouts.

3.6 CSS Animations and Transitions

CSS provides powerful tools for adding animations and transitions to web
elements. These effects can enhance user experience by providing visual feedback
and improving interactivity.

CSS Transitions

A CSS transition allows you to change property values smoothly (over a specified
duration) when an element is in a different state, such as on hover.

Example of a color change on hover:

CSS

button {

23
 background-color: blue;

transition: background-color 0.5s ease;

button:hover {

background-color: green;

CSS Animations

CSS animations allow you to create complex, keyframe-based animations that

define how an element should change at specific intervals.

Example of a bouncing ball animation:

@keyframes bounce {

0% {

transform: translateY(0);

50% {

transform: translateY(-30px);

24
 }

100% {

transform: translateY(0);

.ball {

animation: bounce 2s infinite;

CHAPTER 4
NODE JS
Node JS Introduction
4.1 Introduction to Node.js

Node.js is an open-source, cross-platform runtime environment that enables

developers to run JavaScript on the server side, transforming it from a browser-
only language into a full-stack language. This shift allows developers to use

25
JavaScript for both client-side and server-side scripting, improving development
speed and efficiency.
Key Features and Capabilities of Node.js
1. Free and Open Source
Node.js is freely available, which promotes a large community of
contributors who improve and expand its functionality.
2. Cross-Platform Compatibility
Node.js runs on various platforms, including Windows, Linux, Unix, and
macOS, making it highly adaptable for different server environments.
3. Dynamic Page Content Generation
Node.js can dynamically generate web pages by creating, reading, and
manipulating content on the server, allowing for personalized and interactive
user experiences.
4. File Handling
Node.js can create, read, write, delete, and close files on the server, making
it ideal for applications needing to manage content dynamically.
5. Form Data Collection
Node.js can process data submitted from HTML forms, enabling user
interaction features such as registrations, feedback, and orders.
6. Database Interaction
Node.js supports adding, deleting, and modifying data in databases, working
well with SQL databases (e.g., MySQL) and NoSQL databases (e.g.,
MongoDB).
Advantages of Node.js in Web Development
1. Efficient and Scalable
With its non-blocking, asynchronous model, Node.js can handle multiple

26
 requests simultaneously, which is essential for high-performance, scalable
applications.
2. Unified Language for Full-Stack Development
Node.js enables developers to use JavaScript on both the client and server
sides, reducing the need for different languages and making development
faster and more cohesive.
3. Large Ecosystem and Community Support
Node.js has a vast ecosystem of libraries in npm (Node Package Manager),
allowing developers to quickly integrate pre-built functionalities.
4. Real-Time Capabilities
Node.js is ideal for real-time applications like chat apps and gaming, thanks
to frameworks like Socket.io, which enables instant, bidirectional
communication between client and server.
5. Microservices and API Development
Node.js is well-suited for APIs and microservices, which improve scalability
and maintainability by allowing different parts of an application to function
independently.

Example: -
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('Hello World!');
}).listen(8080);

4.2 Node.js HTTP Module: Reading the Query String

27
Introduction to the HTTP Module

The HTTP module in Node.js provides the ability to build basic web servers and
handle requests and responses between clients and servers. This module allows
developers to create a server, handle HTTP requests, and send responses, making it
foundational for building web applications with Node.js.

Creating a Simple Server in Node.js

The http.createServer() method is used to create a basic HTTP server. This method
takes a callback function with two arguments:
 req (the request): Represents the client's request, containing information
such as the URL and headers.
 res (the response): Used to send data back to the client.

Reading the Query String Using the Request Object

When a client makes a request, the request object (req) represents the incoming
message. This object includes the URL property, which stores the part of the URL
that follows the domain name. Developers can access and manipulate this URL to
handle different paths or retrieve query string parameters, allowing for more
interactive and dynamic web applications.
Example of Reading the Query String in Node.js
In the example below, a basic server is created using the http.createServer()
method. The server will respond with the contents of the URL path provided by the
client.
Program:
var http = require('http'); // Import the HTTP module

28
// Create a server
http.createServer(function (req, res) {
// Set response header with status code 200 (OK) and content type as HTML
res.writeHead(200, {'Content-Type': 'text/html'});

// Write the URL path back to the client as a response

res.write(req.url);

// End the response

res.end();
}).listen(8080); // Listen on port 8080

CHAPTER 5
EXPRESS JS

5.1 Express JS Http Methods, URL Building

The HTTP method is supplied in the request and specifies the operation that the
client has requested.

29
GET
The GET method requests a representation of the specified resource. Requests
using GET should only retrieve data and should have no other effect.

POST
The POST method requests that the server accept the data enclosed in the request
as a new object/entity of the resource identified by the URI.
ExpressJS - URL Building
We can now define routes, but those are static or fixed. To use the dynamic routes,
we SHOULD provide different types of routes. Using dynamic routes allows us to
pass parameters and process based on them.

Example: -
var express = require('express');
var app = express();
app.get('/things/:name/:id', function(req, res) {
res.send('id: ' + req.params.id + ' and name: ' + req.params.name);
});
app.listen(3000);

5.2 Express JS – MySQL, Mongo DB

for MySQL Database:-
app.post('/addCustomer', urlencodedParser, function(req, res){
accno=req.body.t1; name=req.body.t2; amt=req.body.t3;
sql="insert into customers values("+accno+",'"+name+"',"+amt+")";
con.query(sql, function (err, data, fields) { if (err) throw err; });
res.render("custregister",{msg:"Customer Record Inserted"}); });

30
for MongoDb Database:-
mongoose.connect('mongodb://localhost:27017/ayyappan', {
useNewUrlParser: true, useUnifiedTopology: true,
});
app.get('/customers', async (req, res) => {
try {
const customers = await Customers.find(); res.json(customers);
} catch (error) { console.error(error);
res.status(500).json({ error: 'Internal Server Error' });
}
});
CHAPTER 6
REACT JS
6.1 Introduction to React

What is React?
React is a JavaScript library developed by Facebook for creating dynamic,
component-driven UIs, particularly for single-page applications. It enables
developers to build applications that update dynamically without full-page reloads.
Declarative and Component-Based Philosophy
React’s declarative model and component-based structure make it easy to break
down UIs into manageable, reusable elements, facilitating code reuse, testing, and
maintenance.

React Development Environment

31
Installing Node.js and npm
Describe the steps to install Node.js and npm, which are necessary for handling
dependencies and running React applications.
Creating a React Project with create-react-app
Walk through setting up a React project using npx create-react-app. Explain the
folder structure, including src (main application code) and public (public assets).
Running a React App
Cover how to run the server using npm start and explain the development
environment with hot-reloading, which refreshes automatically when files are
saved.

6.2 Core Concepts of React

Components
Define Class and Function Components. Discuss how React components
encapsulate code, style, and behavior, making them reusable UI blocks.
Props: Explain props (short for properties) as read-only values passed from parent
to child components.
State: Describe state as a data store for dynamic values within components. Each
component can maintain its state to render data that changes over time.

JSX (JavaScript Syntax Extension)

Explain JSX syntax, which enables HTML-like code within JavaScript files,
improving code readability.
Example Code:
javascript
const name = "React";

32
const element = <h1>Hello, {name}!</h1>;
Example Diagram: Visualize how props and state flow between components.

Virtual DOM and Performance Optimization

What is the Virtual DOM?

Define the Virtual DOM as a memory-resident representation of the actual DOM.
React’s Virtual DOM enables efficient rendering and DOM manipulation.

How the Virtual DOM Works

When a change occurs, React updates the Virtual DOM, then compares it with the
real DOM to only update the changed elements.
Diffing and Reconciliation Process
Introduce React’s diffing algorithm that detects and updates the modified parts in
the real DOM.

Benefits of Virtual DOM:

Improved rendering speed, reduced memory usage, and enhanced user experience.

ReactDOM for DOM Interaction

ReactDOM provides methods to render React components into the browser’s

DOM. Explain the render() function, which connects React with the DOM.
Example of Rendering Elements and Components

33
Render simple HTML and components within the root element, demonstrating how
the virtual and actual DOM interact.

Example Code:

const element = <h1>Hello, World!</h1>;

const container = document.getElementById('root');
ReactDOM.render(element, container);

6.3 Managing State in React Components and props

Using State in Class Components
Describe how state is initialized in Class components and modified using
setState().

State in Function Components with Hooks

Explain the useState hook to manage state within function components, showing
how it makes components simpler and more concise.
State Lifecycle and Re-renders
Detail how state updates trigger re-renders, making UIs dynamic and responsive.

Example Code:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

34
 return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}

Passing Data with Props

What are Props?

Explain props as a mechanism to pass data from parent to child components,
enabling customizability and component reusability.
Reusability through Props
Show how passing props allows components to render different data without
rewriting logic.

Props Example:
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
return <Greeting name="Alice" />;
}

6.4 React Lifecycle Methods and Hooks

35
Lifecycle Methods in Class Components

Describe important lifecycle methods such as componentDidMount,

componentDidUpdate, and componentWillUnmount, which allow actions at
specific stages of a component’s life.
Using Hooks for Side Effects in Function Components
Introduce useEffect as a replacement for lifecycle methods, enabling side effects
(like API calls) in function components.
Example Code with useEffect:

import React, { useEffect } from 'react';

function Timer() {
useEffect(() => {
console.log('Mounted');
return () => console.log('Unmounted');
}, []);
return <div>Timer Component</div>;
}

Building and Styling Components

CSS Styling in React
Inline styles in JSX, CSS modules for local styles, and CSS-in-JS libraries for
custom styling solutions.

36
Example Styling Approaches
Example of inline styling:
const style = { color: 'blue', fontSize: '20px' };
return <h1 style={style}>Styled Text</h1>;

Setting up React Router

Install react-router-dom for client-side routing, enabling single-page applications
with multiple views.
Using Routes and Links
Explain <Route /> for defining routes and <Link /> for in-app navigation.
Example Code with Routing:
JAVASCRIPT
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
return (
<Router>
<nav>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</Router>
);
}

37
 CHAPTER 7
CONCLUSION

The internship at Phoenix Softech focused on Full-Stack Web Development,

covering both front-end and back-end technologies. Starting with the
fundamentals, participants learned HTML, CSS, and JavaScript for creating
dynamic, responsive user interfaces, followed by in-depth training in frameworks
like React for front-end development. On the back-end, the program introduced
Node.js and Express.js, teaching participants to develop efficient server-side
applications. Additionally, they worked with MongoDB to manage and manipulate
databases, learning to store and retrieve data effectively.

Through practical projects, interns applied their skills by building complete web
applications, overcoming challenges in user experience, data handling, and server
management. By the end of the internship, participants gained hands-on expertise
in full-stack development and a solid understanding of building, deploying, and
maintaining web applications. This experience equipped interns with industry-
relevant skills and real-world project exposure, preparing them for future roles in
web development.

CHAPTER 8
GALLERY

38
39