React Js.

Development
(Photo Editor Using React.Js)

Submitted in Partial fulfillment of the requirements for the degree of

BACHELOR OF TECHNOLOGY in Computer Engineering

Weeks Summer Industrial Training Report

Submitted by

Pradeep Singh
Roll No. – 2124388

I.K. GUJRAL PUNJAB TECHNICAL UNIVERSITY,

JALANDHAR
 Training Details

• Topic : React.Js

• Mode of Training : On-Site

• Start Date : 03 / 07 / 2023

• End Date : 16 / 08 / 2023

• Duration : 6 Week

Technology used

• HTML

• CSS

• JAVASCRIPT

• REACT
 ACKNOWLEDGEMENT

The Training opportunity I had with Solitaire Infosys provided a great environment for
learning, enhancing and developing professional skills of myself. I feel extremely honored as I
was provided with an opportunity to be a part of the esteemed organization.
The satisfaction that accompanies the successful completion of any task would be incomplete
without the mention of people whose ceaseless cooperation made it possible, whose constant
guidance and encouragement crown all efforts with success. I am grateful to the instructor
Mr. Vikas and Mr. Ashish who led me through this learning period. Without their support, this
project would not have been possible. I choose this opportunity to acknowledge his
contribution gratefully.
My best and fond regards with deep sense of gratitude to Ms. Himanshi (Technical Assistant )
for their everlasting and precious guidance and encouragement from time to time which were
extremely valuable for my theoretical and practical study.
I would also like to acknowledge my hearty gratitude towards my In charge Dr. Anshu Bhasin
and all the professors at IKGPTU, who taught the fundamentals essential for undertaking such a
project. Without their guidance it would have been extremely difficult to grasp and visualize the
project theoretically.

Signature of the Student

 Table of Contents

Chapter Contents Page No.

1 About the Company

2 Introduction

3 About React Js

4 Design and Implementation

5 Future Work

6 Conclusion
 ABOUT THE COMPANY

Solitaire Infosystems Pvt. Ltd. is an acclaimed IT service provider contributing its part in
the development of many businesses around the globe. We socialize with our clients to
get a superior cognizance of their business and requirements and help them in fabricating
websites and applications for their business. Founded in 2011 by a dynamic duo with the
same aim and zeal, we have come a long way in satisfying our clients.
We are serving our clients with the world-class services for more than seven years now.
The clients are delivered with the best IT solutions after we have developed a great
understanding of their business and requirements. Our team works on the client projects
like its own and that is the reason why we hold the edge in the league.
With every project that we deliver, we deliver our respect, creativity, quality, transparency,
and teamwork to our clients. We have the experience, expertise, and capabilities to enable
organizations to accelerate their service processes in every possible way. We are known
for our excellent customer satisfaction, cost-effectiveness, and innovative skills that are
unparalleled.

OUR VISION

We visualize becoming the most trusted and respected IT service provider across the
globe with our vibrant, dynamic, and value-based IT solutions that revolve around our
clients, team, and international standards. Solitaire Infosystems Pvt. Ltd. envisions
becoming a reliable partner to all its clients and focusing on doing everything ethically
and rightly. We are always open to accept our mistakes and have the nerve to do the
necessary changes.
 ➢ About React.Js :-

React.js is a powerful JavaScript library for building dynamic user interfaces, developed and
maintained by Facebook. It provides a declarative and efficient way to create interactive
components that can seamlessly update and render in response to changes in application state.

Key features and concepts of React include:

1. Components:
• React applications are built using components, which are modular, reusable pieces of
code that encapsulate specific functionality and user interface elements. Components
can be combined to create complex UIs.
2. Virtual DOM:
• React uses a virtual DOM (Document Object Model) to optimize rendering. Instead of
updating the entire DOM when changes occur, React creates a virtual representation
of the DOM and updates only the necessary parts, improving performance and
responsiveness.
3. JSX (JavaScript XML):
• JSX is a syntax extension for JavaScript that allows you to write HTML-like code within
your JavaScript files. It provides a concise and readable way to describe the structure
of UI components.
4. Unidirectional Data Flow:
• React follows a unidirectional data flow, where data changes are passed down through
the component hierarchy. This helps maintain a clear and predictable flow of data,
making it easier to understand and debug applications.

5. State and Props:

