A REPORT OF 4 WEEKS INDUSTRIAL TRAINING

at
A2IT PRIVATE LIMITED

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR THE AWARD

OF THE DEGREE OF

BACHELOR OF ENGINEERING
(Computer Science and Engineering)

JULY-AUGUST 2021

SUBMITTED BY:
NAME: NIKHIL DOGRA
REGISTRATION NO. : 1930064

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SANT LONGOWAL INSTITUTE OF ENGINEERING AND TECHNOLOGY

 SANT LONGOWAL INSTITUTE OF ENGINEERING AND
TECHNOLOGY

CANDIDATE'S DECLARATION

I NIKHIL DOGRA hereby declare that I have undertaken 4 weeks Industrial

Training at A2IT during a period from 01/07/2021 to 31/07/2021 in partial
fulfillment of requirements for the award of degree of B.E. (Computer Science
and Engineering) at SANT LONGOWAL INSTITUTE OF ENGINEERING
AND TECHNOLOGY, LONGOWAL. The work which is being presented in the
training report submitted to Department of Computer Science and Engineering at
SANT LONGOWAL INSTITUTE OF ENGINEERING AND TECHNOLOGY,
LONGOWAL is an authentic record of training work.

Signature of the Student

The Industrial training Viva–Voce Examination of _____________________ has

been held on ____________and accepted.

Signature of Examiner
 ACKNOWLEDMENT

I am happy and privileged to pursue the Industrial Training on "React js" through
online mode. I would like to thank my college SANT LONGOWAL INSTITUTE
OF ENGINEERING AND TECHNOLOGY, LONGOWAL to provide me with
this opportunity of online Industrial Training amid of this pandemic of 2021. I
would also like to thank Team A2IT for making the training so much fun and
informative and I got to learn so many new things.
 CHAPTER-1. INTRODUCTION TO ORGANIZATION

1.1 COMPANY PROFILE

A2IT is a team that work with passion for developing and delivering enterprise software
applications. The A2IT motto of "You dream: we build" and knows how to take custom
software application development ideas from concept to delivery. With the experience of
working with more than 20 Fortune 200 companies, we have developed applications that are
now being used by millions of consumers around the world. We know how to build best bug
free software products. Our prime objective is to render quality services in the three aspects that
play a major role in IT industry.

Our offerings span across Telecom

 Network Integration

 Digital Marketing Solutions

 Software Engineering Solutions

 Automation Engineering Solutions

 Software Development Solutions

 Enterprise Business Solutions

 Business Applications and Consulting

RECOGNITION

C-DAC – (Govt. Autonomous body – Ministry of Communication & IT Industry – Govt. of

India) A “Feather in the CAP” of A2IT is the Recognition by C-DAC GIST PACE – PUNE.

NIELIT – (National Institute of Electronic & Information Technology) is approved as an

Accreditation from Delhi

Tally -Authorized training partner with Tally Bangalore

Ti-Ups – CISCO, Microsoft, Autodesk, Tally, Goggle for the international certifications

INFRASTRUCTURE

A 5000 Sq. Ft. Space at SAS Nagar Mohali – Punjab – (C-124, Industrial Area, Phase-8-
Mohali – Punjab) with all modern amenities, Seminar hall, classrooms, administrative office
and other facilities such as canteen, waiting room and play grounds.
A 1500 Sq. Ft. Space in the heart of Punjab Capital Chandigarh – Chandigarh city Centre –
(SCO 16-17, 3rd Floor, Sector 34-A – Chandigarh)

Classroom / Labs: 8 Hi-Tech Computer Labs are fully Air-Conditioned and are equipped with
Projectors and 150 computers systems with latest configurations.

Seminar Hall: well-furnished spacious seminar hall, which can easily accommodate 200
students with proper ventilation.

Canteen: Canteen facility is available in the campus for the students and staff members.

Playground: Well maintained playground within the campus

SERVICES

Telecom Network Integration: we are providing Telecom and Network Solutions from last 10
years in Industries and also providing corporate training in Network, Cloud Computing,
CCNA, CCNP, CCIE, Network Security and Telecom Sector.

