DYNAMIC WEB PAGE DESIGNING USING REACT

A SUMMER INTERNSHIP REPORT

Submitted by

RAI AMAN ARUN

200140111015

In partial fulfillment for the award of the degree of

BACHELOR OF ENGINEERING

in
Electronics and Communication Engineering
Government Engineering College, Bharuch

Gujarat Technological University, Ahmedabad

July, 2023
 GOVERNMENT ENGINEERING COLLEGE BHARUCH
Opp. Govt, Guest House, Bholav, Bharuch – 392002

CERTIFICATE

This is to certify that the dissertation entitled “Dynamic Webpage

Designing Using React” has been carried out by Aman Arun Rai under my

guidance in partial fulfillment of the degree of Bachelor of Engineering in

Electronics and Communication, 7th Semester of Gujarat Technological

University, Ahmedabad, during the academic year 2023-2024.

INTERNAL GUIDE : HEAD OF DEPARTMENT :

Prof. Devendra R Patel Prof. K.G Bhuva

CERTIFICATE OF COMPLETION
 GOVERNMENT ENGINEERING COLLEGE BHARUCH
Opp. Govt, Guest House, Bholav, Bharuch – 392002

DECLARATION

I do hereby solemnly declare that the work presented in this Internship

Report has been carried out by me and has not been previously submitted to

any other University, College, and Organization for any academic

Qualification and Certificate.

I hereby warrant that the work I have presented does not breach any existing

copyright acts.

Student Name : Aman Arun Rai

Student Sign :

iv
 ACKNOWLEDGEMENT

I am immensely grateful for the enriching experience and knowledge I gained during my

online internship at INFOLABZ IT Services Pvt Limited. This experience has been

nothing short of transformative as I dived into the world of dynamic webpage designing

using ReactJS.

I would like to extend my heartfelt gratitude to Mr. Chintan Nagrecha, whose dedicated

guidance and insightful training have been instrumental in shaping my understanding of

ReactJS and its applications. His expertise and willingness to share his knowledge have

been a constant source of inspiration throughout the internship. Under his mentorship, I

have had the privilege of not only building projects but also delving into the intricacies of

APIs, React ES6, and various cutting-edge web development techniques. I also want to

express my appreciation to the entire team at INFOLABZ IT Services Pvt Limited for

providing me with the opportunity to work on real-world projects and learn within a

professional environment.

I would like to extend my sincerest of thanks to our internal guide Mr. Devendra R Patel

for his guidance for my internship.

Student Name : Aman Arun Rai

Enrollment : 200140111015

Student Sign :

v
 ABSTRACT
From July 27th to August 10th, 2023, I embarked on a valuable journey as
an intern at INFOLABZ. In just 15 days, I was introduced to the world of
React, ES6, and cutting-edge frameworks in dynamic webpage design.

INFOLABZ, known for its prowess in web development, became my learning

playground. Focusing on React, ES6, and advanced frameworks, I dived into
the world of interactive web experiences and modern tools.

Through online mode, industry mentors guided me, bridging the gap between
theory and hands-on practice. The practical side of React and ES6 met the
knowledge I had gathered in college.

Though virtual, this experience expanded my horizons. My understanding of

web development deepened beyond the surface, as I peeked into the assembly
units. I learned that different engineering branches dance together to make
projects a success.

These 15 days were a thrilling preview of my professional journey. With

newfound skills and a hunger to learn more, I'm grateful to INFOLABZ for
this enriching internship.

vi
 List of Figures
Fig 1.1 JavaScript Function............................................................................................................2
Fig 1.2 External Script...................................................................................................................3
Fig 1.3 Alert Function.....................................................................................................................3
Fig 1.4 Async Loading....................................................................................................................3
Fig 1.5 Defer Loading.....................................................................................................................3
Fig 1.6 Variable Declaration...........................................................................................................4
Fig 1.7 Assignment in JavaScript....................................................................................................4
Fig 1.8 Initialization in JavaScript.................................................................................................4
Fig 1.9 Variable Scope...................................................................................................................5
Fig 1.10 Constant Variables............................................................................................................5
Fig 1.11 Naming Convention..........................................................................................................5
Fig 1.12 Dynamic Typing...............................................................................................................6
Fig 1.13 Hoisting in JavaScript.......................................................................................................6
Fig 1.14 Browser Support...............................................................................................................8
Fig 1.15 JavaScript Objects.............................................................................................................9
Fig 1.16 Code of Task...................................................................................................................10
Fig 1.17 Code of Task...................................................................................................................10
Fig 1.18 Code Output....................................................................................................................11
Fig 2.1 Simple JavaScript Function..............................................................................................13
Fig 2.2 Arrow Function Example..................................................................................................14
Fig 2.3 Async Function Example..................................................................................................15
Fig 2.4 Async Function Example..................................................................................................15
Fig 2.5 Data Fetching from Bitcoin API.......................................................................................18
Fig 2.6 Data Fetching from Covid API.........................................................................................19
Fig 2.7 Data Fetching from Covid API.........................................................................................19
Fig 2.8 Data Fetching from Covid API.........................................................................................20
Fig 2.9 Covid Portal......................................................................................................................20
Fig 2.10 Code for Covid Portal.....................................................................................................21
Fig 3.1 Alert Box...........................................................................................................................22
Fig 3.2 Accessing Form Data........................................................................................................22
Fig 3.3 Form Validation................................................................................................................23
Fig 3.4 Form Submission Handling..............................................................................................23
Fig 3.5 Code for Forms to Tables.................................................................................................25