• React components can have internal state, allowing them to manage and update their
data. Props (short for properties) are used to pass data from parent to child
components, enabling the communication between different parts of the application.
6. Lifecycle Methods:
• React components have lifecycle methods that allow developers to hook into different
stages of a component's existence. This includes methods like componentDidMount
for actions after a component is rendered and componentWillUnmount for cleanup
before a component is removed from the DOM.
7. React Router:
• React Router is a popular library for handling navigation in React applications. It
enables the creation of single-page applications with dynamic, client-side routing.
8. Reusable UI Components:
• React promotes the creation of reusable UI components, fostering a modular and
maintainable codebase. This reusability is achieved through the composition of
smaller components to build larger, more complex user interfaces.
9. Ecosystem and Community:
• React has a vibrant ecosystem and a large community of developers. This has led to
the creation of numerous third-party libraries, tools, and resources that complement
and extend React's capabilities.

Whether you're building a simple web application or a complex user interface, React provides a
flexible and efficient foundation for constructing modern, interactive, and scalable applications.
REACT Versions:-

1. React 0.3 (May 2013):

- Initial release of React by Facebook.
- Introduction of the virtual DOM concept.

2. React 0.14 (October 2015):

- Deprecation of `React.createClass` in favor of ES6 classes.
- Introduction of stateless functional components.

3. React 15 (April 2016):

- Improved performance with the introduction of React Fiber (a reimplementation of the React
core algorithm).
- Better error handling and warning messages.
- Continued support for the deprecated `React.createClass`.

4. React 16 (September 2017):

- Introduction of the "React Fiber" reconciliation algorithm, enhancing performance and
rendering capabilities.
- Error boundaries for better error handling.
- Improved support for returning arrays and strings from render.
- Context API improvements.

5. React 16.3 (March 2018):

- Introduction of the new Context API to replace the old, experimental context API.
- Deprecated lifecycle methods like `componentWillMount`, `componentWillReceiveProps`,
and `componentWillUpdate`.
6. React 16.8 (February 2019):
- Introduction of Hooks, allowing developers to use state and other React features in functional
components.
- `useState` and `useEffect` are the most commonly used hooks.

7. React 17.0.0 – (October 2020):

- event pooling optimization has been removed
- No new features were introduced in React 17; it focused on gradual updates and
improvements.
- New JSX Transform for better performance and smaller bundle sizes.
- Improved forward ref handling.

8. React 18 – 18.2.0 (January 2023):

- Automatic batching
- Native event handlers

Components of React.Js :-

➢ HTML:
 HTML, which stands for Hyper Text Mark up Language . It provides a means to create
structured documents by denoting structural semantics for text such as headings, paragraphs,
lists etc as well as for links, quotes, and other items.

• HTML stands for Hyper Text Markup Language

• It is the standard markup language for creating Web pages

• It describes the structure of a Web page

• HTML elements tell the browser how to display the content

• HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.

➢ CSS:

• CSS stands for Cascading Style Sheets

• CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

• CSS saves a lot of work. It can control the layout of multiple web pages all at once. • External
stylesheets are stored in CSS files.
There are three ways of inserting a style sheet:

1) Inline CSS
2) Internal CSS
3) External CSS

1). Inline CSS:

Inline CSS contains the CSS property in the body section attached with element is known as inline
CSS.

• Inline by using the style attribute inside HTML elements

2). Internal CSS:

This can be used when a single HTML document must be styled uniquely. The CSS rule set should
be within the HTML file in the head section i.e. the CSS is embedded within the HTML file. •
Internal by using a <style> element in the <head> section.

3). External CSS:

External CSS contains separate CSS file which contains only style property with the help of tag
attributes (For example class, id, heading, etc.). • External by using a <link> element to link to an
external CSS file.

➢ JAVASCRIPT:

• JavaScript is the most popular programming language in the world and that makes it a
programmer’s great choice. Once you learnt JavaScript, it helps you developing great front-end
as well as back-end software using different JavaScript based frameworks like jQuery, Node.JS
etc.

• JavaScript is everywhere, it comes installed on every modern web browser and so to learn
JavaScript you really do not need any special environment setup. For example Chrome, Mozilla
Firefox, Safari and every browser you know as of today, supports JavaScript.

What can we build using JavaScript?