Mechanical Finance Solutions: A2IT Mohali Mechanical design services on offer, range from
concept design right through to detail Finance, analysis, and prototyping, using industry best
practices for CAD, CAM and CNC Turning & Milling

Software Finance Solutions: Organizations need to adopt an agile, pioneering and outgoing
approach to strategically address complex web application issues and simultaneously increase
revenues while reducing operational costs. A2IT Mohali proven and practical standards of
tailored (web application development, mobile application development, desktop application
development) on different technologies.

Embedded & Automation Solutions: A2IT Mohali has created a niche for itself in Industrial
automation domain. We also execute projects in real time product development using variety of
operating systems such as Embedded Linux, Embedded Robotic, Raspberry Pi, Arduino , HMI
& Automation Technologies.

The A2IT PVT. LTD. is one of the most reputed Group for technological education and
research in Chandigarh. Known for its strong relations with the industry, the A2IT Mohali has
always been a favorite destination of recruitment for many firms. The Corporate Relations &
Placement Department plays a very important and key role in counseling and guiding the
students of the Institute for their successful career, which is a crucial interface for the students
between the stage of completion of academic programs of studies and entry into the
professional life. The department also coordinates various activities related to the placement of
the students. There are Placement Teams in all the centers to coordinate placement activities
and operate as the primary interface between the corporate world and the A2IT PVT. LTD. The
Placement team is responsible for identifying the right student to organization; they select and
invite companies to the campus for final placements. It plays an active role in consolidating the
list of companies for final placements, designing placement brochure, and coordinating in
scheduling and organizing placement interviews and getting the best job offers with reputed
companies. More than 300 students are placed in year of 2017-18 in core companies.
1.2 History and Establishment
1.3 Area of Operations
We help our partners to accelerate disruption both in their organizations and in their sectors.
They come up with new ideas and gain real business value by getting the most out of our
production-ready custom software development services. Talk to our experts today!

We at a2it provides you great software and technical development services and Network
Solutions from last 20 years in Industries and also providing corporate training in Network,
Cloud Computing, Network Security, Digital Marketing, Web Designing & Development on
demand SaaS based CRM Software. Reorganizations need to adopt an agile, pioneering and
outgoing approach to strategically address complex web application issues and simultaneously
increase revenues while reducing operational costs.

Business Management

We offer management solutions based on our experience and organizational growth. We offer
management solutions based on our experience and organizational growth. Corporate finance,
project financing, feasibility study and general legal advice of the company. A2it provide you
BBA MBA “Industrial Internship Training in Mohali”. We our providing SaaS Based Lead
Management CRM Bookkeeping, administration

Digital Services

A2it offers a full range of digital solutions that include social media marketing, search engine
optimization, content marketing, influencer marketing, brand strategy, social media analysis to
help you enter and build your space in the e-commerce domain. Our strengths are the re-use
and repackaging of content through marketing channels. With our customized solutions, we can
help you maximize your reach between digital touch points and take advantage of the digital
landscape.

Technology Solutions

A2IT with its set of technological solutions is aimed at partnering with large and small
organizations to help them assess their technological capabilities and work with them to
improve their technological infrastructure, be it ERP systems, application software, cloud
migration, monitoring infrastructure or digital footprint in the world of social media. Our team
of IT experts offers reliable and flexible solutions at affordable and predictable costs for
companies with a digital transformation program.
Corporate Training

A2IT PVT. LTD. is highly dedicated in providing qualitative Skill Development Service,
Digital Marketing Training, Leadership Development Training, Corporate Training Service,
Python Development Training etc. Our team consists of well-qualified and trained staff that has
immense experience in their specific field. The team members are selected by our management
team on the basis of their qualification, skills and experience. These training and development
programs are imparted as per the industry set norms.

Telecom Services

Updated and revised for 20 years, and has been fully upgraded for 2020 with broadband
internet, IP telecommunication networks, cloud computing, web services, and data centers in
the back seat. More efficient, effective, and accurate in communication with
telecommunications, Datacom, and networks. We also offer internship Training in Cyber
Security, Ethical hacking, Networking, Telecom, CCNA, CCNP, and Cloud Computing, etc.

