INTERNSHIP REPORT

On React Js

LOK NAYAK JAI PRAKASH INSTITUTE OF TECHNOLOGY, CHAPRA

COMPUTER SCIENCE AND ENGINEERING

SESSION (2019-2023)

SUBMITTED BY :- Aradhya

Registration No- 19105117045

Roll No- 2k19-CSE-03

Semester – 7th

1|Page
CERTIFICATE

2|Page
ACKNOWLEDGEMENT
Apart from our efforts, the success of the internship depends largely on the

encouragement and guidelines of many others. I take this opportunity to

express my gratitude to the people who have been instrumental in the

successful completion of this project.

I would like to express a deep sense of gratitude to Principal ( Dr. Mithilesh

Kumar Singh) and our Head of the department Dr. Shambhu Shankar

Bharti for their cordial support as they gave the permission to use all

required equipment and the necessary material to complete the project.

I would like to extend my sincerest gratitude to Polytropic Service Pvt. Ltd. and

Ananya Singh for his guidance and supervision as well as for providing

necessary information regarding the internship and also for the support in

completing the project.

Finally I also extend my heartiest thanks to my parents, friends and well

wishers for being with me and extending encouragement throughout the

internship.

3|Page
ABOUT THE COMPANY

Polytropic Services Pvt Ltd.  is a fast-growing ICT Service provider

company, certified with ISO 9000-2015 & ISO 27001-2013 , operating in
Bihar and has a clientèle base in almost all industries and in
Government Sector. It is an established ICT business company
specializing in Software Design and Development, Mobile Apps., Web
Design, Integrated ERP System, Cloud Hosting, Domain Registration,
Digital Marketing (SEO, SEM, SMM, Bulk Email & SMS), Computer or
Equipment Supplies, Smart Class Room, Language Lab, etc.

The Unique Selling Proposition (USP) of Polytropic Services lies in its

excellent model of project management that help us to deliver the
most complicated, advanced web and mobile app solutions. Client
satisfaction is our prime concern and to achieve this we use latest
generation technology, smart managing skills to ensure on-time
delivery. You will get 24*7 customer support from our side to provide
the best solution instantly.

4|Page
ABOUT THE INTERNSHIP
During the eight-week internship period from December 12, 2022, to February 6,
2023, I had the opportunity to complete an internship in front-end development
(FED) with Polytropic Service Pvt. Ltd. The program was conducted under the
guidance of Ananya Singh, a mentor and professional in the field.

The FED internship program at Polytropic Service Pvt. Ltd. aimed to provide
practical training and hands-on experience in developing websites and
applications. As an intern, I was immersed in various aspects of front-end
development, including user interface (UI) design, responsive web development,
and client-side scripting.

Throughout the internship, I was assigned several projects and tasks that allowed
me to apply the theoretical knowledge I gained during my technical education.
Working on real-world scenarios, I learned how to create visually appealing and
functional websites and applications using industry-standard technologies and
frameworks.

During the internship, I had the chance to work with a range of tools and
technologies commonly used in front-end development. This included HTML, CSS,
JavaScript, and popular libraries or frameworks like React or Angular. I gained
hands-on experience in creating responsive layouts, implementing interactivity,
and integrating with back-end APIs.

Working at Polytropic Service Pvt. Ltd. exposed me to a professional work

environment and provided insights into team collaboration and project
management. I had the opportunity to collaborate with other interns and team
members on certain projects, participate in discussions and brainstorming
sessions, and learn how to effectively coordinate tasks.

5|Page
 INDEX
 INTRODUCTION

 SOFTWARE REQUIREMENTS

 ANALYSIS

 DESIGN AND FLOW CHART

 CODING & OUTPUT

 CONCLUSION

 FUTURE SCOPE

 REFERENCE

6|Page
 INTRODUCTION
 AGENDA
 What is React?
 Advantages & Disadvantages of React
 Installation of React and creation of application, first app.
 Get start with First-Project
 React Components
 ReactJS Lifecycle and Methods
 State and Props in React

React JS, also known as React or React.js, is a popular open-source JavaScript

library for building user interfaces. It was developed by Facebook and is widely
used for creating dynamic and interactive web applications. React JS follows the
component-based architecture, allowing developers to build reusable UI
components that can efficiently update and render when data changes.

Key Concepts of React JS:

Component-Based Architecture: React JS promotes the concept of reusable and
modular components, which encapsulate their own logic and presentation. This
approach makes it easier to manage and maintain complex UI structures.