vii
Fig 3.6 Form to Table Output........................................................................................................26
Fig 3.7 JavaScript Array Example................................................................................................26
Fig 3.8 Assignment.......................................................................................................................28
Fig 3.9 Assignment Code..............................................................................................................29
Fig 3.10 Assignment Output.........................................................................................................30
Fig 4.1 Node Installation...............................................................................................................33
Fig 4.2 React App Example..........................................................................................................34
Fig 4.3 Functional Components....................................................................................................34
Fig 4.4 React Class Component....................................................................................................35
Fig 4.5 Working of React..............................................................................................................36
Fig 5.1 Object Data.......................................................................................................................37
Fig 5.2 Map Function....................................................................................................................37
Fig 5.3 Data Mapping Using React...............................................................................................38
Fig 5.4 Mapping React Component..............................................................................................39
Fig 5.5 React Props.......................................................................................................................40
Fig 5.6 Installing Bootstrap...........................................................................................................41
Fig 5.7 Data Table Using React Bootstrap....................................................................................42
Fig 6.1 useEffect Hook..................................................................................................................44
Fig 6.2 Assignment 2....................................................................................................................45
Fig 6.3 Assignment Code..............................................................................................................46
Fig 6.4 Assignment Code..............................................................................................................46
Fig 6.5 Assignment Output...........................................................................................................47
Fig 7.1 Project Code 1...................................................................................................................48
Fig 7.2 Project Code 2...................................................................................................................48
Fig 7.3 Project Code 3...................................................................................................................49
Fig 7.4 Project Output...................................................................................................................49
Fig 7.5 Project Output...................................................................................................................49

viii
 Table of Contents
CERTIFICATE.................................................................................................................................ii
CERTIFICATE OF COMPLETION...............................................................................................iii
DECLARATION.............................................................................................................................iv
ACKNOWLEDGEMENT................................................................................................................v
ABSTRACT.....................................................................................................................................vi
List of Figures.................................................................................................................................vii
Table of Contents.............................................................................................................................ix
CHAPTER 1......................................................................................................................................1
JAVASCRIPT INTRODUCTION....................................................................................................1
1.1 INTRODUCTION TO JAVASCRIPT....................................................................................1
1.2 JAVASCRIPT VARIABLES..................................................................................................4
1.3 INTRODUCTION TO ES6.....................................................................................................7
1.4 JAVASCRIPT OBJECTS.......................................................................................................9
CHAPTER 2....................................................................................................................................12
JAVASCRIPT FUNCTIONS & APIS............................................................................................12
2.1 FUNCTIONS........................................................................................................................12
2.1.1 Arrow Functions.................................................................................................................13
2.1.2 Async Functions.............................................................................................................14
2.2 WHAT IS AN API?..............................................................................................................16
2.3 BITCOIN API.......................................................................................................................17
2.4 COVID API...........................................................................................................................18
CHAPTER 3....................................................................................................................................22
JAVASCRIPT FORMS...................................................................................................................22
3.1 POP-UP BOXES...................................................................................................................22
3.2 FORMS.................................................................................................................................22
3.3 JS FORM TO VARIABLES.................................................................................................24
3.4 FORM TO TABLES.............................................................................................................24
3.5 JS ARRAYS..........................................................................................................................26
ASSIGNMENT...............................................................................................................................28
CHAPTER 4....................................................................................................................................31
REACTJS........................................................................................................................................31
4.1 REACT INTRODUCTION...................................................................................................31
4.2 INSTALLATION OF REACT..............................................................................................32
4.3 FUNCTIONAL COMPONENTS.........................................................................................34

ix
 4.4 CLASS COMPONENTS......................................................................................................35
CHAPTER 5....................................................................................................................................37
REACT PROPS & BOOTSTRAP..................................................................................................37
5.1 VAR DATA MAP.................................................................................................................37
5.2 OBJECT DATA MAP :........................................................................................................38
5.3 REACT PROPS.....................................................................................................................40
5.4 REACT BOOTSTRAP :.......................................................................................................41
CHAPTER 6....................................................................................................................................43
REACT HOOKS.............................................................................................................................43
6.1 REACT HOOK.....................................................................................................................43
6.1.1 useState...........................................................................................................................43
6.1.2 useEffect.........................................................................................................................44
ASSIGNMENT 2............................................................................................................................45
CHAPTER 7....................................................................................................................................48
PROJECT........................................................................................................................................48
CONCLUSION...............................................................................................................................50
REFRENCES..................................................................................................................................51

x
 Project ID - 337626 JAVASCRIPT INTRODUCTION

CHAPTER 1
JAVASCRIPT INTRODUCTION
1.1 INTRODUCTION TO JAVASCRIPT
JavaScript is a versatile, high-level programming language commonly used for web
development. It enables interactive and dynamic elements on websites, enhancing user
experience by allowing manipulation of content, animations, and interactions. As a client-
side scripting language, it runs directly in web browsers, facilitating responsive and
engaging web applications.

JavaScript is a widely used programming language with various applications:

 Web Development: Used to create interactive and dynamic web pages, enhance
user interfaces, and build web applications.
 Front-End Development: Powers the behavior of web elements, animations, and
user interactions, making websites more engaging.
 Back-End Development: With technologies like Node.js, JavaScript is used to
build server-side applications, APIs, and real-time services.
 Mobile App Development: Through frameworks like React Native and
frameworks like Apache Cordova, JavaScript can be used to develop cross-
platform mobile apps.
 Game Development: Utilized for browser-based games and with libraries like
Phaser and Three.js for more complex game development.
 Desktop Applications: Tools like Electron enable the creation of desktop
applications using web technologies and JavaScript.
 Server-Side Scripting: In addition to traditional web use, JavaScript (Node.js)
can serve as a server-side language for building scalable and efficient applications.
 Web APIs: JavaScript interacts with various APIs, allowing developers to
integrate services like social media, maps, and more into their websites.
 Data Visualization: Libraries like D3.js help create interactive and informative
data visualizations on websites.
 Automation: Used for automating repetitive tasks, browser actions, and data
manipulation through tools like Puppeteer.
 IoT (Internet of Things): JavaScript can be employed in programming IoT

Gujarat Technological University 1 GEC Bharuch

 Project ID - 337626 JAVASCRIPT INTRODUCTION

devices and connecting them to web services.

 Artificial Intelligence: With libraries like TensorFlow.js, JavaScript enables
browser-based AI and machine learning applications.
 Extensions and Plugins: JavaScript powers browser extensions and plugins,