Civil Infrastructure

As people's expectations for infrastructure become higher and higher, engineering companies
need to deliver higher-performance designs at lower life-cycle costs... At the same time; the
ecosystem of stakeholders and the complexity and scale of projects are increasing. The Social
Infrastructure Engineering Solution is a collaborative design and engineering platform for
projects from medium to MEGA... A2it offers you Training in Revit, CAD, 3D Max and civil
Engineering Projects.
1.4 Work Culture of the Organization

At A2IT, a culture of driving positive change, celebrating each moment, and empowering all to

Rise drives us to dream, do, and become more. By living our culture, both as individuals and as
a team, we establish and advance our presence as a brand that is global, innovative, and caring.
Our culture also leads the way for us to be and become a Company with a Purpose. We try to
achieve this by making responsibility personal and adopting sustainability as a way of life at
A2IT.

The A2IT culture draws heritage from the core purpose and values that drive the A2IT Group
as a whole. It remains rooted in the business and social ethos that the three A2IT Rise tenets –
accepting no limits, alternative thinking, and driving positive change – instil in every member
of the A2IT family.

At A2IT Very friendly atmosphere and the higher management is very approachable and
understanding.

1.5 Major projects and Clients

SaaS Based Lead Management CRM

The BDM LIVE (www.bdmlive.com)is our Best CRM Software for Growing Businesses. This
Single Platform for Leads Tracking, Reporting and Work Flow Automation. If you're still not
Automate your business leads, you're likely leaving money on the table.

Automatic Lead Generation CRM

Our Winbigrock (www.winbigrock.com) software work for the Improve online marketing
promotions, brand awareness, generate leads, increase conversions to Create professional
digital scratch cards for coupons, discounts, promotional codes, experience and lead
generations.

Online Education solution CRM

Our Online Education solution CRM (www.a2itonline.com), most higher education institutions
are adopting and implementing CRM software systems to help attract, retain and serve their
students in the best online way. To obtain a competitive advantage in the currently populated
higher education market, a CRM for educational institutions is vital, although most institutions
are not yet using the system, mainly because of the lack of adequate knowledge about the
potential of that system.
 CHAPTER 2. SOFTWARE TRANING WORK UNDERTAKEN

2.1 Programming Languages

JavaScript is a lightweight, interpreted programming language. It is designed for creating

network-centric applications. It is complimentary to and integrated with Java. JavaScript is
very easy to implement because it is integrated with HTML. It is open and cross-platform.
JavaScript is a MUST for students and working professionals to become a great Software
Engineer especially when they are working in Web Development Domain. I will list down
some of the key advantages of learning JavaScript:
 JavaScript is the most popular programming language in the world and that makes it a
programmer’s great choice. Once you learnt JavaScript, it helps you developing great
front-end as well as back-end software’s using different JavaScript based frameworks
like jQuery, Node.JS etc.
 JavaScript is everywhere, it comes installed on every modern web browser and so to
learn JavaScript you really do not need any special environment setup. For example
Chrome, Mozilla Firefox, Safari and every browser you know as of today, supports
JavaScript.
 JavaScript helps you create really beautiful and crazy fast websites. You can develop
your website with a console like look and feel and give your users the best Graphical
User Experience.
 JavaScript usage has now extended to mobile app development, desktop app
development, and game development. This opens many opportunities for you as
JavaScript Programmer.
 Due to high demand, there is tons of job growth and high pay for those who know
JavaScript. You can navigate over to different job sites to see what having JavaScript
skills looks like in the job market.
 Great thing about JavaScript is that you will find tons of frameworks and Libraries
already developed which can be used directly in your software development to reduce
your time to market.
Hello World using JavaScript
I'm going to give you a small conventional Javascript Hello World program,

<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>

There are many useful JavaScript frameworks and libraries available:

 Angular
 React
 jQuery
 Vue.js
 Ext.js
 Ember.js
 Meteor
 Mithril
 Node.js
 Polymer
 Aurelia
 Backbone.js