JavaScript is a widely-used programming language. Given below are some domains/products that
can be built using JavaScript:

• Websites:JavaScript helps us to add behaviour of our website. It helps users to interact with
the website. For e.g. clicking on buttons, saving details, uploading details on the website, etc.
• Web Servers:We can make robust server applications using JavaScript. To be precise we use
JavaScript frameworks like Node.js and Express.js to build these servers.
• Game Development: In Game Development industry, JavaScript is used widely. With the
addition of HTML5 Canvas, it’s now possible to make 2D and 3D games in JavaScript very
efficiently.

Why to learn JavaScript?

JavaScript is the most popular and hence the most loved language around the globe. Apart from
this, there are abundant reasons to learn it. Below are a listing of few important points:

• No need of compilers:
Since JavaScript is an interpreted language, therefore it does not need any compiler for
compilations.

• Used both Client and Server-side:

Earlier JavaScript was used to build client-side applications only, but with the evolution of
its frameworks namely Node.js and Express.js, it is now widely used for building server-side
applications too.

• Helps to build a complete solution:

As we saw, JavaScript is widely used in both client and server-side applications, therefore it
helps us to build an end-to-end solution to a given problem.

• Used everywhere:
JavaScript is so loved because it can be used anywhere. It can be used to develop websites,
games or mobile apps, etc.

• Huge community support:

 JavaScript has a huge community of users and mentors who love this language and take it’s
legacy forward.

➢ BOOTSTRAP:

• Bootstrap is a free front-end framework for faster and easier web development
• Bootstrap includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many other, as well as optional JavaScript
plugins

• Bootstrap also gives you the ability to easily create responsive designs.

➢ REACT: Front-End Library:

React is a JavaScript library that is used for building user interfaces.

• React is used for the development of single-page applications and mobile applications
because of its ability to handle rapidly changing data.

• React allows users to code in JavaScript and create UI components.

Why to use React?

• Virtual DOM –
A virtual DOM object is a representation of a DOM object.

Virtual DOM is actually a copy of the original DOM. Any modification in the web application
causes the entire UI to re-render the virtual DOM.

Then the difference between the original DOM and this virtual DOM is compared and the
changes are made accordingly to the original DOM.

• JSX –
Stands for JavaScript XML. It is an HTML/XML JavaScript Extension which is used in React.
Makes it easier and simpler to write React components.

• Components –
React JS supports Components. Components are the building blocks of UI wherein each
component has a logic and contributes to the overall UI. These components also promote
code reusability and make the overall web application easier to understand.

• High Performance –
Features like Virtual DOM, JSX and Components makes it much faster than the rest of the
frameworks out there.

• Developing Android/IOS Apps –

With React Native you can easily code Android-based or IOS-Based apps with just the
knowledge of JavaScript and ReactJS.

• You can start your react application by first installing “create-react-app” using npm or yarn.
 ➢ Node.js: JS Runtime Environment

Node.js provides a JavaScript Environment which allows the user to run their code on the server
(outside the browser).

Node pack manager i.e. npm allows the user to choose from thousands of free packages (node
modules) to download.

Why use to Node.js?

• Open-source JavaScript Runtime Environment • Single threading – Follows a single-threaded

model.
• Data Streaming
• Fast – Built on Google Chrome’s JavaScript Engine, Node.js has a fast code execution.
• Highly Scalable

Initialize a Node.js application by typing running the below command in the command window. Accept
the standard settings.
Attributes used in the project:-

1. State Management:
• Image State: Keep track of the current image being edited.
• Tool State: Track the selected editing tool (e.g., crop, rotate, filter).
• Canvas State: Store information about the canvas, such as dimensions.

2. Components:
• Canvas Component: Display the image and handle drawing on it.
• Toolbox Component: Contains buttons or options for different editing tools.
• Upload Component: For uploading images from the user's device.
• Save Component: Allows users to save the edited image.

3. Image Manipulation Libraries:

• fabric.js: A powerful and simple canvas library for handling graphic elements.
• React Image Crop: If you need cropping functionality.
• React Easy Crop: Another option for image cropping.

4. User Interaction:
• Mouse/Touch Events: Implement event listeners for mouse or touch interactions on the canvas.

5. Filters:
• Implement a way to apply filters to the image (brightness, contrast, saturation, etc.).
• You might use a library like react-filter-range for sliders to control filter parameters.