adding functionality to browsers.
 Real-Time Applications: Used for creating real-time chat applications,
collaborative tools, and live updates.
 Audio/Video Manipulation: JavaScript can manipulate and control audio and
video elements in web applications.
 Web Services: JavaScript helps create and consume web services using REST or
GraphQL.

Inline Script: Place JavaScript directly within HTML using <script> tags. This is quick
but can clutter HTML.

Fig 1.1 JavaScript Function

Gujarat Technological University 2 GEC Bharuch

 Project ID - 337626 JAVASCRIPT INTRODUCTION

External Script: Link an external JavaScript file using the <script> tag's src attribute.

Fig 1.2 External Script

JavaScript (script.js):

Fig 1.3 Alert Function

Async Loading: Load external scripts asynchronously for faster page rendering.

Fig 1.4 Async Loading

Defer Loading: Load external scripts while not blocking HTML parsing.

Fig 1.5 Defer Loading

Gujarat Technological University 3 GEC Bharuch

 Project ID - 337626 JAVASCRIPT INTRODUCTION

1.2 JAVASCRIPT VARIABLES

In JavaScript, variables are used to store and manage data. Here's an explanation of
JavaScript variables:
 Declaration: To create a variable, use the var, let, or const keyword, followed by
the variable name.

Fig 1.6 Variable Declaration

 Assignment: Variables can hold different types of data: numbers, strings, objects,
etc.

Fig 1.7 Assignment in JavaScript

 Initialization: Variables can be declared and assigned values in a single step.

Fig 1.8 Initialization in JavaScript

 Scope: The scope of a variable defines where it can be accessed. Variables

declared with var have function scope.

Gujarat Technological University 4 GEC Bharuch

 Project ID - 337626 JAVASCRIPT INTRODUCTION

Fig 1.9 Variable Scope

 Constants: Variables declared with const cannot be reassigned after their initial
value is set.

Fig 1.10 Constant Variables

 Naming Conventions: Variable names can contain letters, digits, underscores,

and dollar signs. They must start with a letter, underscore, or dollar sign.
Variables are case-sensitive.

Fig 1.11 Naming Convention

 Dynamic Typing: JavaScript is dynamically typed, meaning variables can change

types during runtime.

Gujarat Technological University 5 GEC Bharuch

 Project ID - 337626 JAVASCRIPT INTRODUCTION

Fig 1.12 Dynamic Typing

 Hoisting: Variable declarations are "hoisted" to the top of their scope during
execution, but assignments remain in place.

Fig 1.13 Hoisting in JavaScript

Gujarat Technological University 6 GEC Bharuch

 Project ID - 337626 JAVASCRIPT INTRODUCTION

1.3 INTRODUCTION TO ES6

ES6, also known as ECMAScript 2015, is an enhanced version of JavaScript that brought
a range of new features and syntax improvements to the language. These advancements
were designed to make code more concise, readable, and efficient, ultimately enhancing
the overall developer experience.
ES6 introduced concepts such as arrow functions, which provide a more concise way to
write functions, making code both easier to understand and more streamlined. It brings
several new features and improvements to make JavaScript more expressive, readable,
and powerful. Here's a theoretical overview of some prominent ES6 features:
 Block-Scoped Declarations (let and const): ES6 introduced let and const for
declaring variables with block-level scope, reducing unexpected behavior and
enabling more precise variable management.
 Arrow Functions: Arrow functions provide a concise syntax for writing
functions. They inherit the surrounding context's this value, which can be
beneficial when dealing with callbacks and event handlers.
 Template Literals: Template literals allow embedding expressions within strings
using ${} syntax. This simplifies string concatenation and facilitates multiline
strings.
 Destructuring: Destructuring allows extracting values from arrays and objects
into distinct variables. This improves code clarity and reduces boilerplate.
 Spread Operator: The spread operator (...) enables easy expansion of arrays,
objects, and function arguments. It simplifies tasks like array concatenation and
copying objects.
 Classes: ES6 introduced a more structured syntax for creating classes and objects,
making object-oriented programming more intuitive and consistent.
 Promises: Promises provide a standardized way to manage asynchronous
operations, improving code readability and maintainability compared to traditional
callback-based approaches.
 Modules: ES6 introduced native module support, allowing code to be organized
into separate files with clear dependencies, which enhances code maintainability
and reusability.
 Default Parameters: Functions can have default parameter values, reducing the

Gujarat Technological University 7 GEC Bharuch

 Project ID - 337626 JAVASCRIPT INTRODUCTION

need for explicit checks and providing more flexibility when calling functions.
 Symbol: Symbols are unique and immutable data types that can be used as
property keys. They prevent unintentional property clashes in objects.
 Iterators and Generators: ES6 introduced iterators and generators to facilitate
efficient looping through data structures and asynchronous programming.
 Map and Set: These new data structures provide alternatives to objects and arrays
for certain use cases, offering better control and performance.
 Array Methods (map, filter, reduce): These methods simplify array
manipulation and transformation, enhancing code readability and maintainability.
 Enhanced Object Properties: ES6 brought shorthand syntax for defining object
methods and computed property names.
 Async/Await: Building on top of Promises, async and await keywords provide a
more synchronous-like syntax for handling asynchronous operations.
ES6's features collectively improve JavaScript's ability to handle modern programming
challenges, enhance code organization, and create more efficient and maintainable
applications.
Here are the browsers that supports ES6 :

Fig 1.14 Browser Support

Gujarat Technological University 8 GEC Bharuch

 Project ID - 337626 JAVASCRIPT INTRODUCTION

1.4 JAVASCRIPT OBJECTS

During the course of the internship, we delved into the realm of object-oriented
programming in JavaScript. One of the practical applications of this knowledge was
creating a dynamic table to display COVID-19 case data. Utilizing the principles of
object-oriented programming, we crafted a structured approach to represent and organize
the COVID-19 data.
By defining objects to encapsulate information about each case, we were able to create a
clear blueprint for how data should be organized. Each object contained properties such
as country, confirmed cases, recovered cases, and deaths. Through JavaScript's object-
oriented paradigm, we established a systematic framework for managing and
manipulating this data

