SUMMER INSTITUTIONAL TRAINING REPORT

ON

[CONTACT MANAGER]
SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR THE AWARD

OF THE DEGREE OF

BACHELOR OF ENGINEERING

(Computer Science & Engineering)

JUNE-JULY,2022

SUBMITTED BY:

NAME: SOUVIK MAITI

UNIVERSITY UID: 21BCS1318

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

CHANDIGARH UNIVERSITY GHARUAN, MOHALI

i
 CHANDIGARH UNIVERSITY,GHARUAN,MOHALI

CANDIDATE'S DECLARATION  

I am SOUVIK MAITI hereby declare that I have undertaken Summer Training and developed

project titled ____________CONTACT MANAGER______________________ during a

period from __15th June2022____ to _29th June 2022______ in partial fulfillment of

requirements for the award of degree of B.E (COMPUTER SCIENCE & ENGINEERING) at

CHANDIGARH UNIVERSITY GHARUAN, MOHALI. The work which is being presented in

the training report submitted to Department of Computer Science & Engineering at

CHANDIGARH UNIVERSITY GHARUAN, MOHALI is an authentic record of training

work.

Signature of the Student

The training Viva–Voce Examination of__________________ has been held on ____________

and accepted.

 Signature of Internal Examiner Signature of External Examiner

ii
Abstract: ReactJS is a part-based library which is conveyed for the advancement of
intelligent UIs. Presently it is the most famous front-end JS library. It consolidates the view (V)
layer in M-V-C (Model View Controller) design. It is bolstered by Facebook, Instagram and a
network of individual designers and associations. Respond fundamentally empowers
advancement of enormous and complex online applications which can change its information
without ensuing page revives. It focuses to furnish better client encounters and with blasting
quick and powerful web applications advancement. ReactJS can likewise coordinated with
other JavaScript libraries or structures in MVC, for example, AngularJS.

iii
 ACKNOWLEDGEMENT
First, humbly bow to the Almighty God who made it possible to complete the summer training
project. It was only with his blessing that I was able to accomplish this difficult task.

Thank you from the bottom of my heart. The success of this study was undoubtedly guaranteed
by the support of many. Many would like to thank the following: I am deeply grateful to the
university for providing me with the equipment and excellent supervision needed to complete
this task. His understanding, encouragement, and personal guidance provided a good
foundation for this study.

The generous assistance given to me by all teachers and clerical staff is justified.

I would like to express my heartfelt gratitude to my parents, sisters, and friends. Their vibrant
inspiration and outward well-being have always proved to be a strong spring of this effort. Her
blessing and affection cannot be expressed in words, but I can feel it deep inside my heart. I
would like to dedicate this research to my incredibly affectionate and supportive parents who
are always with me wherever I am. Thanks to the

University, they provided support in the form of libraries and experimental facilities needed
while working on the project.

Errors and omissions are my property.

iv
About the Course: React is a library for building composable user interfaces. It encourages
the creation of reusable UI components, which present data that changes over time. Lots of
people use React as the V in MVC. React abstracts away the DOM from you, offering a
simpler programming model and better performance. Single-page applications (SPAs) are
gaining popularity with first-generation SPA frameworks such as Angular (by Google), Ember,
Knockout, and Backbone. Using these frameworks made it easier to build web applications that
go beyond vanilla JavaScript and jQuery. Another SPA solution, React, was later released by
Facebook in 2013. All of these are used to build modern web applications in JavaScript. Let's
go back a bit in time before the

SPAS existed. Previously, websites and web applications were rendered on the server. The user
accesses the URL in a browser and requests all HTML, CSS, and JavaScript files associated
with the HTML file from the web server. After the network delay, the user sees the rendered
HTML in the browser (client) and begins interacting with it. Each further page change (that is,
accessing a different URL) will restart this set of events. In this version of the past, basically
everything that matters is done by the server, but the client plays a minimal role and only
renders page by page. I used the minimum required HTML and CSS to set the structure and
style of the application, but to add interactions (such as switching dropdowns) and advanced
styling (such as tooltip placement). I put a little bit of JavaScript into the mix. A popular
JavaScript library for this type of work was jQuery