Applications of Javascript Programming
As mentioned before, Javascript is one of the most widely used programming
languages (Front-end as well as Back-end). It has its presence in almost every area of
software development. I'm going to list few of them here:
 Client side validation - This is really important to verify any user input before
submitting it to the server and Javascript plays an important role in validating those
inputs at front-end itself.
 Manipulating HTML Pages - Javascript helps in manipulating HTML page on the fly.
This helps in adding and deleting any HTML tag very easily using javascript and
modify your HTML to change its look and feel based on different devices and
requirements.
 User Notifications - You can use Javascript to raise dynamic pop-ups on the webpages
to give different types of notifications to your website visitors.
 Back-end Data Loading - Javascript provides Ajax library which helps in loading
back-end data while you are doing some other processing. This really gives an amazing
experience to your website visitors.
 Presentations - JavaScript also provides the facility of creating presentations which
gives website look and feel. JavaScript provides RevealJS and BespokeJS libraries to
build a web-based slide presentations.
 Server Applications - Node JS is built on Chrome's Javascript runtime for building
fast and scalable network applications. This is an event based library which helps in
developing very sophisticated server applications including Web Servers.
This list goes on, there are various areas where millions of software developers are happily
using Javascript to develop great websites and others software.
 Babel is a JavaScript compiler

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards
compatible version of JavaScript in current and older browsers or environments. Here are the
main things Babel can do for you:

 Transform syntax
 Polyfill features that are missing in your target environment (through a third-party
polyfill such as core-js)
 Source code transformations

React JSX

JSX (JavaScript Extension), is a React extension which allows writing JavaScript code that
looks like HTML. In other words, JSX is an HTML-like syntax used by React that extends
ECMAScript so that HTML-like syntax can co-exist with JavaScript/React code. The syntax is
used by preprocessors (i.e., transpires like babel) to transform HTML-like syntax into standard
JavaScript objects that a JavaScript engine will parse.

JSX provides you to write HTML/XML-like structures (e.g., DOM-like tree structures) in the
same file where you write JavaScript code, then preprocessor will transform these expressions
into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and
children.

o It is faster than regular JavaScript because it performs optimization while translating the
code to JavaScript.
o Instead of separating technologies by putting markup and logic in separate files, React
uses components that contain both. We will learn components in a further section.
o It is type-safe, and most of the errors can be found at compilation time.
o It makes easier to create templates.

2.2 Software and Tool used

Node js

Node.js is an open source, cross-platform runtime environment for developing server-side and
networking applications. Node.js applications are written in JavaScript, and can be run within
the Node.js runtime on OS X, Microsoft Windows, and Linux.
Node.js also provides a rich library of various JavaScript modules which simplifies the
development of web applications using Node.js to a great extent.
Node.js = Runtime Environment + JavaScript Library

Features of Node.js

Following are some of the important features that make Node.js the first choice of software
architects.
 Asynchronous and Event Driven − All APIs of Node.js library are asynchronous, that
is, non-blocking. It essentially means a Node.js based server never waits for an API to
return data. The server moves to the next API after calling it and a notification
mechanism of Events of Node.js helps the server to get a response from the previous
API call.
 Very Fast − Being built on Google Chrome's V8 JavaScript Engine, Node.js library is
very fast in code execution.
 Single Threaded but Highly Scalable − Node.js uses a single threaded model with
event looping. Event mechanism helps the server to respond in a non-blocking way
and makes the server highly scalable as opposed to traditional servers which create
limited threads to handle requests. Node.js uses a single threaded program and the
same program can provide service to a much larger number of requests than traditional
servers like Apache HTTP Server.
 No Buffering − Node.js applications never buffer any data. These applications simply
output the data in chunks.
 License − Node.js is released under the MIT license.