JavaScript Objects: Objects are data structures that hold related information and
functionality. They consist of key-value pairs, where keys are strings and values can be of
various types.

Fig 1.15 JavaScript Objects

Gujarat Technological University 9 GEC Bharuch

 Project ID - 337626 JAVASCRIPT INTRODUCTION

TASK :
Displaying the Data of Objects into a tabular form using JavaScript

Fig 1.16 Code of Task

Fig 1.17 Code of Task

Gujarat Technological University 10 GEC Bharuch

 Project ID - 337626 JAVASCRIPT INTRODUCTION

OUTPUT :

Fig. 1.18 Code Output

Gujarat Technological University 11 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FUNCTIONS & APIS

CHAPTER 2
JAVASCRIPT FUNCTIONS & APIS
2.1 FUNCTIONS

In JavaScript, a function is a block of code that is executed when it is called. Functions

can be used to perform a specific task, such as calculating a value, validating user input,
or formatting text.

Functions are defined using the function keyword. The function name is followed by a set
of parentheses, which may contain arguments. The body of the function is enclosed in
curly braces.

Functions are a powerful tool that can be used to make JavaScript code more reusable,
organized, and efficient. They are a fundamental part of the language, and they are
essential for creating complex web applications.

Here are some of the benefits of using functions in JavaScript:

 Reusability: Functions can be reused in different parts of your code. This makes your
code more modular and easier to maintain.
 Organization: Functions can help you organize your code into logical blocks. This
makes your code easier to read and understand.
 Efficiency: Functions can help you avoid duplicating code. This makes your code
more efficient and easier to debug.

Gujarat Technological University 12 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FUNCTIONS & APIS

Fig 2.1 Simple JavaScript Function

2.1.1 Arrow Functions

Arrow functions are a new feature in JavaScript that were introduced in ES6. They are a
concise way to write anonymous functions, and they have some subtle differences from
regular functions.

Here is a simple example of an arrow function:

const double = (x) => x * 2;

This function takes an integer as its argument and returns the double of that integer.

The syntax for an arrow function is:

(parameters) =>expression

The parameters are the arguments that the function takes. The expression is the body of
the function. The expression is evaluated, and the result is returned.

In this case, the function takes one parameter, x, and returns the value of x multiplied by
2.
Arrow functions can also be used without parameters. In this case, the parentheses are
optional.
Here is an example of an arrow function without parameters:
const greet = () => "Hello, world!";

Gujarat Technological University 13 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FUNCTIONS & APIS

This function returns the string "Hello, world!".

Arrow functions have some subtle differences from regular functions. Here are a few of
the key differences:
Arrow functions do not have their own this keyword. The this keyword in an arrow
function refers to the object that called the function.
 Arrow functions cannot be used as constructors.
 Arrow functions cannot be used with the new keyword.
 Arrow functions cannot be used with the call() or apply() methods.
Overall, arrow functions are a concise and powerful way to write anonymous functions in
JavaScript. They are a relatively new feature, but they are quickly becoming popular.
Here are some of the benefits of using arrow functions:
 They are concise: Arrow functions are shorter than regular functions, which can make
your code more readable and easier to maintain.
 They are efficient: Arrow functions do not have their own this keyword, which can
make them more efficient in some cases.
 They are flexible: Arrow functions can be used in a variety of situations, including as
event handlers, callbacks, and anonymous functions.

Fig 2.2 Arrow Function Example

2.1.2 Async Functions

An async function in JavaScript is a special type of function that is designed to work with
asynchronous operations, such as making network requests, reading files, or waiting for a

Gujarat Technological University 14 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FUNCTIONS & APIS

timer. Async functions are defined using the async keyword before the function
keyword.

Fig 2.3 Async Function Example

Fig 2.4 Async Function Example

In this example:
 We define an async function fetchData.
 Inside the function, we use the await keyword to pause execution until the fetch
function returns a promise. This promise resolves to a response object from the
API.

Gujarat Technological University 15 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FUNCTIONS & APIS

 We then use await again to pause until the response is converted to JSON using
the response.json() method. This also returns a promise.
 Finally, we log the JSON data to the console, handling any errors that may occur
with a try...catch block.
 Async functions make it easier to work with asynchronous code in a more
synchronous-looking manner, which can improve code readability and
maintainability. They also allow you to handle errors more gracefully by using
try...catch.

2.2 WHAT IS AN API?

API stands for "Application Programming Interface." It is a set of rules and protocols that
allows different software applications to communicate with each other. APIs define the
methods and data formats that applications can use to request and exchange information.
APIs are essential in modern software development and are used extensively in web
development, mobile app development, and many other areas of computing.
Here are some key points to understand about APIs:
 Interoperability: APIs enable different software systems, written in different
languages or running on different platforms, to interact and work together. They
provide a standardized way for applications to communicate and share data.
 Abstraction: APIs abstract the underlying complexity of systems. They allow
developers to interact with a service or system without needing to understand the
intricacies of its implementation. This abstraction simplifies the development
process.
 Reuse: APIs promote code reuse. Instead of building a specific functionality from
scratch, developers can use existing APIs to add features or access data from other
services or systems. This saves time and effort.
 Security: APIs often include security mechanisms, such as authentication and
authorization, to control access to data and services. This ensures that only
authorized users or applications can use the API.
 Documentation: Good APIs come with clear and comprehensive documentation.
This documentation explains how to use the API, what data it expects, and what it
returns. It helps developers understand and use the API effectively.
 Web APIs: These are APIs exposed over the internet using HTTP. They are

Gujarat Technological University 16 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FUNCTIONS & APIS

commonly used for web services, such as RESTful and GraphQL APIs.
 Library APIs: These are APIs provided by libraries or frameworks to extend the
functionality of a programming language.
 Operating System APIs: These allow software applications to interact with the
underlying operating system, accessing resources like files, hardware, and system
services.
 Hardware APIs: These enable software to communicate directly with hardware