In contrast, modern JavaScript has shifted its focus from the server to the client. The most
extreme version of this: the user visits the URL and requests a small HTML file and a large
JavaScript file. After a short delay in the network, the user sees the HTML rendered by
JavaScript in the browser and begins the dialogue. Each subsequent page break does not
request any more files from the web server, but instead renders a new page using the originally
requested JavaScript. All subsequent user interactions are also handled by the client. In this
latest version, the server primarily uses minimal HTML files to serve JavaScript over the
network. The HTML file then executes all relevant JavaScript on the client side, renders the
entire application using HTML, and uses JavaScript to interact with it.

React makes this possible along with other SPA solutions. Basically, SPA is the bulk of
JavaScript that is neatly organized into folders and files to build the entire application, but SPA
frameworks (such as React) provide all the tools to design it. increase. This JavaScript-targeted
application is delivered once to the browser over the network when the user accesses the URL
of the web application. From there, React or another SPA framework renders everything in the
browser as HTML and handles the user's interaction with JavaScript. With the rise of

React, the concept of components has become commonplace. Each component uses HTML,
CSS, and JavaScript to define the look and feel.

v
 List of Figures

Fig 1.1 One-Way data flow of React JS ………………………………………………………2

Fig 1.2 Virtual DOM tree and the diffing process of React JS………………………………..3

Fig 1.3 Interaction between M-V-C components……………………………………………...4

Fig 1.4- Conversion of intermediate DOM to HTML DOM…………………………………..4

Fig 2.1-Learning Path…………………………………………………..………...……………6

Fig 3.1-Code/packages folders ………………………………….,……………………………12

Fig 3.2-Code ……………………………………………………………………..……………12

Fig 3.3-Final View ……………………………….…………………………………..………..12

vi
Definitions, Acronyms and Abbreviations:
o Definitions: React makes it painless to create interactive UIs. Design simple views for
each state in your application, and React will efficiently update and render just the right
components when your data changes.
Declarative views make your code more predictable and easier to debug.

o Acronyms: ES6, ES2015, ES2016, etc. These acronyms all refer to the most recent
versions of the ECMAScript Language Specification standard, which the JavaScript
language is an implementation of. The ES6 version (also known as ES2015) includes
many additions to the previous versions such as: arrow functions, classes, template
literals, let and const statements.
o Abbreviations: React (also known as React.js or ReactJS) is a free and open-source
front-end JavaScript library for building user interfaces based on UI components. It is
maintained by Meta (formerly Facebook) and a community of individual developers
and companies.

vii
 CONTENTS

Topic Page No.

Certificates by Coursera……………………………………………………………….……i
Candidate’s Declaration……………………………………………………………………ii
Abstract……………………………………………………………………………………..iii
Acknowledgement………………………………………………………………………….iv
About the Course……………………………………………………………………………v
List of Figures………………………………………………………………………………vi
Definitions, Acronyms and Abbreviations…………………………………………………vii
CHAPTER 1 INTRODUCTION 1-5
1.1 FEATURES 1
1.2 WORKING 3
1.3 INSTALLATION 5

CHAPTER 2 TRAINING WORK UNDERTAKEN 6-7

2.1 Learning steps 6
2.2 Project undertaken 7
CHAPTER 3 RESULTS AND DISCUSSION 8-13

3.1 Steps of project 9

3.2 Limitation 13

CHAPTER 4 CONCLUSION AND FUTURE SCOPE 14-15

4.1 Conclusion 14
4.2 Future Scope 14
REFERENCES 15

viii
 INTRODUCTION