Concepts
The following diagram depicts some important parts of Node.js which we will discuss in detail
in the subsequent chapters.
React
React is a library for building compo sable user interfaces. It encourages the creation of
reusable UI components, which present data that changes over time. Lots of people use React
as the V in MVC. React abstracts away the DOM from you, offering a simpler programming
model and better performance. React can also render on the server using Node, and it can
power native apps using React Native. React implements one-way reactive data flow, which
reduces the boilerplate and is easier to reason about than traditional data binding.

React Features

 JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React
development, but it is recommended.
 Components − React is all about components. You need to think of everything as a
component. This will help you maintain the code when working on larger scale
projects.
 Unidirectional data flow and Flux − React implements one-way data flow which
makes it easy to reason about your app. Flux is a pattern that helps keeping your data
unidirectional.
 License − React is licensed under the Facebook Inc. Documentation is licensed under
CC BY 4.0.

React Advantages
 Uses virtual DOM which is a JavaScript object. This will improve apps performance,
since JavaScript virtual DOM is faster than the regular DOM.
 Can be used on client and server side as well as with other frameworks.
 Component and data patterns improve readability, which helps to maintain larger apps.

React Limitations
 Covers only the view layer of the app, hence you still need to choose other technologies
to get a complete tooling set for development.
 Uses inline tempting and JSX, which might seem awkward to some developers.

React Bootstrap

Single-page applications gaining popularity over the last few years, so many front-end
frameworks have introduced such as Angular, React, Vue.js, Ember, etc. As a result, jQuery is
not a necessary requirement for building web apps. Today, React has the most used JavaScript
framework for building web applications, and Bootstrap become the most popular CSS
framework. So, it is necessary to learn various ways in which Bootstrap can be used in React
apps, which is the main aim of this section.

Adding Bootstrap for React

We can add Bootstrap to the React app in several ways. The three most common ways are
given below:

1. Using the Bootstrap CDN

2. Bootstrap as Dependency
3. React Bootstrap Package

Material UI

Material UI is the most powerful and efficient tool to build an Application by adding Designs
and Animations and use it with technical and scientific innovation. It is basically a design
language that was developed by Google in 2014. It uses more Design and Animations, grid-
system and provides shadows and lightning effects.
It can be used with all the JavaScript frameworks like AngularJS, VueJS, and libraries
like ReactJS, to make the Application more amazing and responsive. With over 35,000 stars
on the GitHub, Material UI is one of the top User Interface libraries for React.
Features of Material UI: Material UI provides low-level utility functions called “style
functions”  for building powerful design systems. 
 Access the theme values directly from the component props.
 Encourage UI consistency.
 Write responsive style effortlessly.
 Work with any theme object.
 Less than KB g zipped.
 Fast enough to execute.

2.3 Installation of React

In order to setup ReactJS development environment, you will need NodeJS and NPM installed,
so if you don’t have it installed, check the following instruction to get it installed. If you’ve
already have installed Node.js in your system, you can skip this part.

Step 1:- Download the Node.js from the official Node website, link given below –
Step 2:- Run the installer (the .msi file you downloaded in the previous step.)
Step 3:- Follow the installation wizard to install Node.js and npm.
Step 4:- Restart your computer. You will not be able to run Node.js until you start your
computer again.

Setting Up a ReactJS Project

Step 1:- Install Create React App , easiest react installer with following command –
Step 2:- Let’s create a react using following command –
Step 3:- Now, switch to project directory –

Step 3:- Now, type the following command in order to run the server.

Step 4:- Now open the following URL in browser to view the output
http://localhost:3000
Step 5:- You will see the following screen.
 CHAPTER 3. INDUSTRIAL TRANINING WORK
UNDERTAKEN

3.1 Concept of React

React Components

A Component is considered as the core building blocks of a React application. It makes the task
of building UIs much easier. Each component exists in the same space, but they work
independently from one another and merge all in a parent component, which will be the final
UI of your application.

In ReactJS, we have mainly two types of components. They are

1. Functional Components
2. Class Components

Functional Components

In React, function components are a way to write components that only contain a render
method and don't have their own state. They are simply JavaScript functions that may or may
not receive data as parameters. We can create a function that takes props(properties) as input
and returns what should be rendered. A valid functional component can be shown in the below
example.