devices, like cameras, sensors, and printers.
 RESTful APIs: Representational State Transfer (REST) is a common architectural
style for designing networked applications. RESTful APIs use HTTP methods
(GET, POST, PUT, DELETE) to perform CRUD (Create, Read, Update, Delete)
operations on resources, typically using JSON or XML as the data format.
 GraphQL APIs: GraphQL is a query language for APIs that allows clients to
request exactly the data they need and nothing more. It offers a more flexible and
efficient way to retrieve data compared to traditional REST APIs.

In summary, APIs are a fundamental concept in software development, enabling different

applications to communicate, share data, and extend their functionality. They play a
crucial role in the modern digital ecosystem, powering everything from web services and
mobile apps to IoT devices and cloud computing.

2.3 BITCOIN API

To access Bitcoin price data using the CoinDesk API in JSON format, you can make a
simple HTTP GET request to their API endpoint. CoinDesk provides cryptocurrency
price information, including Bitcoin, in various formats including JSON.
Here's an example of how to use JavaScript to fetch Bitcoin price data from the CoinDesk
API and parse the JSON response:

Gujarat Technological University 17 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FUNCTIONS & APIS

Fig 2.5 Data Fetching from Bitcoin API

In this example:
1. We use the fetch function to make an HTTP GET request to the CoinDesk API's
endpoint for current Bitcoin price data in JSON format
(https://api.coindesk.com/v1/bpi/currentprice.json).
2. We check the response status to ensure it's a successful response (HTTP status
code 200). If there's an error, we handle it by throwing an error.
3. If the response is successful, we parse the JSON data using response.json().
4. We access the Bitcoin price data in USD from the JSON response using
data.bpi.USD and log it to the console.

2.4 COVID API

Data Fetching :
 Use the fetch() function to make a request to an API endpoint.
 Receive the response in JSON format.
 Extract the relevant data fields from the response for further processing.
Mapping :
 Utilize a mapping library like Leaflet.js or Google Maps API to create a map.

Gujarat Technological University 18 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FUNCTIONS & APIS

Fetching Data from https://data.covid19india.org/data.json API :

Fig 2.6 Data Fetching from Covid API

Fig 2.7 Data Fetching from Covid API

Gujarat Technological University 19 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FUNCTIONS & APIS

Fig 2.8 Data Fetching from Covid API

OUTPUT :

Fig 2.9 Covid Portal

Gujarat Technological University 20 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FUNCTIONS & APIS

JS Code of above output :

Fig 2.10 Code for Covid Portal

Gujarat Technological University 21 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FORMS

CHAPTER 3
JAVASCRIPT FORMS
3.1 POP-UP BOXES

Alert boxes are used to display a simple message to the user. They only have an "OK"
button, which the user can click to dismiss the message.
Confirm boxes are used to ask the user for confirmation. They display a message along
with "OK" and "Cancel" buttons.

Fig 3.1 Alert Box

3.2 FORMS

JavaScript can be used to work with HTML forms to validate input, handle form
submissions, and manipulate form elements dynamically. Here's an overview of how
JavaScript can be used with HTML forms:
1. Accessing Form Elements : You can access form elements in JavaScript using
their id, name, or by their position in the DOM. For example, to access an input
element with the id "username," you can use:

Fig 3.2 Accessing Form Data

2. Form Validation: JavaScript is commonly used for client-side form validation to

ensure that user inputs meet specific criteria. For example, you can validate that a
required field is not empty or that an email address is in a valid format

Gujarat Technological University 22 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FORMS

Fig 3.3 Form Validation

3. Form Submission Handling: JavaScript can be used to intercept form

submissions and perform actions before or after submission. You can use the
submit event to achieve this.

Fig 3.4 Form Submission Handling

4. Dynamic Form Manipulation: JavaScript can be used to add or remove form

elements dynamically. For example, you can create form fields based on user
interactions or change form elements based on selections made by the user.

3.3 JS FORM TO VARIABLES

JavaScript enables the handling of form input in web development. Forms contain
elements like text fields and checkboxes. JavaScript can access these elements using their
IDs or names. When users submit a form, a "submit" event triggers, and JavaScript can

Gujarat Technological University 23 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FORMS

capture input values using .value. Validation ensures data accuracy. Through event
listeners, JavaScript intercepts the submission process, allowing developers to prevent the
default action, process data, and perform validations. This dynamic interaction enables
real-time updates, like modifying dropdown options based on user choices. JavaScript's
role in forms enhances user interaction and data handling on web pages, resulting in more
engaging and responsive experiences.

3.4 FORM TO TABLES

During my internship, I delved into the integration of HTML forms and tables within web
development. Forms provide a means for users to input data, which can be captured using
JavaScript. This data, once validated and processed, can be seamlessly transferred into
tables for organized presentation. JavaScript facilitates the interaction between form
submission and data population, ensuring accurate data transfer and real-time updates. By
leveraging event listeners, I learned to capture form submissions, prevent default actions,
and subsequently populate tables with the collected data. This integration empowers
websites to deliver enhanced user experiences, making data collection and presentation
more structured and user-friendly. My internship experience has equipped me with
valuable skills in connecting user input, data processing, and organized data display
through the dynamic interplay of forms and tables. Below is the example of putting data
of a form into a tables using JS6.

Gujarat Technological University 24 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FORMS

JS CODE to get Form data into a Table :

Fig 3.5 Code for Forms to Tables

Gujarat Technological University 25 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FORMS

OUTPUT :

Fig. 3.6 Form to Table Output

3.5 JS ARRAYS
JavaScript arrays are like lists that hold multiple pieces of data. Just like arranging items
in a row, arrays store different values in a single variable. You can put numbers, words, or
even objects in an array. Each item has a position called an index, starting from 0. For
example, in a shopping list array, the first item is at index 0, the second at index 1, and so
on. You can easily add or remove items from arrays, making them flexible. Arrays also
have helpful functions, called methods, for sorting, searching, and more. Learning about
arrays in JavaScript is like learning how to organize things neatly in a box so you can
access and manage them easily.