ReactJS is a JavaScript library sent to create reusable (UI) segments. According to the official
React documentation, the definition is: React is a library for building remote user interfaces.
Response basically enables the improvement of huge and complex electronic applications that
can change information without refreshing the page. It is used as a view (V) in Model View
Controller (MVC). Respond abstracts the Document Object Model (DOM), making it easy,
powerful, and powerful to improve your application. Responses are primarily rendered server-
side in NodeJS, and support for local rich applications is provided in React Native. Respond
thus runs a one-way information flow, streamlining standards and making it much simpler than
traditional information services.

(1.1) FEATURES:
a. Lightweight DOM (Document Object Model) For Better Performance

React provides a very effective and lightweight Document Object Model. It does not
communicate with the program-generated DOM, but responds to the document object model
stored in memory. This makes your application run very fast and powerful. Most other web
development frameworks interact directly with the program's DOM, giving you direct control
over the entire DOM tree each time a page is activated. Then, if you need to adjust a large
amount of information, your presentation will be seriously affected. As expected, ReactJS uses
what's called a virtual DOM. The operation is very easy. Correlation between the virtual DOM
and the real DOM is created using the diff () algorithm, and only node changes reflected along
these lines are reflected in the document object model tree.

b. Easy Learning Curve

The simple and uncomplicated nature of ReactJS allows you to quickly get used to the
framework. Expectations for absorbing information are surprisingly simple and manageable
without problems. Engineering is very easy. Using JSX feels like a very special and satisfying
wonder that developers can easily co-exist with the framework. First-level skills in the
framework can definitely be achieved without obstacles or complexity.

c. JSX

JSX is basically the same language as the high-tech giant XML. You don't have to use JSX at
all when building responsive applications, but it's a shortcut that facilitates improvement,
regardless of the point that marks up the opportunity for parts or related constraints, so it's very
much among developers. It's popular. What makes JSX seriously famous is the tendency of
human instinct to choose a satisfying and simple procedure.

d. Performance

ReactJS is known as a very capable performer. This is one of the key factors that makes
frameworks stand out from many frameworks in the serious world. A very effective execution
description of the framework is basically the highlight of the framework's virtual DOM. What
happens is that ReactJS keeps the virtual document object model in memory. Whenever the
1
website page you are currently viewing needs to reflect your changes, make the changes to the
virtual DOM first, rather than updating the reference DOM immediately. After changes are
made to the virtual DOM, the diff () algorithm is applied, taking into account the toe, virtual
DOM, and browse DOM, and updating only the important and necessary nodes in the program
DOM tree. The result is a very fast application. execution.

e. One Way Data Flow

Unidirectional Data Flow is not a concept unique to React, but as a JavaScript developer this
might be the first time you hear it.

In general, this concept means that data has one, and only one, way to be transferred to other
parts of the application.

In React this means that:

o state is passed to the view and to child components

o actions are triggered by the view
o actions can update the state
o the state change is passed to the view and to child components

Fig 1.1-One-Way data flow of React JS

f. Virtual DOM

Another important element of ReactJS is the ReactJS Virtual DOM (Virtual Document Object
Model). This is similar to the Document Object Model created by the browser, with the
difference that it is stored in memory. The functionality of the virtual DOM is very simple.
When a page content change is requested, the progress is first reflected in the memory-enabled
virtual DOM. The diff () algorithm then looks at both the virtual DOM and the browser DOM,
and any necessary changes are reflected only in the program DOM, rather than re-rendering the

2
entire DOM. This greatly improves the wording of usage, especially when a lot of information
needs to be changed.

Fig 1.2-Virtual DOM tree and the diffing process of React JS

(1.2) WORKING:

Model View Controller or M-V-C Plan Worldview is the mainstream and main reason for
improving UI in both web and frontend applications running on any platform. The DOM
communicates with Physical View when the web application is displayed. The DOM is created
using an HTML layout that derives from alternative documents, content squares, or
precompiled form of work. The printed layout is realized as a DOM by the view element itself.
It plays an important role in handling events and controlling the Document Object Model tree
as part of its life cycle. The appearance should be especially valuable when it makes you think
about working with your customers and presents the information you need. Information is a
substance that comes from specific data stores such as databases, web administration, and local
storage. The framework provides an approach to bind the view to the information store so that
the changes made to the database are naturally reflected. This method of pushing programmed
information updates is commonly referred to as data binding. There are numerous application
program interfaces or APIs that make this process easier. As shown in Figure 1 [1-2], the M-V-
C worldview is completed by the remaining two components, such as the model and the view,
and the C component, such as the controller, which incorporates the information model stream
into the view. increase. Also, client events are forwarded out of sight, which inevitably
modifies the model.
3
 Fig 1.3-Interaction between M-V-C components

So as to see how React deals with these errands, an a lot further comprehension of components
is required, beginning with the Component. The Component is the significant structure obstruct
in React. The whole UI can be planned by gathering a tree of numerous components. An
intermediate DOM is produced by the render() technique present in every one of the React
components. As appeared in figure 2, a Call to the React.renderComponent() strategy on the
root Component prompts recursively going down the Component tree and producing the
intermediate DOM. At that point a while later this intermediate DOM is changed over to the
genuine HTML DOM.

Fig 1.4- Conversion of intermediate DOM to HTML DOM

React uses a lightweight XML-based extension of JavaScript called JSX to build a component
tree as a combination of various XML nodes. This makes it easier and much more useful to
represent and display the DOM. JSX also plays an important role in streamlining the
relationship between event handlers and properties as XML quality. The final JavaScript is

4
created using the order line and the programmer. Components are simply represented by
JSXXML nodes. It's important to note that React works independently of JSX, and using JSX
only makes an effort to dispel concerns about creating an intermediate DOM. Component
Lifecycles Every component in a ReactJS structure has a very specific lifecycle and contains
state machines with three different states. The assembly process brings the components to life.
When the assembly passes the rendering path, a component tree or intermediate DOM is
created. This tree is then repositioned and placed in the container node of the actual Document
Object Model. The entire procedure is performed when the React.renderComponent () strategy
is called. As shown in Figure 3, the component remains updated after installation. Each
component is updated when its state changes using the setState () strategy or when its
properties change using the setProps () technique. This is followed by a render () technique that
synchronizes the archive object model with information such as props and status.

Response calculates the delta between the past component tree and the recently generated tree
during the update of the result. This advance has been greatly improved and includes a guide
that limits actual DOM control. Then the final state is unassembled. Therefore, this usually
happens when the child component is no longer created by the render () call. In many cases,
engineers don't have to worry about it, they just let React do what they need to do. Currently, if
React wasn't clear when exchanging spots between mounted and updated and unmounted
states, it was a major offender. Either way, it is instead given a pitfall that can be replaced to
advise at any point in the state change.

(1.3) INSTALLATION: React JS can be installed on different operating systems like

Macintosh, Microsoft Windows, Unix etc. Node JS & NPM are one of the platforms needed to
develop any React JS application.

Node JS and NPM package manager can be installed with below link-
https://nodejs.org/en/download/

Considering the current version of React JS 16.15.1 released on 1 st July 2022 below are the
few steps to install and create react application-

1. Open command window to install React. we use the command- npm install create-react-app
2. For creating React JS project we use command- npx create-react-app (application name here)
3. And finally, to run the project we use the command- npm start

NPM is a package manager which enables the server and runs the application at default server
– http://localhost:3000.

5
 TRAINING WORK UNDERTAKEN
(3.1) Learning Path:
ReactJS is an open-source front-end JavaScript library for building user interfaces. ReactJS is
maintained by Facebook and a community of individual developers and companies. It is widely
used as a base in building single-page websites and mobile applications. It is very easy to use,
and it allows users to create reusable UI components. Let’s talk about learning steps:

Learn Before I Learn React

ReactJS is JavaScript-based. You'll need to be familiar with a few things (other than basic
JavaScript knowledge) to accelerate your React learning at full speed.