Virtual DOM (Document Object Model): React JS uses a virtual representation of

the DOM, which is a lightweight in-memory copy of the actual DOM. By
comparing and updating only the necessary changes, React optimizes rendering
performance and improves the overall efficiency of the application.

JSX (JavaScript XML): JSX is a syntax extension used in React to write HTML-like
code within JavaScript. It allows developers to combine JavaScript and HTML into
a single file, making it easier to understand and visualize the structure of
components.

7|Page
React installation or to create application, we require to learn npm and its
commands.

What is NPM?

NPM stands for Node Package Manager npm is the package manager for the
Node JavaScript platform. It puts modules in place so that node can find them,
and manages dependency conflicts intelligently. Most commonly, it is used to
publish, discover, install, and develop node programs

Before using NPM commands we have to install, node.

To get Download, nodejs from official website: https://nodejs.org/en/download/

Nodejs is supported all major OS, like Windows, Mac or Linux. nede

Once nodejs is installed in you OS. Verify the version of node js and npm.

> node -V

8|Page
> npm –v

To create an React Application we use npm command

>npm install -g

> npx create-react-app <project-name>

> create-react-app <my-directory>

Once it has been created, we can start our application.

> npm start

 There are two types of components in React: functional components and

class components.

Functional Components:

Functional components are defined as JavaScript functions. They receive props

(properties) as input and return JSX (JavaScript XML) to describe the UI. Here's an
example of a functional component:

import React from 'react';