Fig 3.7 JavaScript Array Example

Gujarat Technological University 26 GEC Bharuch

 Project ID - 337626 JAVASCRIPT FORMS

 Ordered Collection: Arrays in JavaScript are ordered collections of values. Each

value within an array has an index, starting from 0 for the first element.
 Dynamic Length: Arrays in JavaScript are dynamic, meaning they can grow or
shrink as needed. You can add or remove elements from an array without
specifying a fixed size.
 Mixed Data Types: JavaScript arrays can hold elements of different data types,
including numbers, strings, objects, functions, and even other arrays.
 Zero-Based Indexing: Array indices start at 0. The first element of an array is at
index 0, the second element at index 1, and so on.
 Array Length: You can find the number of elements in an array using the length
property.
 Accessing Elements: You can access individual elements in an array using square
brackets [] and specifying the index. For example, myArray[0] accesses the first
element of the array.
 Adding Elements: You can add elements to the end of an array using the push
method. Elements can also be added or inserted at specific positions using
methods like unshift and splice.
 Removing Elements: Elements can be removed from the end of an array using the
pop method or from the beginning using the shift method. Elements can also be
removed at specific positions using splice.
 Iterating: You can loop through the elements of an array using for loops, forEach,
for...of, or other iteration methods. This allows you to perform actions on each
element in the array.
 Searching: JavaScript provides methods like indexOf and includes to search for
elements within an array. These methods help you determine if an element exists
in the array and find its index.
 Transformation: You can transform array elements using methods like map, filter,
and reduce. These methods are useful for creating new arrays based on existing
ones or modifying array elements.

Gujarat Technological University 27 GEC Bharuch

 Project ID - 337626 ASSIGNMENT

ASSIGNMENT

Fig 3.8 Assignment

COVID data search tool that fetches information from an API based on user-provided
dates. The user enters a specific date, and the application retrieves relevant COVID-
related data for that date. The data is then neatly displayed in a tabular format for easy
comprehension.

The HTML and Bootstrap CSS is also used in this project but the main work of fetching
the data from Covid API is done by below JS code :

Gujarat Technological University 28 GEC Bharuch

 Project ID - 337626 ASSIGNMENT

JS Code :

Fig 3.9 Assignment Code

Gujarat Technological University 29 GEC Bharuch

 Project ID - 337626 ASSIGNMENT

OUTPUT :

Fig 3.10 Assignment Output

Gujarat Technological University 30 GEC Bharuch

 Project ID - 337626 ASSIGNMENT

Gujarat Technological University 31 GEC Bharuch

 Project ID - 337626 REACTJS

CHAPTER 4
REACTJS
4.1 REACT INTRODUCTION
ReactJS, often simply referred to as React, is an open-source JavaScript library for
building user interfaces (UIs) and user interface components for web applications. It was
developed and is maintained by Facebook and a community of individual developers and
companies. React is widely used for creating interactive and dynamic web applications.
Here are key features and concepts associated with React:
 Component-Based: React is centered around the concept of reusable
components. Components are self-contained, modular pieces of code that
represent a part of the user interface. These components can be composed to build
complex user interfaces.
 Virtual DOM: React uses a virtual representation of the DOM (Document Object
Model) called the Virtual DOM. When changes are made to the UI, React first
updates the Virtual DOM, then efficiently updates the actual DOM based on the
changes in the Virtual DOM. This approach helps improve performance.
 Declarative Syntax: React promotes a declarative style of programming, where
you describe what the UI should look like at any given point in time. Developers
specify the desired UI state, and React takes care of updating the UI to match that
state.
 One-Way Data Flow: In React, data flows in one direction, from parent
components to child components. This helps maintain a clear and predictable data
flow, making it easier to understand how data is shared and modified within an
application.
 JSX (JavaScript XML): React uses JSX, a syntax extension for JavaScript that
allows developers to write HTML-like code within JavaScript. JSX makes it
easier to describe the UI components and their structure.
 Component Lifecycle: React components have a lifecycle with various methods
that can be overridden to perform actions at different stages, such as when a
component is created, updated, or removed from the DOM. This provides control
over the behavior of components.
 State Management: React allows components to manage their internal state,

Gujarat Technological University 32 GEC Bharuch

 Project ID - 337626 REACTJS

which can change over time based on user interactions or other events. State
management in React helps create dynamic and interactive UIs.
 Community and Ecosystem: React has a large and active community of
developers, which has led to the creation of a rich ecosystem of libraries and tools,
including state management libraries like Redux, routing libraries like React
Router, and UI component libraries like Material-UI.
 Mobile Development: React can also be used for mobile app development
through the React Native framework. It allows developers to build native mobile
apps for iOS and Android using the same React components and principles used
in web development.
React's popularity is driven by its simplicity, performance optimizations, and the
developer-friendly ecosystem that has evolved around it. It's commonly used by
companies and developers to create single-page applications, progressive web apps, and
other interactive web interfaces.

4.2 INSTALLATION OF REACT

To get started with ReactJS, you'll need to set up a development environment. ReactJS
can be set up using Node.js and npm (Node Package Manager). Here are the basic steps to
install and set up ReactJS:
 Node.js and npm: First, you need to ensure that you have Node.js and npm
installed on your system. You can download and install them from the official
website: Node.js Downloads. After installation, you can verify the installation by
running the following commands in your terminal: node -v npm –v
These commands should display the installed Node.js and npm versions.
 Create a React App: React provides a tool called "Create React App" to quickly
set up a new React application with all the necessary configuration. To create a
new React app, open your terminal and run the following command: npx create-
react-app my-react-app
Replace my-react-app with your desired project name. This command will create a new
directory with the project structure and initial files.
 Navigate to the Project Directory: Move to your project directory using the cd
command: cd my-react-app
 Start the Development Server: Once you're inside your project directory, you
can start the development server to run your React application locally. Use the

Gujarat Technological University 33 GEC Bharuch

 Project ID - 337626 REACTJS

