GUJARAT TECHNOLOGICAL UNIVERSITY

Chandkheda, Ahmedabad

Affiliated

Dr. Subhash Technical Campus

A
Summer Internship Report on

“Dynamic Web Page Designing Using React”

At the industry or company

Infolabz IT Services Pvt. Ltd.
Under the subject
Summer Internship (3170001)

B.E. Semester- VII

Computer Science & Engineering

Submitted by:

Priya U. Mehta (190830131008)

Mr. Chintan Nagrecha

External Guide

Prof. Dr. Hemant H. Patel

Head of the Department

Academic Year
(2022-2023)
 CERTIFICATE

This is to certify that the Internship at Infolabz IT Services Pvt. Ltd. entitled “Dynamic web
page designing using React” has been satisfactorily completed by Priya U. Mehta under
the guidance in the fulfillment of the course Summer Internship (3170001) in semester-
VII of the Degree – BE in Computer Science & Engineering during the academic of
their final year 2022-2023.

External Guide Head of the Department

Mr. Chintan Nagrecha Prof. Dr. Hemant H. Patel

I
COMPLETION CERTIFICATE OF SUMMER INTERNSHIP

II
 ACKNOWLEDGEMENT

I/We wish to express our sincere gratitude to our External guide Mr. Chintan Nagrecha for
continuously guiding me at the company and answering all my doubts with patience. I would like
to thank our head, Prof. Dr. Hemant H. Patel, Computer Science & Engineering, Dr. Subhash
Technical Campus, for providing us an opportunity to do the Internship and giving us all the
support and guidance.

We also thank our parents, friends and all the members of the family for their precious support and
encouragement which they had provided in completion of our work. In addition to that, we would
also like to mention the company personals who gave us the permission to use and experience the
valuable resources required for the internship.

Thus, In conclusion to the above said, we once again thank the staff members of Infolabz IT
Services Pvt. Ltd. for their valuable support in completion of the project.

Thank You
Priya U. Mehta

III
 ABSTRACT

In this internship we are going to work on dynamic web page de-signing. React is java script web
framework which is very popular and one of the most important part of full stack web
development. Application web designing interface(API) is one of the most important data source.
In this internship we will going to work on some live APIs to create real time dynamic web page.
In order to fetch some live data we will use some concept of http (request-response mechanism)
and ES6.

IV
 Table of Contents
Sr. No Chapter No Topic Name Page No.

1 Title Page

2 Certificate I

3 Acknowledgement III

4 Abstract IV

5 Table of Contents V

6 Chapter : 1 Introduction 1

7 1.1 About the company 1

8 1.2 Aim and Objectives of the Internship 1

9 1.3 About Technology 2

10 Chapter : 2 Roles and Responsibilities during internship 3

11 2.1 Daily Tasks and Activities 3

12 2.2 My Roles and Responsibilities 8

13 2.3 Problems Given 9

14 Chapter: 3 Skills Learned 15

15 3.1 About the Skill/s 15

16 3.2 How do I learnt the skill/s 15

17 Chapter: 4 Overall Experience 16

18 4.1 Technical Experience 16

19 4.2 Personal Experience 16

20 Chapter : 5 Conclusion 17

21 5.1 Conclusion 17

22 Chapter : 6 Future Scope 18

23 6.1 Future Scope 18

24 Chapter : 7 Bibliography 19

25 7.1 Bibliography 19

V
Dynamic web page designing using React

Chapter 1 Introduction

1.1 About Company

Established in 2016, incorporation with their parent IT company, INFOLABZ IT SERVICES PVT.
LTD. has managed to make its own position in IT sector. They are involved in web development,
app development, progressive web application development, IOT solutions, graphics and
designing, digital marketing, domain and hosting services, SMS services etc.

In the span of six years they have managed to deliver all projects on time with utmost accuracy to
their clients across the globe. They have dedicated terms of experienced and hard working
developers. Their developers, who are always willing to take new challenges and looking forward
to learn new things, are heart of this company.

To offer a safe and friendly working environment to their employees. They conduct regular
training for their staff members and keep themselves updated with the latest industry trends to
make sure that they deliver the best.

1.2 Aim and Objectives of the Internship

Their objective is to sustain with exponential growth in IT industry. Their mission is to deliver the
best with top notch quality ever quarter and vision is to develop a product with one of its kind
concept which could be used by millions of people.
The aim of the internship provides a direction to the activities. The main reasons to follow this
internship are:
▪ Industry experience and chance to learn:

Through the internship we can increase our knowledge and skills, also We can experience the
environment of industry. During this internship I learned new technology as well as
organizational skills.

▪ Network contacts/references:

Another objective of the internship is developing business contacts. They can help to find a
job later act as references or help with the projects after hired somewhere else.

DR. SUBHASH TECHNICAL CAMPUS, JUNAGADH 1

Dynamic web page designing using React

▪ Improvement:

Internship allows me to test out specific techniques learned in like in the classroom before
entering the working world. How to communicate and work ethics.

1.3 About technology

ReactJS

ReactJS, also known as React or React.js, is an open-source JavaScript library for building user
interfaces. It is used for handling view layer in single page application and mobile application
development. It is maintained by Facebook, Instagram and a community of developers and
corporations.

React strives to provide speed, simplicity and scalability. Some of its most notable features are
JSX, Stateful components, Virtual Document Object Model.

▪ JSX

JavaScript XML (JSX) is an extension to the ECMAScript syntax without any defined
semantics. (JSX 2014) React embraces the fact that rendering logic is inherently coupled
with another UI logic. Instead of separating technologies, React uses loosely coupled units
called components that contain both. JSX is optional and not required to use React. However,
JSX is a good visual aid when working with UI inside JavaScript. It also allows React to
show more useful error and warning messages.