Fig 2.1-Learning Steps

Git Version Control:

Git is a version control tool that helps you manage your source code better. Not directly related
to ReactJS. However, it is helpful to learn its basic usage so that I can take advantage of the
development ecosystem.

Git is easy to learn by focusing on a few basic things:

How to initialize the

How to swap in / out the changes

6
How to write the changes to the

How to write the changes to the remote

How to resolve the merge conflict that pushes the repository

HTML

HTML provides the structure of a web page. When coding in ReactJS, use the HTML structure
in a new syntax called JSX.

Don't need to know everything about HTML. However, it does require a basic knowledge of
the most commonly used tags and their semantics. Check out this HTML crash course for
beginners and this HTML basic guide to get started.

CSS

Learn about CSS uses a lot.

JavaScript

Know the following concepts from JavaScript,

1. Variable Declarations (let and const)

2. Template Literals
3. Functions and Arrow Functions
4. Object Decomposition
5. Spreads and Remainder Operators
6. Module Imports and Exports
7. Little Promises and Asynchronous Programming

NPM Ecosystem

You need to know how to run and test your ReactJs app locally using the NPM ecosystem npm,
yarn, and Node Version Manager (nvm).
Knowing how they work at a high level is always helpful in debugging your environment in the
event of a problem. Here are some resources to help you get started quickly with Node.js
installation, npm, yarn, nvm, and more.

(3.2) Project undertaken:

In this course I have completed a guided project on “Build a Twitter Clone Front-End with
ReactJS”.

Twitter is a social networking platform where you can express your thoughts in short posts that
people can read and share. Today, I'm using ReactJS on the front end with Firebase to clone
Twitter.

Use Firebase as your database and use Firebase Hosting to publish your clones to the web. You
will have the opportunity to post it with your photo. I will also get the actual Twitter post in the
Clone App section.

7
RESULTS AND DISCUSSION

8
During the course I have made a mini project Contact manager app based on the React Js. In
which I use the components of reacts and HTML, CSS and JavaScript also. I am going to
disscuss about my project.

We now will look at how we built this application.

(3.1) Steps of Project:

File Structure

So the important files to note are

Public Directory

The public directory has our main template called index.html. This is the foundation of our
application.

Src Directory

The src directory holds the files we use to run our application.

App.js - This is where we add our Home component. The home component is where our entire
application is built on.

Above we have a component called home.

index.js - This is our main file. Our main component. We use two child component to complete
our application.

contacts.js - This file is our contacts listing. The right hand side of our application.

create-contact.js - this is our left hand side of our application. It allows us to create contacts and
view them.

view-contact.js - This is another component. It show on the left hand side. This is how we view
our contacts.

Displaying our data

How do we display data. Lets see how we can do this.

This is done within our contacts.js component. You can view the full file here.

So here’s what we are actually doing. We use map on a list of items. Each item has contact
information. We can then display the contact information.

We get the items from our state object. At the top of this file we can see how we assigned items
to our state object.

9
We assign items to our state object. We get the contacts from our props object which is passed
in to our app.

In home.js we can see how we pass contacts to our child component. The arrow points to
{this.state.items}. We can access this within contacts from our props object.

Now we can see in home.js how we assign our items. We have a function called getContacts.
getContacts pulls our contacts data from you web server and the response is set to the state
variable called items.

The response.data from our fetch is assigned to the state object as items.

Now within contacts.js we also have a getContacts function. It does the same thing. When our
contacts.js is created we call the getContacts function. You can see this from the constructor.

Creating a contact

First lets check create-contact.js. We have our form and to save our data we call the
this.handleSubmit function. You can view the full file here.

The handleSubmit function gets all our data from our form using the FormData object. We can
now pass this data to our web server so we can save the information. To do this we use the
savecontact function.

So we have one more function to look at. That is saveContact. We have access to this using our
props object. Which means we defined it in home component. Lets check it out in home.js.