6. Undo/Redo Functionality:
• Keep a history of changes to allow users to undo or redo edits.

7. File Handling:
• Implement features for uploading and saving images.
• Use the FileReader API for reading uploaded images.

8. Styling:
• Apply styles to make your app visually appealing and user-friendly.

9. Responsive Design:
• Ensure your app works well on various screen sizes and devices.
 Introduction to project :-

Project Introduction: Image Editor in React:-

Welcome to our innovative project – an Image Editor built with the power of React. This
application empowers users to seamlessly edit and enhance images directly within their web
browser, providing a user-friendly and interactive experience.

Project Overview:
In a world increasingly driven by visual content, our Image Editor in React aims to provide a
simple yet powerful solution for users to manipulate images effortlessly. Whether it's cropping,
scaling, or adjusting colors, our application leverages the capabilities of React and a chosen
image manipulation library to deliver an intuitive and responsive image editing experience.

**Key Features:**

User-Friendly Interface:
The application offers an easy-to-use interface that allows users to upload images quickly and
perform a variety of edits effortlessly.

Dynamic Image Editing:

Leveraging the React framework, our Image Editor incorporates dynamic image editing features,
allowing users to preview changes in real-time.

Efficient Library Integration:

The project utilizes a popular image manipulation library (e.g., react-avatar-editor) to handle core
functionalities, ensuring efficiency and reliability.

Save and Export:

Once users are satisfied with their edits, the application provides a straightforward mechanism to
save or export the edited images according to their preferences.
How to Use:

Upload Image:
Users can upload their desired images through a user-friendly file input interface.

Edit with Ease:

Utilizing the integrated image editing component, users can crop, scale, and adjust the image to
meet their requirements.

Save or Export:
After making desired edits, users can save or export the edited image for personal or professional
use.
 ➢ Image Editor Interface :-

Basic Layout:-

Choosing Image :-
: Choose the image from your local system you want to edit by pressing the Choose Image
button.

(After selecting image)

:- Use Brightness button and the Slider to adjust the brightness of the image.
:- Use the Contrast button and Slider to adjust the contrast of the image.

Similarly , we can use the Sepia , Saturate , HueRotate and Grascale buttons to adjust the
colour , hue , saturation , gray value and sepia of the image according to our liking.
:- We can use the Undo button given in the bottom right to undo any unwanted step while editing
the photo.

:- Use the Redo button to repeat the action you unintentionally revoked by using the undo button.
:- I case we want to start over and erase all the changes we can use the Reset button.

:- We can directly Drag over the image to quickly perform a rectangular crop on the image.
 :- Later we can adjust the cropped area as well.

:- Press the Crop Image button to finalize the cropped portion you want to use.
:-We can flip the image vertically or horizontally by using the Flip buttons present at the
bottom.

OR
:- We can also rotate the images in 90 degree by using Rotate right or Rotate left.

OR
:- When we are Satisfied with all the changes we have made to the image,
we can use the Save Image button to save the edited image.
 ➢ Conclusion of the React Photo Editor Project:

In conclusion, the React Photo Editor project has been a journey of creativity, innovation, and
technical exploration. As we wrap up this project, several key aspects and achievements deserve
acknowledgment:

User-Friendly Interface:
The project successfully delivers a user-friendly interface, providing an intuitive environment for
users to edit and enhance their photos effortlessly.

Dynamic Image Editing:

Leveraging the power of React, the photo editor incorporates dynamic image editing features,
allowing users to preview changes in real-time. This enhances the overall user experience and
engagement.

Efficient Integration:
The integration of a popular image manipulation library within the React framework ensures
efficiency and reliability in handling core functionalities. This strategic decision contributes to
the overall performance of the application.

Feature Highlights:
The photo editor encompasses a range of features, including but not limited to cropping,
scaling, adjusting colors, and other creative enhancements. These features empower users to
unleash their creativity while maintaining ease of use.

Save and Export Functionality:

The project includes a robust mechanism for users to save or export their edited images
according to their preferences. This ensures that users can seamlessly incorporate their
enhanced photos into various personal or professional projects.

Responsive Design:
A key consideration throughout the development process has been maintaining a responsive
design. The photo editor adapts seamlessly to various screen sizes and devices, ensuring a
consistent and enjoyable experience for users across platforms.