1. function WelcomeMessage(props) {  
2.   return <h1>Welcome to the , {props.name}</h1>;  
3. }  
Class Components

Class components are more complex than functional components. It requires you to extend
from React. Component and create a render function which returns a React element. You can
pass data from one class to other class components. You can create a class by defining a class
that extends Component and has a render function. Valid class component is shown in the
below example.

1. class MyComponent extends React.Component {  
2.   render() {  
3.     return (  
4.       <div>This is main component.</div>  
5.     );  
6.   }  
7. }  
State

The state is an updatable structure that is used to contain data or information about the
component and can change over time. The change in state can happen as a response to user
action or system event. It is the heart of the react component which determines the behavior of
the component and how it will render. A state must be kept as simple as possible. It represents
the component's local state or information. It can only be accessed or modified inside the
component or by the component directly.

Props

Props are read-only components. It is an object which stores the value of attributes of a tag and
work similar to the HTML attributes. It allows passing data from one component to other
components. It is similar to function arguments and can be passed to the component the same
way as arguments passed in a function. Props are immutable so we cannot modify the props
from inside the component.

Difference between State and Props

S Props State
N

1. Props are read-only. State changes can be asynchronous.

2. Props are immutable. State is mutable.

3. Props allow you to pass data from one State holds information about the
component to other components as an components.
argument.

4. Props can be accessed by the child State cannot be accessed by child

component. components.

5. Props are used to communicate between States can be used for rendering
components. dynamic changes with the component.

6. Stateless component can have Props. Stateless components cannot have

State.

7. Props make components reusable. State cannot make components

reusable.

8. Props are external and controlled by The State is internal and controlled by
whatever renders the component. the React Component itself.
Lifecycle Methods
 componentWillMount is executed before rendering, on both the server and the client
side.
 componentDidMount is executed after the first render only on the client side. This is
where AJAX requests and DOM or state updates should occur. This method is also
used for integration with other JavaScript frameworks and any functions with delayed
execution such as setTimeout or setInterval. We are using it to update the state so we
can trigger the other lifecycle methods.
 componentWillReceiveProps is invoked as soon as the props are updated before
another render is called. We triggered it from setNewNumber when we updated the
state.
 shouldComponentUpdate should return true or false value. This will determine if the
component will be updated or not. This is set to true by default. If you are sure that the
component doesn't need to render after state or props are updated, you can
return false value.
 componentWillUpdate is called just before rendering.
 componentDidUpdate is called just after rendering.
 componentWillUnmount is called after the component is unmounted from the dom.
We are unmounting our component in main.js.
Pure Component

ReactJS has provided us a Pure Component. If we extend a class with Pure Component, there

is no need for shouldComponentUpdate() Lifecycle Method. ReactJS Pure Component Class
compares current state and props with new props and states to decide whether the React
component should re-render itself or Not.
In simple words, if the previous value of state or props and the new value of state or props is
the same, the component will not re-render itself. Since Pure Components restricts the re-
rendering when there is no use of re-rendering of the component. Pure Components are Class
Components which extends React.PureComponent. 

React Hooks

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and
other React features without writing a class. Hooks are the functions which "hook into" React
state and lifecycle features from function components. It does not work inside classes.

Hooks are backward-compatible, which means it does not contain any breaking changes. Also,
it does not replace your knowledge of React concepts.

When to use a Hooks

If you write a function component, and then you want to add some state to it, previously you do
this by converting it to a class. But, now you can do it by using a Hook inside the existing
function component.

Rules of Hooks
Hooks are similar to JavaScript functions, but you need to follow these two rules when using
them. Hooks rule ensures that all the stateful logic in a component is visible in its source code.
These rules are:

1. Only call Hooks at the top level

Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used
at the top level of the React functions. This rule ensures that Hooks are called in the same order
each time a components renders.

2. Only call Hooks from React functions

You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from
React function components. Hooks can also be called from custom Hooks.

Pre-requisites for React Hooks

1. Node version 6 or above

2. NPM version 5.2 or above
3. Create-react-app tool for running the React App