following command: npm start

This command will start the development server, and your React app will be available at
http://localhost:3000 by default. You can open this URL in your web browser to see
your app running.
 Edit and Build Your App: You can now start editing your React app. The main
entry point is usually the src directory, where you'll find the App.js file. You can
modify this file and create additional components as needed for your project.
 Installing Additional Packages: If you need to add additional packages or
libraries to your React project (e.g., state management libraries like Redux or UI
component libraries like Material-UI), you can use npm to install them. For
example: npm install redux
 Production Build: When you're ready to deploy your React app to a production
environment, you can create a production build using the following command:
npm run build
This command generates an optimized and minified bundle of your app in the build
directory. That's it! You've successfully installed and set up a basic ReactJS development
environment. You can now start building your React applications by editing the code in
your project directory.
You could also install node directly from their website :

Fig 4.1 Node Installation

Below is an example of a React app in the editor after installation :

Gujarat Technological University 34 GEC Bharuch

 Project ID - 337626 REACTJS

Fig 4.2 React App Example

4.3 FUNCTIONAL COMPONENTS

Functional components are a fundamental part of React. They are also known as
"stateless" or "dumb" components. In React, components are the building blocks of the
user interface, and functional components are one way to create these components.
Functional components are defined as JavaScript functions and return a piece of UI as a
result. Here's an example of a simple functional component in React:

Fig 4.3 Functional Components

We import the React library at the top. This is necessary because JSX (the HTML-like
syntax within the component) gets transpiled into React.createElement calls. We define a
function called Greeting which takes props (short for properties) as an argument. Props
are used to pass data from parent components to child components. Inside the Greeting
function, we return JSX that represents the UI. In this case, it's a simple heading that
greets a person by name. Finally, we export the Greeting component so that it can be
used in other parts of the application.

Gujarat Technological University 35 GEC Bharuch

 Project ID - 337626 REACTJS

4.4 CLASS COMPONENTS

Class components are another way to create components in React. Unlike functional
components, class components are defined as JavaScript classes. Class components are
also known as "stateful" or "smart" components because they have the ability to manage
state and have access to lifecycle methods.
Here's an example of a simple class component in React:

Fig 4.4 React Class Component

How React App works ?

A React app operates by structuring the user interface as a hierarchy of reusable

components. During the initial rendering phase, React calls the render method of each
component to create a Virtual DOM representation. This Virtual DOM is a lightweight
copy of the actual DOM, allowing React to efficiently track changes. When state or props
change, React generates a new Virtual DOM, employs a diffing algorithm to identify
differences, and updates the real DOM with minimal changes, a process known as
reconciliation. React's unidirectional data flow ensures predictable updates, and
components can manage their state. User interactions trigger component re-renders, and
data flows between components via props. React promotes code reusability and offers
performance optimizations, making it a powerful framework for building dynamic and
responsive web applications. The final app is typically built, optimized, and deployed for
public access.

Gujarat Technological University 36 GEC Bharuch

 Project ID - 337626 REACTJS

Fig 4.5 Working of React

Gujarat Technological University 37 GEC Bharuch

 Project ID - 337626 REACT PROPS & BOOTSTRAP

CHAPTER 5
REACT PROPS & BOOTSTRAP
5.1 VAR DATA MAP
In React, you can use the map function to iterate over an array of data and generate
dynamic content based on that data. This is often used to create lists or tables of items.
Here's how you can use the map function to render variable data in a React component:
Assuming you have an array of data like this:

Fig 5.1 Object Data

You can use the map function to render this data in a React component:

Fig 5.2 Map Function

In this example:

Gujarat Technological University 38 GEC Bharuch

 Project ID - 337626 REACT PROPS & BOOTSTRAP

1. We import React and create a functional component called ItemList.