DR. SUBHASH TECHNICAL CAMPUS, JUNAGADH 2

Dynamic web page designing using React

Chapter 2 Roles and Responsibilities during

internship

2.1 Daily Tasks and Activities

Task 1: Print value using Arrow function

Output:

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 3

Dynamic web page designing using React

Task 2: Check condition using arrow function

Output:

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 4

Dynamic web page designing using React

Task 3: Print value using simple function method

Output:

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 5

Dynamic web page designing using React

Task 4: Display data of covid 19 details like city name, new cases, recovered cases, death
cases using array.

Output:

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 6

Dynamic web page designing using React

Task 5: Create input text value and submit button in this input box. We can add email and
display email in paragraph tag when user can click submit button.

Output:

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 7

Dynamic web page designing using React

2.2 My Roles and Responsibilities

The overall responsibility of the student is to devote themselves to the learning of helpful
interaction with service users. During the internship there are lots of things I had gone through.
There are roles and responsibilities towards me to done with the internship. Some of them are
given below:

▪ An internship I have done which was in online mode so first I have to join as per the time
that they allocated.

▪ Simply I was trying a how the company work. And communication with each other so
improved my technically communication.

▪ Follow the guide and be corporate with them.

▪ They conduct the daily lectures and daily task for us. So, the responsibility of me is to
complete the all tasks and weekly assignments which are given to us.

▪ Attending all sessions and which they teach, I should learn with passionately.

▪ Be always in a professional and ethical manner when communicating with guide

▪ During the internship, I was communicate with my guide Or mentor, including Google
meet, Git hub platform, Email, and also Social media messenger.

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 8

Dynamic web page designing using React

2.3 Problems given

REACT ENVIRONMENT STUDY

- Create react project, run it.
- Check different folders (for e.g. src, public etc...), files ( index.html, index.js, app.js ) and try find
out use of it. (we will cover this in upcoming week of internship.

Assignment 1

COVID DATA CHECK

API: https://data.covid19india.org/data.json
- Allow user to input date in text box.
- On click of submit, It should display number of new cases and deaths occurred on that day.
- Check below reference output.

Solution

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 9

Dynamic web page designing using React

Output

MUTUAL FUND
API: https://api.mfapi.in/mf
- Print total number of schemes available in this API.
- Allow user to input scheme code in text box.
- Search scheme code from this API and print scheme name.

Solution

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 10

Dynamic web page designing using React

Output

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 11

Dynamic web page designing using React

Assignment 2
Develop one web page in react with professional card layouts of react bootstrap. ( You
can use any code of card from internet. Try to add card with professional look. )

- Use any of following API category.

API > https://inshorts.deta.dev/news?category=sports

Supports all categories as on the Inshorts Website. These include –

1. '' // blank to get top news from all categories

2. national //Indian National News
3. business
4. sports
5. world
6. politics
7. technology
8. startup
9. entertainment
10. miscellaneous
11. hatke // Unconventional
12. science
13. Automobile

DR. SUBHASH TECHNICAL CAMPUS, JUNAGADH 12

Dynamic web page designing using React

Solution

DR. SUBHASH TECHNICAL CAMPUS, JUNAGADH 13

Dynamic web page designing using React

Output

DR. SUBHASH TECHNICAL CAMPUS, JUNAGADH 14

Dynamic web page designing using React

Chapter 3 Skills learned

3.1 About the Skill/s

During this internship I have learned the various skills like

▪ Learned about React JS, also about API.

▪ Coding tricks
▪ Error solving
▪ Work ethics

3.2 How do I learnt the Skill/s

▪ After every online session I practice what I have learnt also I did daily tasks and activities.
▪ I research about various websites and web application and learned lot of things about React
JS.

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 15

Dynamic web page designing using React

Chapter 4 overall experience

4.1 Technical experience

▪ I learned new programming language.
▪ I faced new challenges with new technology and had great experience to improve my
coding skill.
▪ Our guide gives some basic guidance on real time problems and how to work with it.

4.2 Personal experience

▪ After completion of internship I learnt lot of things like I learnt new technology as well as
knowledge of supervisory world of industry.
▪ Mr. Chintan Nagrecha is a very good guide. So overall experience of working with him
is excellent.

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 16

Dynamic web page designing using React

Chapter 5 Conclusion

5.1 Conclusion

▪ React is more SEO-friendly than other front-end JavaScript frameworks.

▪ It offers detailed documentation with multiple resources and tutorials to jumpstart your
learning.
▪ A developer with JavaScript knowledge can immediately start working with React.js.
▪ It accelerates the performance due to Virtual DOM.
▪ React enables developers to use several components for building web apps and improves
the dynamic web app development process.

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 17

Dynamic web page designing using React

Chapter 6 Future Scope

6.1 Future Scope

Web development agencies needs to renew their focus on perfecting the user experience to
facilitate cutting-edge solutions.

ReactJS is an open source JavaScript library use to build interactive user interfaces for the
websites and other applications. ReactJS promotes the creation of renewable UI components
which presents data that changes over time.

It allows developers to create scalable web applications quickly by using changeable data
without reloading the page.

ReactJS is becoming popular in web development. So we can imagine bright days ahead of this
new technology.

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 18

Dynamic web page designing using React

Chapter 7 Bibliography

7.1 Bibliography

□ https://infolabz.in/
□ https://infolabz.in/SI/reactinternship2022
□ https://www.youtube.com/infolabz
□ https://reactjs.org/
□ https://www.tutorialspoint.com/
□ https://www.w3schools.com/REACT/
□ https://code.visualstudio.com/
□ https://react-bootstrap.github.io/
□ https://getbootstrap.com/
□ https://infolabz.in/SI/reactinternship2022

DR SUBHASH TECHNICAL CAMPUS, JUNAGADH 19