Form on change handler

We need to manage changes in our form elements so I learnt. When you make changes to your
inputs you need to save the changes somewhere. The code below shows how this is done.

To do this we use this.handleChange. We add this on all the elements. This function handles all
our elements as shown below.

Binding our functions

We need to bind our functions so we can access them in our render function. In create-
contact.js let see how we do this.

Parent and child components

So to build this app we used a main component and then three child components.

Working with props

We can pass data to our child components and access them as props. We can pass variables and
functions to our child components. Look below at our home.js.

10
So we are passing viewContact, refresh which is a variable contacts which is an array,
createContact which is a function. And we can access all of this within our Contacts
component.

In the picture below we see how we can access our functions passed from our parent.

So most of our functions are defined within home.js and then we pass these functions to our
child components. How child components can now access these functions using props.

Deleting a contact

Delete a contact is simple to do. We run fetch and pass the current id of the object. If no object
is selected we display an error. This can be seen below using the removeContact function.

Once the request is complete we change the view by setting the isview state variable to false.
We also change our leftTitle and leftDescription.

Conditionally rendering elements

In our Home component. We need to show two different views in two different conditions. So
we conditionally render the correct view based on the state of our app. Let see how we
accomplish this.

If this.state.isview is NOT false we can display CreateContacts. Which means if

this.state.isview is TRUE. We display CreateContacts. Otherwise when this.state.isview is
FALSE. We show ContactView.

Again this may seem confusing. But the variable is named isView. So the question being asked
is if the view is showing. We could simplify this by changing the code around. The below code
works the same way. A simpler less confusing approach.

I am going to attach my mini project snap shots.

11
Fig 3.1-Code/packages folders Fig 3.2-Code

Fig 3.3-Final View

12
(3.2) LIMITATIONS: React has a couple of restrictions too that must be considered before
React is picked for any venture improvement. These are: Only the View substance in the
versatile view controller or MVC is dealt with by the React. In this manner extra tooling is
required so as to finish the project development. Utilization of inline formats and JSX in some
cases ends up being a seriously unpredictable and tiring assignment for a couple set of
developers. Likewise, if there should be an occurrence of ReactJS, disappointments occur at
compile time rather than runtime as in the event of different languages and frameworks, which
can in some cases be baffling and tiring.

13
 CONCLUSION AND FUTURE SCOPE

CONCLUSION: Despite of a couple of minor weaknesses that that ReactJS has, it is

unquestionably a definite shot distinct advantage. Present day web is everyday getting
increasingly unique and client intelligent. Client experience configuration patterns are
persistently changing and advancing. The customer contents currently ensure that solitary vital
and fundamental information is pushed, and a consistent and satisfying experience is kept up
over the whole web. It is the present world's interest for straightforwardness, effectiveness, and
more prominent openness. ReactJS has serious force and highlights to meet prerequisites of the
present patterns. More or less, it can say that ReactJS is unquestionably going to affect the way
applications are composed for the web.

FUTURE SCOPE: React JS will continue to be a game changer. Developers who know
JavaScript can use React to create innovative products. Companies will continue to hire
JavaScript developers, but React programmers will take precedence. I can expect a bright day
and hope this course can always benefit for my React skills.

14
REFERENCES:
[1] Anurag Kumar and Ravi Kumar Singh, Comparative analysis of ReactJS and AngularJS,
2016 July.

[2] Alex Banks and Eve Porcello, Learning React, O'Reilly Media, Inc., June 2020

[3] Kirupa Chinnathambi, Learning React, Addison Wesley, 15 November 2016

[4]Wikipedia.org,'React(JavaScriptLibrary)'.Accessible:
https://en.wikipedia.org/wiki/React_(JavaScript_lib rary).

[5] https://www.coursera.org/learn/twitter-clone-frontend/home/week/1

[6] https://www.coursera.org/learn/front-end-react/home/week/1

15