2. Inside the component, we use the map function to iterate over the data array.
3. For each item in the array, we return a JSX <li> element with the item's id as the
key (used for React's reconciliation) and the name as the content.
4. The result is a dynamic list of items rendered as an unordered list (<ul>).
You can then use this ItemList component in your application and pass in the data array
as a prop to render a list of items.

Fig 5.3 Data Mapping Using React

5.2 OBJECT DATA MAP :

In a React application, you don't typically perform Object-Data Mapping (ODM) directly
as you would with databases. Instead, React is primarily concerned with rendering user
interfaces (UI) and managing the state of UI components. However, you can apply similar
principles in your React application when dealing with data from various sources, such as
APIs or databases.
Here's how you can approach the concept of Object-Data Mapping in a React context:
1. Data Representation: In React, data is often represented as JavaScript objects or
arrays. These objects can be used to store and manage data within components.
2. Mapping Data to Components: You map your data to React components. Each
component can represent a specific data entity or item.

Gujarat Technological University 39 GEC Bharuch

 Project ID - 337626 REACT PROPS & BOOTSTRAP

3. Rendering Components: You render these components dynamically based on the

data. This is commonly done using the map function or other iteration techniques.
4. Data Transformation: You can transform and manipulate the data as needed
before rendering it. This can include filtering, sorting, or formatting data before
displaying it in the UI.
Here's a simplified example of mapping data to React components:

Fig 5.4 Mapping React Component

Gujarat Technological University 40 GEC Bharuch

 Project ID - 337626 REACT PROPS & BOOTSTRAP

5.3 REACT PROPS

In React, props (short for "properties") is a mechanism for passing data from a parent
component to a child component. Props are read-only and are used to communicate data
from one component to another in a unidirectional flow. Here's an overview of React
props:
1. Passing Data: Props are a way to pass data from a parent component to a child
component. The parent component provides the data, and the child component
receives and uses it.
2. Immutable: Props are immutable, meaning they cannot be modified by the child
component. They are meant to be read-only, ensuring data integrity.
3. JavaScript Objects: Props are represented as JavaScript objects, where each key-
value pair corresponds to a piece of data. The keys (property names) are used to
access the data within the child component.
4. Declaration: In the child component, props are declared as function parameters in
functional components or accessed via the this.props object in class components.
5. Usage: Once received in the child component, props can be used to display data in
the component's rendered output, make decisions based on the data, or pass it
further down the component hierarchy.

Fig 5.5 React Props

Gujarat Technological University 41 GEC Bharuch

 Project ID - 337626 REACT PROPS & BOOTSTRAP

5.4 REACT BOOTSTRAP :

React Bootstrap is a popular open-source library that combines the front-end framework
Bootstrap with the power and flexibility of React, allowing you to easily create
responsive and attractive web interfaces. It provides a set of pre-designed UI components,
such as buttons, forms, modals, navigation bars, and more, all implemented as React
components. React Bootstrap simplifies the process of building web applications by
providing a set of ready-made, customizable components that adhere to Bootstrap's
design principles.

Install React Bootstrap: To install React Bootstrap, you can use npm or yarn. Open your
terminal, navigate to your project directory, and run one of the following commands:

Using npm:

Fig 5.6 Installing Bootstrap

Import Bootstrap CSS: To apply Bootstrap styles to your React components, you need
to import the Bootstrap CSS in your project.

Start Your React Application: If your development server isn't running already, start it
by running the following command in your project directory: npm start

Creating a Table using React Bootstrap :

Gujarat Technological University 42 GEC Bharuch

 Project ID - 337626 REACT PROPS & BOOTSTRAP

Fig. 5.7 Data Table Using React Bootstrap

Gujarat Technological University 43 GEC Bharuch

 Project ID - 337626 REACT HOOKS

CHAPTER 6
REACT HOOKS
6.1 REACT HOOK
React Hooks are functions that allow you to add state and other React features to
functional components. They were introduced in React 16.8 to enable developers to
manage state and side effects in functional components, making it easier to reuse logic
across components. Here's a brief explanation of some key React Hooks:

useState: Allows functional components to manage state. It takes an initial state value
and returns an array with the current state and a function to update it.

useEffect: Enables side effects in functional components, such as data fetching, DOM
manipulation, and subscriptions. It takes a function to run after rendering and can specify
dependencies to control when it runs.

Custom Hooks: Developers can create their own custom hooks to encapsulate and reuse
logic across components, promoting code reusability.

Overall, React Hooks allow functional components to have the same capabilities as class
components, making it easier to write clean, reusable, and maintainable code while
avoiding some of the complexities associated with class component

6.1.1 useState

useState is a React Hook that allows you to add state management to functional
components in React. It is one of the most commonly used hooks and enables you to
create and manage state variables within a functional component. Here's how useState
works:

Import useState: You need to import the useState function from the react library.

import React, { useState } from 'react';

Declare State Variables: Inside your functional component, declare a state variable
using the useState function. The useState function takes one argument, which is the
initial state value.

Gujarat Technological University 44 GEC Bharuch

 Project ID - 337626 REACT HOOKS

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

In this example, we're declaring a state variable named count with an initial value of 0.
setCount is a function provided by useState that you can use to update the count state.

Access and Update State: You can access the current state value (in this case, count)
just like any other variable. To update the state, use the setCount function. It takes a new
value as an argument and triggers a re-render of the component.

6.1.2 useEffect

useEffect is a React Hook used for handling side effects (like data fetching or DOM
manipulation) in functional components. You pass it a function that runs after rendering,
and it can also take an optional dependency array to control when it runs. It's great for
managing async tasks and cleanup operations.

Example:

Fig 6.1 useEffect Hook

Gujarat Technological University 45 GEC Bharuch

 Project ID - 337626 ASSIGNMENT 2

ASSIGNMENT 2

Fig 6.2 Assignment 2

Gujarat Technological University 46 GEC Bharuch

 Project ID - 337626 ASSIGNMENT 2

Code for fetching the data from sports API :

Fig 6.3 Assignment Code

Fig 6.4 Assignment Code

Gujarat Technological University 47 GEC Bharuch

 Project ID - 337626 ASSIGNMENT 2

OUTPUT :

Fig 6.5 Assignment Output

Gujarat Technological University 48 GEC Bharuch

 Project ID - 337626 PROJECT

CHAPTER 7
PROJECT
A News App that fetches data from different APIs and renders on the page.
Code of the project :
After exporting from App.jsx, import the components in the Main.jsx. And, add css files
as per the design requirements.

Fig 7.1 Project Code 1

Fig 7.2 Project Code 2

Gujarat Technological University 49 GEC Bharuch

 Project ID - 337626 PROJECT

Fig 7.3 Project Code 3

OUTPUT:

Fig 7.4 Project Output

Fig 7.5 Project Output

Gujarat Technological University 50 GEC Bharuch

 Project ID - 337626 CONCLUSION

CONCLUSION
In conclusion, my experience with ReactJS in dynamic webpage design has been both
enlightening and transformative. React's exceptional capabilities for creating dynamic,
interactive, and responsive web interfaces have opened new horizons in web
development.

Throughout this journey, I delved deep into React's core principles, including component-
based architecture and state management. This foundation allowed me to construct
webpages that adapt to user interactions in real-time, significantly enhancing the user
experience.

Working on dynamic webpage projects showcased the true power of React. Whether it
was dealing with real-time updates or crafting user dashboards with interactive charts,
React's versatility shone through.

Moreover, I gained proficiency in optimizing performance, employing efficient data

fetching techniques, and ensuring seamless navigation using React Router. This holistic
understanding of React's ecosystem has equipped me to tackle complex webpage design
challenges.

As I conclude this experience, I'm excited to leverage my newfound expertise to create

innovative and user-centric web applications. React's dynamic capabilities have become
an integral part of my toolkit, and I look forward to applying them.

Gujarat Technological University 51 GEC Bharuch

 Project ID - 337626 REFRENCES

REFRENCES

[1] https://infolabz.in/SI/react_internship
[2] https://react-bootstrap.netlify.app/docs/getting-started/introduction/
[3] https://react.dev/learn
[4] https://www.w3schools.com/react/default.asp

Gujarat Technological University 52 GEC Bharuch