function MyComponent(props) {

return <div>Hello, {props.name}!</div>;

export default MyComponent;

9|Page
Class Components:

Class components are defined as JavaScript classes that extend the

React.Component class. They can have state, lifecycle methods, and more
complex logic. Here's an example of a class component:

import React from 'react';

class MyComponent extends React.Component {

render() {

return <div>Hello, {this.props.name}!</div>;

export default MyComponent;

ReactJS Lifecycle and Methods

Mounting Phase:

constructor(): The constructor method is called when the component is being

initialized and allows you to set up the initial state and bind event handlers.

static getDerivedStateFromProps(): This method is invoked just before rendering

when new props are received and returns an updated state based on the new
props.

render(): The render method is responsible for rendering the component's UI

based on the current state and props. It must be a pure function.

componentDidMount(): This method is called immediately after the component

has been rendered to the DOM. It is commonly used to initiate API calls, set up
subscriptions, or perform other side effects.

10 | P a g e
Updating Phase:

static getDerivedStateFromProps(): Similar to the mounting phase, this method is

called just before rendering when new props are received. It allows updating the
state based on the new props.

shouldComponentUpdate(): This method determines whether the component

should re-render or not. It is used to optimize performance by preventing
unnecessary re-renders.

render(): Re-renders the component with updated state and props.

getSnapshotBeforeUpdate(): This method is called right before the changes from

the component are committed to the DOM. It allows capturing information from
the DOM before it updates.

componentDidUpdate(): This method is invoked after the component has been

updated and re-rendered. It is commonly used to perform post-update operations
like updating the DOM or making additional API calls.

Unmounting Phase:

componentWillUnmount(): This method is called just before the component is

removed from the DOM. It allows performing cleanup operations such as
cancelling timers, subscriptions, or releasing resources.

Error Handling Phase:

static getDerivedStateFromError(): This method is invoked when an error is

thrown from a child component's lifecycle method. It updates the component
state to display an error UI.

In React, both state and props are used to manage and pass data in components,
but they serve different purposes.

11 | P a g e
Props (Properties):

Props are read-only data passed from a parent component to a child component.

They are used to pass data and configuration from a parent component down to
its child components.

Props are defined by the parent component and accessed by the child component
as function arguments.

Props are immutable, meaning they cannot be modified by the child component.

To access props in a functional component, you can simply use the props
parameter, and in a class component, you can access them using this.props.

Example of passing props from a parent component to a child component:

// ParentComponent.js

import React from 'react';

import ChildComponent from './ChildComponent';

function ParentComponent() {

const name = 'John Doe';

return <ChildComponent name={name} />;

export default ParentComponent;

// ChildComponent.js

import React from 'react';

function ChildComponent(props) {

return <div>Hello, {props.name}!</div>;

12 | P a g e
}

export default ChildComponent;

In the above example, the name prop is passed from the ParentComponent to the
ChildComponent. The child component then receives and renders the value of the
prop.

State:

State represents the internal data of a component that can change over time.

State is managed within a component and can be modified using the setState()
method provided by React.

State is typically used to handle user interactions, manage component-specific

data, and trigger re-rendering when the state is updated.

State is specific to class components, as functional components can use React

Hooks (such as the useState hook) to manage state.

State should be initialized in the constructor() method of a class component, and

it can be accessed using this.state.

Example of using state in a class component:

jsx

Copy code

import React from 'react';

class MyComponent extends React.Component {

constructor(props) {

super(props);

this.state = {

count: 0, };}incrementCount() { this.setState({ count: this.state.count + 1 });

13 | P a g e
Box Office app
I Creates a Box Office app that displays data about movies, shows, and
actors.

The Bollywood Box Office App has been introduced for the web users.
With the help of this app, you can now enjoy daily Box Office shows,
movies as well as about of actors and actresses.

Box office leaders, pictures, videos, behind the scenes, interviews and
official trailers!

Easily follow your favorite actors/directors/movies, view trailers and

read the gossip behind the scenes !

Main Features: -

No setup or learning time required. Fire the app for the first time – and
immediately receive the latest movies.

- Box office charts, including latest hits

- An awesome widget!

- Latest movie trailers

- Catch up on your own schedule:

You can choose your own time-frame with one tap - latest, day or
week.

14 | P a g e
SOFTWARE REQUIREMENTS SPECIFICATIONS
Operating system: - Run in Every OS

Front End : - React.JS

IDE used :- Visual Studio Code

Runs project : - NPM(Node Package Manager) package manager

for the Node JavaScript platform.

Successfully deployed on web visit by link:

FLOW CHART DESIGN

SEARCH SHOWS SEARCH ACTORS

BOX OFFICE
APP

SEARCH SHOWS STARRED

15 | P a g e
SEARCH SHOWS SHOWS DATA

SEARCH MOVIE MOVIES DATA

BOX OFFICE APP

SEARCH ACTORS ACTORS DATA

STARRED DATA
STARRED

16 | P a g e
17 | P a g e
Analysis Benefits of Project:
Indian film industry makes over 1000 movies annually of which a
substantial portion is produced by the popular Hindi film industry
known as Bollywood. The paper studies 50 Hindi movies from 2013 to
2017.

Movies are selected on basis of profit percentage earned from box

office collections. The data is acquired from www.boxofficeindia.com as
the website has been used by various research agencies and trade
industries to present their reports published as follows: FICCI KPMG
2010 (Back in the spotlight); PWC India Entertainment and Media
Outlook 2011; FICCI frames 2015 (#shootingforthestars); FICCI KMG
2017 (Media for the masses: the promise unfolds); FICCI-EY 2018
(Reimagining India's M&E sector).

OTT stands for “Over The Top” and refers to any streaming service that
delivers content over the internet.

OTT is earned through these advertisements. Overall, the business

model on OTT is very simple. First, the platform spends money to make
or buy its content, and then the content is sold by charging a charge
from the audience or users.

How do OTT platforms make money?

These platforms earn through the Ad revenue model, where they
charge brands and companies for posting ads on their platform. ... In
this model, the OTT platform offers both free and paid subscriptions to
its users and generates revenue through both models. This pattern is
followed by Hotstar plus, and Zee5

18 | P a g e
CODING AND OUTPUT
Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import { HashRouter } from 'react-router-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(

<HashRouter>

<App />

</HashRouter>,

document.getElementById('root')

);

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

App.js

import React from 'react';

import { Switch, Route } from 'react-router-dom';

19 | P a g e
import { ThemeProvider } from 'styled-components';

import Home from './pages/Home';

import Starred from './pages/Starred';

import Show from './pages/Show';

const theme = {

mainColors: {

blue: '#2400ff',

gray: '#c6c6c6',

dark: '#353535',

},

};

function App() {

return (

<ThemeProvider theme={theme}>

<Switch>

<Route exact path="/">

<Home />

</Route>

<Route exact path="/starred">

<Starred />

</Route>

<Route exact path="/show/:id">

<Show />

</Route>

20 | P a g e
<Route>

<div>Not found</div>

</Route>

</Switch>

</ThemeProvider>

);

export default App;

Home.js

import React, { useState, useCallback } from 'react';

import MainPageLayout from '../components/MainPageLayout';

import { apiGet } from '../misc/config';

import ShowGrid from '../components/show/ShowGrid';

import ActorGrid from '../components/actor/ActorGrid';

import { useLastQuery } from '../misc/custom-hooks';

import {

SearchInput,

RadioInputsWrapper,

SearchButtonWrapper,

} from './Home.styled';

import CustomRadio from '../components/CustomRadio';

const renderResults = results => {

if (results && results.length === 0) {

21 | P a g e
return <div>No results</div>;

if (results && results.length > 0) {

return results[0].show ? (

<ShowGrid data={results} />

):(

<ActorGrid data={results} />

);

return null;

};

const Home = () => {

const [input, setInput] = useLastQuery();

const [results, setResults] = useState(null);

const [searchOption, setSearchOption] = useState('shows');

const isShowsSearch = searchOption === 'shows';

const onSearch = () => {

apiGet(`/search/${searchOption}?q=${input}`).then(result => {

setResults(result);

});

};

const onInputChange = useCallback(

ev => {

setInput(ev.target.value);

22 | P a g e
},

[setInput]

);

const onKeyDown = ev => {

if (ev.keyCode === 13) {

onSearch();

};

const onRadioChange = useCallback(ev => {

setSearchOption(ev.target.value);

}, []);

return (

<MainPageLayout>

<SearchInput

type="text"

placeholder="Search for something"

onChange={onInputChange}

onKeyDown={onKeyDown}

value={input}

/>

<RadioInputsWrapper>

<div>

<CustomRadio

label="Shows"

23 | P a g e
id="shows-search"

value="shows"

checked={isShowsSearch}

onChange={onRadioChange}

/>

</div>

<div>

<CustomRadio

label="Actors"

id="actors-search"

value="people"

checked={!isShowsSearch}

onChange={onRadioChange}

/>

</div>

</RadioInputsWrapper>

<SearchButtonWrapper>

<button type="button" onClick={onSearch}>

Search

</button>

</SearchButtonWrapper>

{renderResults(results)}

</MainPageLayout>

);}; export default Home;

24 | P a g e
Show.js
/* eslint-disable no-underscore-dangle */

import React from 'react';

import { useParams } from 'react-router-dom';

import ShowMainData from '../components/show/ShowMainData';

import Details from '../components/show/Details';

import Seasons from '../components/show/Seasons';

import Cast from '../components/show/Cast';

import { ShowPageWrapper, InfoBlock } from './Show.styled';

import { useShow } from '../misc/custom-hooks';

const Show = () => {

const { id } = useParams();

const { show, isLoading, error } = useShow(id);

if (isLoading) {

return <div>Data is being loaded</div>;

if (error) {

return <div>Error occured: {error}</div>;

return (

<ShowPageWrapper>

<ShowMainData

image={show.image}

name={show.name}

25 | P a g e
 rating={show.rating}

summary={show.summary}

tags={show.genres}

/>

<InfoBlock>

<h2>Details</h2>

<Details

status={show.status}

network={show.network}

premiered={show.premiered}

/>

</InfoBlock>

<InfoBlock>

<h2>Seasons</h2>

<Seasons seasons={show._embedded.seasons} />

</InfoBlock>

<InfoBlock>

<h2>Cast</h2>

<Cast cast={show._embedded.cast} />

</InfoBlock>

</ShowPageWrapper>

);

};

export default Show;

26 | P a g e
Output

27 | P a g e
28 | P a g e
29 | P a g e
Conclusion:
React JS has come at a good time helping the developers to build highly
engaging web apps and user interfaces within quick time. It allows you
to break down the components and create a single page application
with less coding.

Moreover, the virtual DOM also integrates the performance and React
JS is also known to be SEO friendly. You can develop large scale apps
with frequently changing data. It is due to these major advantages that
React JS has gained much spotlight.

Within our pages on this project you'll find worthy, concrete and timely
news about the industry, that emphasize not only the product but the
personalities also.

30 | P a g e
Future Scope :
React.js is a popular JavaScript library used for building user
interfaces, and its future scope looks promising. React Native is
used for mobile development, and server-side rendering is
becoming popular for SEO optimization. React 360 can be used
for building virtual and augmented reality applications, and
React.js can be used in the development of IoT and machine
learning applications. Overall, React.js is expected to continue
to be a popular choice among developers due to its versatility,
modularity, and efficiency in building complex web
applications.

Reference :
Report data: https://www.boxofficeindia.com
API: https://www.tvmaze.com/api
React: https://react.dev/

31 | P a g e