A

REPORT
of
INDUSTRIAL TRAINING
at
“CETPA InfoTech PVT LTD”

on
“React.JS”

Submitted
In the partial fulfillment of
Bachelor of Technology
Department of Information Technology

Shri Ram Murti Smarak College of Engineering and Technology

Bareilly
2023-24

Submitted by: Submitted to:

Alok Pandey Ms. Sakshi Goel
2000140130006 Assistant Professor

i
Certificate (by company)

ii
 Certificate

I hereby Inform that Alok Pandey Student of SRMS-CET successfully completed Industrial
Training on “React.JS”, in partial fulfilment of the requirements for Industrial Training viva
voce, is an authentic record of my own work carried under the supervision of “CETPA
InfoTech PVT LTD” from May 15,2020 to June 26, 2020. During the mentioned period I
worked at “React.JS” and completed my summer training project entitled E-store= under the
guidance of Mr. Pavan k.

Signature: _______________ Signature: _______________

Dr. Shailesh Saxena Ms. Sakshi Goel
Head of IT Department Industrial Training Incharge
SRMS-CET,Bareilly

iii
 Acknowledgement

I express my satisfaction on the completion of this summer training program and project
report submission as a part of the curriculum for the Degree of Bachelor of Technology ,
Information Technology. I express my deepest gratitude to my supervisor and mentor Mis.
Azra Khan for his kind guidance during the entire period of training. Her consistent
support and advice has helped me to complete this Training successfully. Also I thank all
the members of “CETPA InfoTech PVT LTD”, Noida.They hava always been a source of
Learning to me.

Date : 21/08/2022 ALOK PANDEY

2000140130006

iv
 Table of Content

Cover Page ………………………………………………………………..…………………

Certificate (by company) …………………………………………………………………
Certificate ………………………………………………………………………………………
Acknowledgement ……………………………………………………………………………...
List of figures ……………………………………………………………………………
Chapter 1 Company Profile …………………………………………………………………….
1.1 Introduction ………………………………………………………………………...
1.2 Vision & Mission …………………………………………………………………..
1.3 Company Background ……………………………………………………………...
1.4 Core Values ………………………………………………………………………...
1.5 Training & Certifications Programs ………………………………………………..
1.6 Product & Service Offering ………………………………………………………...
1.7 Training Approach & Methodology ………………………………………………..
1.8 National Level Initiatives …………………………………………………………..
1.9 Industry Impact & Clientele ………………………………………………………..
1.10 Future Prospects & Conclusion …………………………………………………...
Chapter 2 Industry at a Glance …………………………………………………………………
2.1 Training & Development Department ……………………………………………...
2.2 Cybersecurity Department ………………………………………………………….
2.3 Best College Campus Training ………………………………………………..
2.4 Corporate Training …………………..…………………………………………
2.4.1 Do Companies Need Corporate Training …………………..………
2.4.2 Benefits Of Corporate Training …………………………………….….
2.5 Fresher Training …………………………. ………………………………….
2.6 Industrial Training …………………………………………………………...
2.7 Placement Services ……………… ……………………………………………..
2.8 Recruitment Services Department ………………………………………………...
2.9 RPO Services Department …………….…………………………………………
Chapter 3 Tools & Technologies used in Industry ……………………………………………..
3.1 Abstract …………………………………………………………………………….
v
 3.2 Introduction ………………………………………………………………….…
3.3 Virtual Learning Environments …………………………………………………….
3.4 Learning Management Systems (LMS) ……………………………………………
3.5 Certification Platforms …………………………………………………………...
3.6 Collaboration Tools ………………………………………………………………...
3.7 Conclusion ……… ……………………………………………………………..
Chapter 4 Modules Description/Activities of Industry ………………………………………...
4.1 College Campus Training Program……………..……………………………...
4.2 Online Training Portal ……………..…………………………………………...
4.3 Corporate Training …….………………………………………………………
4.4 Fresher Training ………………………………………………………………..
4.5 Summer Training ….…………………………………………………………..
4.6 MOU Activities ……………..…………………………………………………
Chapter 5 Modules of Industry …………………………………………………………………
5.1 React.JS ………………………………………………………………………
5.2 JavaScript ES5 AND ES6 ..……………………………………………………..
5.3 React.JS Overview ….…………………………………………………………
5.4 React.JS Environment …………………………………………………………
5.5 Features Of React.JS AND Components …………………………………………
5.6 Routing With React Router ………………………………………………………
5.7 Key Featuers Of React.JS …………………………………………………….
5.8 Event Handling In React ……………………...……………………………………
5.9 Working With Forms ……………….……………………………………………...
5.10 Redux …………………….……………………………………………………….
5.11 React With Design Framework ……..…………………………………………….
5.12 React API’S ……………………….………………………………………………
Chapter 6 Details about the Modules …………………………………………………………..
6.1 Introduction ……………………………………………………...…………………
6.2 Features …………………………………………………………………………….
6.3 Technologies Used …………………………………………………………………
6.4 Implementation ……………………………………………………………………..
6.5 Output …………………………….……………………………………………...
6.6 Artical Management System Logic ……………………………………………...
6.7 Build Execution ……………………………………………………………………

vi
 6.8 Conclusion………………………………………………………………………….
6.9 Future Enhancements ………………………………………………………………
Chapter 7 Training Outcome …………………………………………………………………...
7.1 Introduction ………………………………………………………………………...
7.2 Overview of the Industrial Training ………………………………………………..
7.3 Skills Acquired During Training …………………………………………………...
7.4 Practical Applications of Skills …………………………………………………….
7.5 Enhanced Understanding of Core Java …………………………………………….
7.6 Exposure to Industry Standards & Best Practices ………………………………….
7.7 Improvement in Problem-Solving Abilities ………………………………………..
7.8 Effective Team Collaboration & Communication ………………………………….
7.9 Introduction to Real-World Software Development ……………………………….
7.10 Project Management & Time Management Skills ………………………………..
Chapter 8 Conclusion …………………………………………………………………………..
References ……………………………………………………………………………………...

vii
 List of Figures

Fig 01: Actual Company performance Result Diagram ………………………………….

Fig 02: Home page of artical Management System………..………………………………...
Fig 03: Articles Section of artical Management System ………………………..….………
Fig 04: Login page of artical Management System…………..…………………………….
Fig 05: Register page of artical Management System………………..…………………….….
Fig 06: Search Bar of artical Management System……….……………………………….

viii
 Chapter 1
Company Profile

1.1 Introduction

CETPA InfoTech PVT LTD established in the year 2002, is an award winning company
working into multiple domains. Key domains include High end training services, permanent
recruitment services, staffing services, and RPO. We have our offices and development
centers in Germany, India and Ukraine.

1.2 Vision & Mission

CETPA Technologies has been successfully empowering its customers with innovative
end-to-end technology solutions. CETPA Technologies provides Strategic Outsourcing
services that includes enterprise solutions, supply chain management, client relationship
management, business intelligence, business process quality, engineering and product
lifecycle management, and infrastructure services, among other key capabilities and
end-to-end product engineering services, enterprise solutions, and packaged application
implementations.

1.3 Company Background

CETPA Technologies has been successfully empowering its customers with innovative
end-to-end technology solutions. CETPA Technologies provides Strategic Outsourcing
services that includes enterprise solutions, supply chain management, client relationship
management, business intelligence, business process quality, engineering and product
lifecycle management, and infrastructure services, among other key capabilities and
end-to-end product engineering services, enterprise solutions, and packaged application
implementations.

1
1.4 Core Values

● High quality training and workshops : for various engineering domains and help
the students to get better identification in the competitive world.
● Strong placement and consultancy wing : which has a good network with the top
MNCs.
● Embedded Training: CETPA has been awarded as the Best IT and Embedded
Training Company for 5 consecutive years.

1.5 Training & Certifications Programs

CETPA Infotech provides various types of training and certification programs for engineering
students and professionals. Some of the programs are:

● Microsoft Certification Program in Lucknow, which covers various Microsoft

technologies like .NET, SQL Server, Azure, etc.
● Students Training, which is a short-term training program for 2/3/4/6 weeks in
different domains like Java, Python, Android, etc.
● Online SAP Training in Noida, which offers online courses in different SAP
modules like FICO, HANA, PP, ABAP, etc

1.6 Product & Service Offering

CETPA Infotech offers various products and services related to IT education and training,
software and embedded development, and consulting. Some of the products and services are:

● Educational Services like computer language training, CAD service, online

education, career consultancy, etc.
● IT Training Services like student training, corporate training, summer training,
winter training, college campus training, professional training, etc.
● Software and Embedded Product Development in domains like .NET, Java, PHP,
Android, CCNA, VHDL, Matlab, etc.

2
 ● Consulting Services for IT infrastructure, placement assistance, and job-oriented
training.

1.7 Training Approach & Methodology

CETPA Infotech follows a student-centric approach and customized methodology for its
training programs. Some of the features of its training approach and methodology are:

● It provides different training programs for different levels of students, such as 2/3/4/6
weeks training, industrial training, winter training, college campus training, etc.
● It covers 50+ leading technologies and software programs in its training curriculum,
such as cloud computing, SAP, .NET, Java, etc.
● It conducts practical sessions, live projects, workshops, and seminars to enhance the
skills and knowledge of the students.
● It provides certificates, placement assistance, and consultancy to the students after
completing the training.

1.8 National Level Initiatives

CETPA Infotech has taken some national level initiatives to enhance the quality of technical
education and consultancy in India. Some of the initiatives are:

● It has contributed to the Skill India Initiative by providing training and placement
assistance to students across its four centers in Lucknow, Roorkee, Dehradun, and
Noida.
● It has partnered with various educational institutions and organizations to conduct
workshops, seminars, and projects on various technologies and domains.
● It has deployed advanced analytical tools and techniques to solve complex business
problems and provide consultancy services to its clients.

3
1.9 Industry Impact & Clientele

CETPA Infotech has made a significant impact on the industry by providing quality training
and consultancy services to students and professionals. Some of the aspects of its industry
impact and clientele are:

● It is certified by ISO 9001:2015 for its best quality.

● It has placed more than 5000 students in the best MNCs in a year.
● It operates in both software and embedded development domains.
● It has a large network of partners and clients across various sectors and regions.

1.10 Future Prospects & Conclusion

CETPA Infotech has a bright future prospect as it continues to provide best IT training and
consultancy services to students and professionals. Some of the points to conclude about
CETPA Infotech are:

● It is an ISO 9001:2015 certified training company with experienced trainers and

updated curriculum.
● It is the largest training service provider in North India with four centers and an online
portal.
● It is a trusted partner and client of various educational institutions and organizations
across different sectors and regions.

4
 Chapter 2
Industry at a Glance

According to the search results, CETPA Infotech is a company that specializes in providing
training services in various engineering domains for students and professionals. It also offers
software development solutions, mobile application, digital marketing solutions, mechanical
design solutions and chip development solutions to businesses around the globe. It has an
extensive experience of nurturing over 200,000+ students in the past few years and placing
more than 5000 students in the best MNCs in a year.

2.1 Training & Development Department

The Training & Development Department of CETPA Infotech is responsible for providing
real-time training to students and professionals in various engineering domains such as
Autocad, Digital Marketing, DevOps, Graphic Design, etc. It also offers summer, winter,
regular and corporate training programs to help learners improve their technical and soft
skills and meet the demand of the industry. It has an online training portal where learners can
access the course materials and assignments4. It also claims to provide placement assistance
to its trainees and help them find jobs in the top IT industry.

5
2.2 Cybersecurity Department

Cybersecurity Department of CETPA Infotech is a part of the company’s business and

information technology service that helps the clients to improve their business performance
and security1. It also offers training and internship programs in cyber security to students and
professionals who want to learn about emerging cybersecurity threats and solutions. It has an
online training portal where learners can access the course materials and assignments. It also
claims to provide placement assistance to its trainees and help them find jobs in the top IT
industry.

2.3 Best College Campus Training

College campus training program is a manifesto for providing complete training for
engineering students on latest technologies to college students from different areas like
B.Tech/M.Tech, B.Sc/M.Sc, BCA/MCA, etc. within college campus itself. College campus
training is imperative because it has all the important attributes which are vital for students to
know before they enter into the corporate life where practical training is given more emphasis
than theoretical learning.
At CETPA, College Campus training is designed to enrich the “industry readiness” level of
students making them employable. College campus training is provided by all branches of
CETPA. CETPA InfoTech has established its presence across all the major cities of Northern
India like Noida, Roorkee, Lucknow, Dehradun
CETPA, being a Technology Promotion Association provides on campus training at moderate
fee. During College Campus training, CETPA endows students with practical as well as
theoretical learning and students are granted the opportunity to work on one major project.
CETPA also supplies study materials and lab materials to the student. After successful
completion of College campus training, students are provided certificates, which are globally
approved. On-campus training program is helpful to students and college authorities as well.
Money of students is utilized because the fee of on campus training programs is lesser than
off-campus training courses. Students can pursue 2-4 weeks College campus training
programs in all technologies so that they can cover the syllabus comprehensively and avail
the benefits as well as the quality standards that the company offers.

6
On-campus training, as the word suggests in itself is the training, which is arranged in college
campus, although this training is not ordinary as it accommodates the entire real facet.
Through such training, students immigrate into the professional cosmos where practical
awareness is given a greater inclination than abstract knowledge.

Such training courses are established at college campuses. Experts from CETPA will visit the
college and provide training. Five to six hours a day training schedule is generally
commenced. Final schedule can work out to confinement to all. Placement training is
conducted in college campus which consists of technical and soft expertise courses. CETPA’s
mentors who are young engineers from the corporation will keep the students stimulated and
concentrated throughout the sessions.

2.4 Corporate TRAINING

Improve the Performance of your Business With our Innovative Corporate Training Solutions
in Noida. Looking for a corporate training company in Delhi or Noida that offers more than
“Talk”? We at CETPA Infotech, provide bespoke Training Solutions, that make a huge impact
on your business outcomes from improving the bottom line to boosting the morale of the
workplace. With over a decade of experience, in providing a client-focused approach to our
training solutions, CETPA is undoubtedly the leader when it comes to Corporate Training in
Noida. We are more than a regular training consultancy who just delivers a few key principals
and over-the-top presentations.

We Walk the Talk

We are a progressive training consultancy with a vast experience in creating a dynamic range
of leadership and management solutions, to suit the demands of various business verticals.
We are aware of the workings of a thriving business environment, which gives us an in-depth
understanding of the different challenges faced by managers and employees in the dynamic
and highly competitive workplace of today.

7
We don’t just highlight the challenges but also work with you to create unique solutions for
your workforce. We help you reach tangible outcomes.

Expert Trainers: Our instructors are chosen after an intensive selection process. Apart from
extensive knowledge and industry insights, they all have an undefined “Emotional Charisma”
that helps them connect with the audience. They are experts in their specialized fields and
have unique styles that build rapport and facilitate learning.

Moving with the Times: We believe that resting on our laurels will get us nowhere. We
continually update our training material to stay in tune with the latest requirements of the
industry. In a business world that is moving at dizzying speeds, constant updating is what
makes CETPA, different from the rest of the corporate training companies in Noida and
Delhi.

Tailored Programmes: We believe that no two businesses are the same. That is why we offer
complete customization. We develop a unique corporate training programme after an
extensive study of your business methods, goals and practices.

2.4.1. DO COMPANIES NEED CORPORATE TRAINING

Yes, Companies need Corporate Training. It is equally beneficial for both, that is, the
employer and the employee. However, it is important to know the purpose and functions of
training before using it.

2.4.2. BENEFITS OF CORPORATE TRAINING

Four Key Benefits of Corporate Training Include:

​ Support succession planning

​ Gain an Edge on the Competition
​ Reduce attrition rates
​ Pinpoint the Shortcomings and Strengthen Pros

8
 Fig 01: Actual Company performance Result Diagram

2.5 Fresher Training

If you are a fresher or last year pass out and wish to pursue long term industrial training/ summer
training/winter training or short term 6 weeks training, then CETPA INFOTECH would be the
right choice for you. CETPA is the best training company offering training for engineering
students in various different northern cities of India like Roorkee, Noida, Lucknow and
Dehradun. CETPA has created a group of highly skilled and promising experts, having an elite
training methodology which churns out CETPA as a best summer training institute in Delhi NCR.
Fresher training taught at CETPA is 100% hands- on training. Fresher training is a very likely
phase among scholars who have completed their degree. Fresher training for the Engineering
student is treasured for binding the gap between industry and academic modules. CETPA tailors
fresher training for complete branches of engineering and helps them to train about employment
techniques which scholars gain in classes.

9
2.6 Industrial Training

6 Months Industrial Training in Noida Offer by CETPA, Best Industrial training Company for
CS/ CSE/ IT/ BCA/MCA/B.Tech/ M.tech/ B.Sc./ M.sc/ BE/ Engineering student. Enroll 6
Months/Weeks best Industrial Training for B.Tech/ M.TECH /BE/ B.SC/ M.sc / BCA/ MCA/
CS/CSE/IT/ Information Technology/ Engineering Student.

The major reason behind the necessity of six months industrial trainingof engineering
students is that they are well prepared for the corporate job. 6 months industrial training
exposes students to the working atmosphere in the industry and at the same time increases
their self-confidence and helps in finding their own proficiency. It also cultivates students’
leadership ability and responsibility to perform or execute the given task. Six months
industrial training also enables students to comprehend the theories studied with more
features and hands-on practice within a real job situation. CETPA, the Best Industrial training
Center for B.Tech/CS/CSE/IT/ BCA/MCA/ B.E /M.tech / B.sc/ M.sc studentprovides 6
months Industrial training in new and latest technologies with a combination of theory as well
as practical classes.

CETPA INFOTECH is the Top industrial training Institute for BE / Computer

Science/CSE/IT/ Information Technology/ BCA/ MCA/ B.sc/ M.sc/ B.Tech/ M.Tech/
Engineering Studentwhich provides training to students as well as corporates. In addition to
this, it also offers placement service to fresher. 6 months industrial training in Noida is
necessary to build the gap in the theoretical knowledge and implementation of the concepts
which is required in the corporate world. Training from No 1 Industrial Training Institute for
CS/ CSE/ IT/ BCA/MCA/B.Tech/ M.tech/ B.Sc/ M.sc/ BE/ Engineering student provides a
platform for students to implement concepts acquired in the classroom in the live project. The
6 months Industrial training program involves work on live projects using the latest
technologies used in the industry. Moreover, it will help the students to develop skills and
competencies they require to become employable.

10
2.7 Placement Services

CETPA InfoTech Pvt Ltd is the No. 1 training company providing 100% Placement
assistance to students. CETPA places more than 5000 students in best MNC’s in a year.
CETPA provides job oriented training to all students and they get jobs as soon as they
complete their training. CETPA design training courses in such a way so that students can
achieve their goal easily.

CETPA has a strong presence in Northern India like Roorkee, Noida, Lucknow, Dehradun
and for the engineers training. CETPA has a dedicated team of placement which places
students in top MNC’s. CETPA provides real time experience to students and makes them
ready for the current job market. Each and every training module of CETPA is designed
according to current industry demand so that students can be professionally and technically
strong.

CETPA Placement cell always focuses on the placement of our trained students in top MNC’s
and CETPA students also perform well in every interview according to industry demands.
CETPA has a great record of placement due to dedicated work of CETPA placement cell and
good performance of students. CETPA not only gives technical training to students but also
makes them disciplined, dynamic and responsible for the professional world. CETPA
regularly organizes personality development classes to prepare students for the interview.
CETPA provides a great platform to students which exhibits the technical knowledge of
students as well as prepares them for the professional world. So this is the best time to join
this booming company to make your career and achieve your goal. CETPA gives more than 5
chances to get placed. CETPA also conducts pre placement sessions to make students
confident for interviews. CETPA placement cell arranges all required facilities for
recruitment process such as projector, conference room and group discussion room. CETPA
experts help students in their live projects also.

11
2.8 Recruitment Services Department

Human Resources in any company is becoming all the time more imperative day by day. All
organizations must have an excellent team of working professionals. For this purpose, HR
outsourcing has become a reliable way for organizations to reduce operational costs and
focus on the predominant business manoeuvres.

As the need for HR Consultancy is rising, CETPA has ushered in Human Resource
Consultancy to provide scalable and efficient workforce solutions to various organizations.
Our objective is to provide high-impact solutions to boost the efficacy of the organizations
and the individuals we assist.

We put out all the stops to empower organizations to succeed in an intermittent and uncertain
professional world. Moreover, we find gratification in connecting job seekers to
consequential and steadfast employment opportunities while serving the business
requirements of companies.

There are predominantly three models, wherein, we provide HR consultancy in Delhi NCR.
These include the Contract-to-Hire model, Client Payroll Model, and Contract-Only Model.

​ CONTRACT TO HIRE MODEL: Under this model, we recruit employees on a

contract basis for a brief period; say, a month or so, as per the requirement of the
company.
​ CLIENT PAYROLL MODEL: This model permits the hired employees to go
directly on the company’s payroll.
​ CONTRACT ONLY MODEL: As per this model, the contract lasts for one year,
hence this contract is for long-term operations.

12
2.9 RPO Services Department

CETPA is a leading Recruitment Process Outsourcing (RPO) enterprise with workplaces in

India and USA and units all over the globe. We utilize enthusiastic virtual groups, profound
area experience, and provincial contacts to support our RPO associates and select
companions around the world. However the responsibility gets diminished in the wake of
counseling recruiting organizations for accounting the promising aspirants, there are different
benefits related to this section which lead to the headway of recruitment counseling firms all
over the world.

13
 Chapter 3
Tools & Technology used in Industry

3.1 Abstract

The rapidly evolving landscape of technology necessitates continuous learning and

adaptation. Organizations like CETPA Infotech Pvt. ltd. play a crucial role in equipping
individuals with the skills needed to thrive in the Information Technology (IT) industry. This
article explores the tools and technologies used in the IT industry for training, development,
and cybersecurity. It covers a wide range of aspects, from training methodologies and virtual
environments to cybersecurity tools and certification platforms.

3.2 Introduction

In the dynamic realm of IT, staying updated with the latest tools and technologies is
paramount. CETPA Infotech Pvt. ltd. recognizes this and employs a diverse set of tools to
provide comprehensive training, development, and cybersecurity solutions. This article
delves into the tenacious world of IT tools, ranging from innovative training platforms to
robust cybersecurity measures.

3.3 Virtual Learning Environments

Modern training methods transcend traditional classroom setups. Virtual Learning

Environments (VLEs) have emerged as a cornerstone of remote learning. CETPA Infotech
Pvt. ltd. harnesses VLEs to create engaging and interactive training experiences. Platforms
like Moodle, Canvas, and Blackboard are utilized to facilitate seamless communication,
content delivery, and assessment.

14
3.4 Learning Management Systems (LMS)

A Learning Management System (LMS) is an essential tool for organizing, managing, and
delivering educational content. CETPA Infotech Pvt. ltd. employs LMS platforms like GoTo
and Google Classroom to streamline content distribution, assignments, and quizzes. LMS
enhances learner engagement and allows for structured learning paths.

3.5 Certification Platforms

CETPA Infotech is a training institute that offers various courses and certifications for
engineering students and professionals. According to the search results, some of the
certification platforms that CETPA Infotech is associated with are:

● ISO 9001:2008
● Microsoft
● Oracle WDP
● Autodesk
● Panasonic
● Nuvoton
● DOEACC

3.6 Collaboration Tools

some of the collaboration tools that CETPA Infotech uses are:

● Online Training Portal: This is a platform where students can access online courses,
assignments, quizzes and certificates.
● YouTube Channel: This is a channel where CETPA Infotech uploads videos about
their courses, projects, events and testimonials.
● GoTo: A video comfressing platform for teams, Slack facilitates real-time
communication, enhancing interaction among learners and trainers.

15
3.7 Conclusion

The conclusion of CETPA Infotech training is that it is a valuable and beneficial program for
engineering students and professionals who want to learn and enhance their skills in various
technologies and domains.some of the benefits of CETPA Infotech training are:

● It provides industry-oriented and practical training on new and emerging

technologies.
● It offers certification, placement assistance and job consultancy to its students.
● It has experienced trainers, well-equipped labs and an online training portal.
● It has a flexible and customizable training program that can suit the needs of different
students and professionals.

16
 Chapter 4
Modules Description/Activities of Industry

CETPA Infotech offers various modules and activities for its training programs. some of them
are:

4.1 College Campus Training Program: College campus training program is

a manifesto for providing complete training for engineering students on latest technologies to
college students from different areas like B.Tech/M.Tech, B.Sc/M.Sc, BCA/MCA, etc. within
college campus itself. College campus training is imperative because it has all the important
attributes which are vital for students to know before they enter into the corporate life where
practical training is given more emphasis than theoretical learning.

CETPA, being a Technology Promotion Association provides on campus training at moderate

fee. During College Campus training, CETPA endows students with practical as well as
theoretical learning and students are granted the opportunity to work on one major project.
CETPA also supplies study materials and lab materials to the student. After successful
completion of College campus training, students are provided certificates, which are globally
approved. On-campus training program is helpful to students and college authorities as well.
Money of students is utilized because the fee of on campus training programs is lesser than
off-campus training courses. Students can pursue 2-4 weeks College campus training
programs in all technologies so that they can cover the syllabus comprehensively and avail
the benefits as well as the quality standards that the company offers.

4.2 Online Training Portal: CETPA is a learning-centered platform which is

providing training to engineering students in different IT technologies. It has assisted many
learners, job seekers and working professionals to enhance their technical skills to become a
skilled professional. In order to respond to the growing demand for training in overseas
countries, CETPA offers overseas training courses. CETPA overseas training agenda is one
suitable method of communication of latest technologies and courses which are demanded in
the market. Due to its certified quality standards, local industries in developing countries
have great expectations from CETPA’s training process. CETPA trainers with several years of
guidance know-how will dispatch the manner of deliberating and the manner of working.

17
CETPA provides overseas training online.It is providedthrough Skype and other online
modes.The company offers 2- 6 weeks overseas training courses so that participants can
achieve their proficiency through workshop, practice and practical classes relevant to the
subject of the program.

4.3 Corporate Training: Improve the Performance of your Business With our
Innovative Corporate Training Solutions in Noida. Looking for a corporate training company
in Delhi or Noida that offers more than “Talk”? We at CETPA Infotech, provide bespoke
Training Solutions, that make a huge impact on your business outcomes from improving the
bottom line to boosting the morale of the workplace. With over a decade of experience, in
providing a client-focused approach to our training solutions, CETPA is undoubtedly the
leader when it comes to Corporate Training in Noida. We are more than a regular training
consultancy who just delivers a few key principals and over-the-top presentations.

4.4 Fresher Training: CETPA imparts fresher training in NOIDA and at all of its
other branches. CETPA INFOTECH has its presence across all the extensive cities of
Northern India like Noida, Roorkee, Lucknow, Dehradun and . CETPA provides finest
fresher training by virtue of training which is accomplished by professionals. CETPA carries
out training and learning on live projects also. CETPA outlines its fresher training by
observing the current demand of the industries. CETPA is the finest institution for imparting
fresher training on modern automation in all fields of engineering. CETPA provides fresher
training for B. Tech/B.C.A/M.C.A/B.E and M.Tech students.
CETPA conveys aspect education and provides tremendous certified fresher training in the
entire NOIDA. The demand of abundant large upmarket grades is fulfilled by CETPA by
providing best training. CETPA is the authorized training partner of Microsoft, Oracle WDP,
Autodesk, Panasonic and Nuvoton. CETPA is a talent development Company that is
constructing a staff pool for global industry necessity. CETPA is a dominant name in the
fresher training industry. CETPA is known for simmering out globally competent experts who
are miles ahead of others in skill set, ability and ability to deliver. CETPA has a big chain of
IT courses that are industry- centric and job-aligned. These courses have enabled many
freshers to find fruitful jobs.

18
4.5 Summer Training: Summer Training in Noida provides the students with the
advantage of gaining real-world experience. When the students will be facing their first job
interviews, summer training will be the most important experience that is taken into account.
During the tenure of summer training students are exposed to the actual organizational
culture of an environment and also with industrial projects. They can get to learn about the
practical aspects of implementation like coding, decoding, programming, debugging,
configuration, installation, administration, designing skills under the guidance and
mentorship of industrial experts and trainers.

CETPA, Top Summer training Company for CS Student/ CSE Student/ IT Student/ Computer
Science/ Information Student/ B. TECH/ BE Student/ M.TECH Student/ BCA Student/ MCA
Student/ B.Sc Student/ M.Sc Student has also a very good and consistent placement track
record. During the financial year of 2021-22 some of the most reputed corporate giants like
Fiserv Inc. (NASDAQ listed MNC company), Sakri IT Solution, Jubilant Life Sciences Pvt.
Ltd, Saraswati Dynamics, BrainSmith Consultants and many more visited CETPA campus for
campus recruitment. Students are also provided with all sorts of additional assistance like soft
skill, personality development during their summer training.

4.6 MOU Activities:

Some of the MOU activities of CETPA Infotech are:

● Training to students on emerging technologies such as IoT, Python, Machine

Learning, etc.
● Providing hardware kits to the students for practical learning.
● Conducting workshops, seminars and guest lectures on various topics related to
software and embedded systems.
● Offering placement assistance to the trained students.

19
 Chapter 5
Modules of Industry

5.1 React.JS

React.JS is a JavaScript library for building user interfaces. It is an open-source,

component-based library that is responsible only for the view layer of the application. It is not
a framework, but a library that can be used with other frameworks or libraries. React.JS uses
an HTML-in-JavaScript syntax called JSX (JavaScript and XML) .
React JS is the latest and innovative UI (user interface) that is more flexible and interactive as
compared to most other tools. It consists of components which are easy to use and re-usable.
ReactJS training Class in Noida assists you to learn how to use ReactJS to design next-gen
web applications. It incorporates all the practical perspectives of managing data, developing
with React, and server communication with Redux.

5.2 JavaSceript ES5 AND ES6

JavaScript ES5 and ES6 are two versions of the ECMAScript standard for scripting
languages like JavaScript. ES5 stands for ECMAScript 5 or ECMAScript 2009, while ES6
stands for ECMAScript 6 or ECMAScript 2015. ES6 is a major enhancement in the
JavaScript language that allows us to write programs for complex applications .

You have listed a lot of topics related to JavaScript. Here is a brief overview of some of them:

● Basic JavaScript: JavaScript is a multi-paradigm, dynamic language with types,

operators, objects, and methods. Its syntax is based on Java and C languages .
● Object Based JavaScript: JavaScript supports object-oriented programming with
object prototypes and classes. Objects are collections of properties and methods that
can be created, modified, and inherited.

20
● Introduction to ES6: ES6 is the sixth edition of the ECMAScript standard for
JavaScript. It introduces many new features and enhancements to the language, such
as arrow functions, classes, modules, promises, destructuring, etc.
● JavaScript Helpers: JavaScript provides some built-in methods for arrays and
objects that can help with iteration, filtering, mapping, testing, etc.
● String Literals: String literals are sequences of characters enclosed in quotes. They
can be single quotes ('...') or double quotes ("..."). ES6 also introduces template
literals (\…``) that allow embedded expressions and multi-line strings .
● Destructuring: Destructuring is a feature of ES6 that allows assigning values from
arrays or objects to variables using a syntax that mimics the array or object literals.
● Rest parameters & spread operator: Rest parameters and spread operator are two
features of ES6 that use the same syntax (...) but have different purposes. Rest
parameters allow capturing an indefinite number of arguments in a function as an
array.
● Arrow function: Arrow function is a feature of ES6 that provides a concise syntax
for defining functions. It uses an arrow (=>) to separate the parameters and the body
of the function.
● Default parameter: Default parameter is a feature of ES6 that allows specifying a
default value for a function parameter if it is not provided by the caller.
● Class: Inheritance, constructor: Class is a feature of ES6 that provides a syntactic
sugar for defining constructor functions and prototype-based inheritance in
JavaScript. A class can have a constructor method that initializes the object properties
and methods. A class can also extend another class using the extends keyword and
inherit its properties and methods.
● Promise: Promise is a feature of ES6 that represents an asynchronous operation that
can either be fulfilled with a value or rejected with a reason. A promise can have three
states: pending (not settled yet), fulfilled (resolved with a value), or rejected (rejected
with a reason). A promise can be created using the new Promise() constructor or using
static methods like Promise.resolve() or Promise.reject(). A promise can be handled
using the then() method that takes two callbacks.
● Garbage Collection: Java's automatic memory management, handled by the JVM,
includes garbage collection. This feature releases memory occupied by objects that
are no longer in use, preventing memory leaks.

21
5.3 React.JS Overview

React JS is the latest and innovative UI (user interface) that is more flexible and interactive as
compared to most other tools. It consists of components which are easy to use and re-usable.
ReactJS training Class in Noida assists you to learn how to use ReactJS to design next-gen
web applications. It incorporates all the practical perspectives of managing data, developing
with React, and server communication with Redux.

● Single Page Application: A single page application (SPA) is an application that loads
a single HTML page and all the necessary assets (such as JavaScript and CSS)
required for the application to run. Any interactions with the page or subsequent pages
do not require a round trip to the server which means the page is not reloaded .
● SPA: SPA has several advantages over traditional web applications, such as:
○ Simplicity: SPAs are easier to develop and maintain than traditional web
applications. Developers only need to build a single HTML file for the SPA.
No server-side changes are necessary.
○ User experience: SPAs provide a smoother and faster user experience, as
there is no page reloading or waiting for server responses. SPAs can also work
offline or with poor network connectivity, thanks to caching and service
workers.
○ SEO: SPAs can improve the search engine optimization (SEO) of web
applications, as they can render the content on the server-side or use
pre-rendering techniques to generate static HTML pages that can be indexed
by search engines.
● React JS Version: The current stable version of React JS is 17.0.2, released on March
22, 2021. The latest experimental version is 18.0.0-alpha-b6ff9ad16-20210820,
released on August 20, 2021 .
● REACT DOM: ReactDOM is a package that provides DOM-specific methods that
can be used in a web environment. It is used to render React elements to the DOM
and to manage the events and lifecycle of React components .

22
 ● REACT VIRTUAL DOM: React Virtual DOM is an in-memory representation of
the real DOM that React uses to update the UI efficiently. It is a tree of React
elements that reflects the state of the UI. When the state changes, React compares the
new virtual DOM with the old one and applies only the necessary changes to the real
DOM .

5.4 ReactJS Environment

React JS environment refers to the tools and configurations that are required to run and
develop React JS applications. Some of the aspects of React JS environment are:

● Environment variables: Environment variables are key-value pairs that can be used
to store and access sensitive or dynamic data in React JS applications, such as API
keys, URLs, etc. Environment variables can be defined in a .env file or in the system
environment. They can be accessed using the process.env object. Environment
variables that start with REACT_APP_ are embedded in the app code during build
time .
● JavaScript requirements: React JS supports all modern browsers that provide
modern browser features natively or have compliant implementations, such as Edge,
Firefox, Chrome, Safari, etc. For older browsers and devices that do not support these
features, such as Internet Explorer, a global polyfill may be required to add missing
functionality .
● Development tools: React JS development requires some tools that can help with
creating, building, testing, and deploying React JS applications. Some of the common
tools are:
● Node.js: Node.js is a runtime environment that allows running JavaScript code
outside the browser. It is used to install and manage dependencies, run scripts,
and serve the app locally .
● npm or yarn: npm or yarn are package managers that can be used to install and
update React JS and other libraries from the npm registry or other sources.

23
 ● Create React App: Create React App is a toolchain that can be used to create a
React JS project with a preconfigured setup of webpack, Babel, ESLint, Jest, etc.
It also provides features such as hot reloading, code splitt

5.5 Features Of React.JS AND Components

React Concepts are the fundamental ideas and techniques that are used to create and manage
React JS applications. Some of the React Concepts are:

● JSX: JSX is a syntax extension that allows writing HTML-like code in JavaScript.
JSX is transformed into React elements by a compiler such as Babel.
● Render Elements: Render elements are the smallest building blocks of React JS
applications. They describe what to display on the screen. Render elements are
created using JSX or React.createElement() function.
● Types of Components: Components are reusable pieces of UI that can accept inputs
(props) and return render elements. React JS has two types of components: functional
components and class components.
● Class Components: Class components are JavaScript classes that extend
React.Component. They have a mandatory render() method that returns a JSX
element. They can also have state and lifecycle methods.
● Life Cycle Method of Class components: Life cycle methods are special methods
that are invoked at different stages of a component’s existence, such as mounting,
updating, and unmounting. They can be used to perform side effects, such as fetching
data, manipulating DOM, etc.
● Functional Components: Functional components are JavaScript functions that return
a JSX element. They do not have state or lifecycle methods by default, but they can
use hooks to add them.
● HOOKS in detail: Hooks are functions that let functional components use state and
other React features, such as effects, context, reducers, etc. Hooks start with the word
“use”, such as useState(), useEffect(), useContext(), etc.

24
● Use of HOOK: Hooks are used to add interactivity and functionality to functional
components, such as managing state, performing side effects, accessing context, etc.
Hooks can also be custom-made to reuse logic between components.
● What is state: State is a JavaScript object that controls the behavior of a component.
The change in state triggers component re-renders. State can be defined using
this.state in class components or useState() hook in functional components.
● React Forms: React Forms are components that allow users to input data and submit
it to a server or other handler. React Forms can use controlled or uncontrolled
components to manage form state and values.
● Components and Props: Components and props are the basic concepts of React JS.
Components are reusable pieces of UI that can accept inputs (props) and return render
elements. Props are arguments passed to components from their parent or caller.
● State and Lifecycle Handling Events: State and lifecycle handling events are the
advanced concepts of React JS. State is a JavaScript object that controls the behavior
of a component. Lifecycle handling events are special methods that are invoked at
different stages of a component’s existence. They can be used to perform side effects,
such as fetching data, manipulating DOM, etc.
● Practice on above topics: Practice on above topics is the best way to learn and
master React JS concepts. There are many online resources and platforms that offer
tutorials, exercises, projects, quizzes, etc on React JS concepts, such as
freeCodeCamp1, GeeksforGeeks [6], Upmostly, etc.

25
5.6 Routing With React Router

Setting Up React Router is the process of installing and configuring React Router, a library
that provides routing functionality for React JS applications. Some of the steps involved are:

● Install/ Uninstall React router: React Router can be installed using npm or yarn
commands, such as npm install react-router-dom or yarn add react-router-dom. To
uninstall React Router, use npm uninstall react-router-dom or yarn remove
react-router-dom. To install a specific version of React Router, use @version after the
package name, such as npm install [email protected] .
● React Router Version 5: React Router Version 5 is the previous major version of
React Router. It has some differences from the current version 6, such as using
<Switch> component to render only one matching route, using <Redirect> component
to redirect to another route, using useParams() hook to access route parameters, etc.
● React router Version 6: React Router Version 6 is the current major version of React
Router. It has some changes from the previous version 5, such as using <Routes>
component to render nested routes, using <Navigate> component to navigate or
redirect to another route, using useNavigate() hook to programmatically navigate,
using useParams() hook to access route parameters and nested routes, etc.
● Setting up react router: Setting up react router involves importing the necessary
components from react-router-dom, such as <BrowserRouter>, <Routes>, <Route>,
<Link>, <NavLink>, <Navigate>, etc. Then, wrapping the app component with
<BrowserRouter> and defining the routes with <Routes> and <Route> components.
● Understand routing in single page applications: Routing in single page applications
is the technique of changing the URL and rendering different components without
reloading the entire page. Routing enables navigation, bookmarking, and sharing of
different views of an app. React Router is a library that provides routing functionality
for React JS applications.

26
● Working with Browser Router components: Browser Router components are the
components that use the HTML5 history API to keep the UI in sync with the URL.
They include <BrowserRouter>, which creates a browser history object and provides
it to all child components, <Routes>, which renders a collection of <Route>
components, <Route>, which renders a component based on the matching path and
element props, etc.
● Configuring route with Route component: Configuring route with Route
component involves defining the path and element props for each route. The path prop
specifies the URL pattern that the route matches, such as /home, /about, /users/:id, etc.
The element prop specifies the component that the route renders, such as <Home />,
<About />, <User />, etc. The Route component can also accept other props, such as
caseSensitive, end, index, etc.
● Making routes dynamic using Route params: Route params are the variables that
are part of the path prop of a Route component. They are used to make routes
dynamic and pass data from one component to another. Route params are prefixed
with a colon (:) in the path prop, such as /users/:id, /posts/:slug, etc. They can be
accessed using the useParams() hook in the component that renders for that route.
● Working with nested routes: Nested routes are the routes that are defined inside
another route. They are used to create hierarchical and modular UIs. Nested routes are
rendered inside a parent route using the <Outlet> component. Nested routes can also
have their own route params and nested routes.
● Navigating to pages using Link and Nav Link Component: Link and Nav Link
Component are the components that provide declarative navigation to different routes.
They render an anchor (<a>) element with an href attribute that matches the to prop.
The difference between Link and Nav Link is that Nav Link can also apply an active
class or style when its to prop matches the current URL.
● Redirect routes using Redirect Component: Redirect Component is a component
that redirects to another route programmatically. It renders a <Navigate> component
with a replace prop set to true. It accepts a prop that specifies the destination route. In
React Router Version 6, Redirect.

27
5.7 Key Featuers Of React.JS

ReactJS is a popular JavaScript library used for building user interfaces. It was developed by
Facebook and has gained widespread adoption due to its efficiency, flexibility, and
easy-to-learn syntax. Some of the key features of ReactJS are:

● JSX: JSX is a combination of HTML and JavaScript. You can embed JavaScript
objects, expressions, and variables inside HTML-like code. JSX makes it easier to
write and read React code.
● Virtual DOM: Virtual DOM is a lightweight representation of the actual DOM
(Document Object Model) used by web browsers. In ReactJS, instead of making
changes to the actual DOM, changes are made to the Virtual DOM first, and then the
changes are propagated to the actual DOM using a diffing algorithm. This improves
the performance and efficiency of rendering and updating the UI.
● Component-based architecture: Component-based architecture is a design pattern
that divides the UI into reusable and independent pieces of code called components.
Components can have their own state, props, logic, and lifecycle methods.
Components can also be composed together to create complex UIs. Component-based
architecture makes React code more modular, maintainable, and testable.
● One-way data flow: One-way data flow is a principle that states that data flows in
one direction from parent to child components. This means that child components
cannot directly modify the data passed to them as props from parent components.
Instead, they have to use callback functions or other mechanisms to communicate
with parent components. One-way data flow makes React code more predictable,
easier to debug, and less prone to errors.

28
5.8 Event Handling In React

Event handling in React is the process of responding to user actions on the UI, such as clicks,
mouseovers, key presses, etc. Event handling in React is similar to event handling on DOM
elements, but with some differences:

● Event names are written in camelCase, not lowercase. For example, onClick, not
onclick.
● Event handlers are passed as functions inside curly braces, not strings. For example,
onClick={handleClick}, not onClick=“handleClick()”.
● Event handlers can be defined separately or inline. For example, <button
onClick={handleClick}> or <button onClick={() => alert(‘Hello’)}>.
● Event handlers use synthetic events, which are wrappers around native browser
events. Synthetic events have the same interface as native events, but work
consistently across different browsers.

To handle events in React, you need to follow these steps:

● Define a function that will perform the desired action when the event occurs. This
function can access the event object as a parameter, which contains information about
the event and the target element.
● Pass the function as a prop to the element that will trigger the event. Use the
appropriate event name and syntax.
● Optionally, use state or props to update the UI based on the event.

29
5.9 Working With Forms

Working with forms in React involves setting up a form component, handling user input,
rendering different form inputs, and handling form submission. React provides a
straightforward and efficient way to manage form state and handle form validation.

There are two ways of working with forms in React: controlled components and uncontrolled
components.

● Controlled components: In this approach, form data is handled by React through the
use of hooks such as the useState hook. The form inputs are bound to the component
state, and the state is updated whenever the user changes the input value. The
component state is the single source of truth for the form data.
● Uncontrolled components: In this approach, form data is handled by the DOM rather
than by React. The form inputs are not bound to the component state, and the state is
not updated whenever the user changes the input value. The DOM elements are the
source of truth for the form data, and they can be accessed using refs or native
methods.

The choice between controlled and uncontrolled components depends on your preference and
use case. Generally, controlled components are recommended as they offer more control,
consistency, and simplicity over the form data.

5.10 Redux

Redux is a library for managing the state of JavaScript applications. State is the data that
changes over time in your app, such as user input, server responses, and UI changes.

Redux helps you write applications that behave consistently, run in different environments,
and are easy to test. It also provides a great developer experience, such as live code editing
and time traveling debugging.

30
Redux works by centralizing your application’s state and logic in a single object called the
store. The store can only be updated by dispatching actions, which are plain objects that
describe what happened. The actions are handled by pure functions called reducers, which
specify how the state changes in response to each action. The state is then read by
components using selectors, which are functions that extract and transform relevant data from
the store.

To use Redux in your app, you need to follow these steps:

● Install Redux and React-Redux packages using npm or yarn.

● Define your initial state and reducers.
● Create a store using the createStore function from Redux.
● Provide the store to your React components using the Provider component from
React-Redux.
● Connect your components to the store using the useSelector and useDispatch hooks
from React-Redux.
● Dispatch actions to update the state using the dispatch function from React-Redux.

5.11 React With Design Framework

React is a library for creating user interfaces, not a framework. It lets you put components
together, but it doesn’t prescribe how to do routing and data fetching. To build an entire app
with React, you need to use other libraries or frameworks that complement React.

A design framework is a collection of reusable UI components that follow a certain design

language or style guide. A design framework can help you create consistent, beautiful, and
responsive UIs with React.

There are many design frameworks available for React, each with its own pros and cons.
Some of the most popular ones are:

31
 ● Material UI: A React implementation of Google’s Material Design, which is a design
system based on paper and ink metaphors. Material UI provides over 50 UI
components, such as buttons, cards, dialogs, menus, etc., that are customizable and
accessible.
● Ant Design: A React UI library that follows the Ant Design System, which is a
design language for enterprise-level applications. Ant Design provides over 100 UI
components, such as tables, forms, charts, icons, etc., that are elegant and functional.
● Atlaskit: A React UI library that follows the Atlassian Design Guidelines, which is a
design system for creating collaborative products. Atlaskit provides over 60 UI
components, such as avatars, badges, comments, navigation, etc., that are reusable,
compliant, and well-maintained.
● Bootstrap: A popular CSS framework that provides a grid system, typography,
utilities, and UI components for building responsive web pages. Bootstrap can be used
with React by installing the react-bootstrap package, which provides React
components for Bootstrap’s UI elements.
● Semantic UI: A CSS framework that uses natural language to describe its UI
elements and classes. Semantic UI can be used with React by installing the
semantic-ui-react package, which provides React components for Semantic UI’s UI
elements.

5.12 React API’S

React API is the set of methods and functions that React provides to help you create and
manipulate UI components. React API can be divided into two categories: top-level API and
component API.

Top-level API is the entry point to the React library. It includes methods such as
React.createElement, React.createRef, React.Fragment, etc., that let you create and transform
React elements, which are the smallest building blocks of React apps.

Component API is the set of methods and properties that each React component has. It
includes methods such as componentDidMount, componentDidUpdate, component Will
Unmount, etc., that let you manage the component’s lifecycle, state, and props.

32
To consume REST APIs in React, you need to use other libraries or tools that can make
HTTP requests and handle responses. Some of the most popular ones are:

● Fetch API: A native browser API that lets you make HTTP requests using the fetch
function. It returns a promise that resolves to a Response object, which you can then
process using methods like .json(), .text(), etc.
● Axios: A third-party library that simplifies making HTTP requests using the axios
function. It returns a promise that resolves to an object containing data, status,
headers, etc., which you can then access using dot notation or destructuring.
● React Query: A third-party library that provides hooks for fetching, caching, and
updating data from REST APIs. It handles common tasks like loading states, error
handling, caching, refetching, etc., and lets you focus on your UI logic.

To use these libraries or tools with React, you need to follow these steps:

● Install the library or tool using npm or yarn.

● Import the library or tool in your React component file.
● Define a function or a hook that makes the HTTP request using the library or tool.
● Call the function or use the hook in your component’s render method or useEffect
hook.
● Use the data or error returned by the library or tool to update your component’s state
or UI.

33
 Chapter 6
Details about the Modules

6.1 Introduction

An articles management system is a set of services or software that helps you to manage,
publish, and distribute articles for your journal, website, or organization. . The application
provides a graphical user interface (GUI) built using React.JS, allowing users to read and
write articals, and publish and display the writted artical. The program then calculates and
displays the converted amount.

6.2 Features

● User-friendly GUI: The application provides an intuitive and user-friendly GUI for
easy interaction.
● Article Reading and Writing: Users can read and write the articles and search for a
spacific articals.
● Card Generater: The application automatically generates the card for written articles
and makes it slidly and fixed bases of length of the articles.
● Real-time Card changes: The application performs card color changing operation in
real time and at each render of the website all card colors change dynamically.
● Login and Register: In application user can generate his/her Id by different way like
manual, by google account, by linkdin account etc.

34
6.3 Technologies Used

● React.JS: The JS library React.JS used to develop the front-end of the application.
● Json Server: Json Server used for storing and fetching data in the front-end.
● Bootstrap: Bootstrap used for designing the UI of the application.

6.4 Implementation

The artical management system application is implemented as a React.JS application. The

design of the layout is performed using the CSS framework Bootstrap. The application
consists of two main files: package.json and db.json.

6.5 Outputs

Fig 02: Home page of artical Management System

35
Fig 03: Articles Section of artical Management System

Fig 04: Login page of artical Management System

36
Fig 05: Register page of artical Management System

Fig 06: Search Bar of artical Management System

37
6.8 Artical Management System Logic

The artical management system simply works on storing data and fetching data from the API
and all the fetching data bound in a particular card.

6.9 Build & Execution

To run the application, you need to react app by NPM and also need to start a json server for
storing and fetching data in the form of an API.

● Open the project in visual studio and othe React envirnoment.

● Start the react app and json server..
● Run the application, and the GUI will appear on the screen.
● Read and Write the article and also can create Id in the application.
● For adding a new article enter the article topic, author name, article title, and content
of the artical .
● Click the "Submit" button to see the article displayed in the article section.

6.10 Conclusion

The article management system provides a platform for writers to write articles and readers to
read the article and increase English language efficiency and also give them a chance to
develop good writing skill.

6.11 Future Enhancements

For future development, some potential enhancements to consider are:

● Using the backend makes a secure and efficient application.
● Adding some new modules like defining the stars to the writer and bases of stars
display articles on screen..
● Deployed the application in the World Wide Web.

38
 Chapter 7
Training Outcome

7.1 Introduction

The outcome of the training is that I am familiar with client-side Javascript application
development and the React library. Implement single page applications in React. Use various
React features including components and forms. Implement a functional front-end web
application using React.

7.2 Overview of the Industrial Training

The industrial training at Cetpa Infotech Private Limited was meticulously tailored to center
around React.JS, pivotal to the software development landscape. This comprehensive training
curriculum encompassed an array of modules, encompassing an in-depth exploration of
React.JS fundamentals, immersive GUI (Graphical User Interface) development using
React.JS, adept utilization of development tools such as Visual Studio, and a foundational
introduction to the world of API integration. This holistic approach to training ensured a
well-rounded exposure to React.JS and its multifaceted applications.

39
7.3 Skills Acquired during Training

Throughout the training period, several valuable skills were acquired:

● CSS: I learn how to use CSS selectors, implement a CSS reset, use flexbox, and
apply responsive web design.
● JavaScript: You will learn how to use basic data structures, functions, classes,
promises, async/await, ES6 features, and more.
● React: You will learn how to use React components, hooks, props, state, lifecycle
methods, routing, context API, and more.
● APIs: You will learn how to fetch data from external sources using APIs and display
them in your React app.
● Soft skills: You will also develop communication, collaboration, problem-solving,
and analytical thinking skills that are essential for working as a React developer.

7.4 Practical Application of Skills

The proficiencies gained during the training phase metamorphosed into practical prowess,
ingeniously harnessed across a spectrum of projects and real-world scenarios. Armed with
hands-on experience, the capacity to forge functional, user-centric applications using
React.JS was harnessed to great effect. From user interaction paradigms to intricate data
manipulation operations, practical assignments and projects evolved as the conduits for the
application of acquired skills, ultimately solidifying the theoretical bedrock of the training.

7.5 Enhanced Understanding of Core Java

The training voyage significantly elevated the level of comprehension pertaining to React.JS
'intricate landscape. From fundamental programming constructs to the holistic embrace of
React.JS paradigms, and the deft manipulation of data structures, the training provided a
panoramic understanding of the development foundations. Furthermore, the curated exposure
to a diverse spectrum of React.JS and APIs broadened the horizon of React.JS versatile
capabilities.
40
7.6 Exposure to Industry Standards & Best Practices

A pivotal facet of the training at Cetpa Infotech Private Limited was the resolute adherence to
industry standards and best practices within the realm of coding and application development.
This institutionalization of best practices catalyzed the development of a coding ethos
characterized by cleanliness, modularity, and maintainability. The mastery of structuring code
congruent with industry standards emerged as a pivotal cornerstone, immeasurably
augmenting the caliber of programming skills on offer.

7.7 Improvement in Problem-Solving Abilities

Central to the training trajectory were myriad programming conundrums and exercises
necessitating an amalgamation of analytical finesse and imaginative problem-solving
dexterity. These intellectual crucibles functioned as crucibles for honing the art of dissecting
intricate challenges, demystifying them into more manageable components, and architecting
efficacious solutions that bore testament to the burgeoning problem-solving acumen.

7.8 Effective Team Collaboration & Communication

The orchestration of collaborative brilliance found its expression through the realm of version
control systems, prominently exemplified by Git and GitHub. This symphony of
collaborative coding fostered an intuitive understanding of code repository management, the
dynamics of harmonious teamwork, and the art of harmonizing potentially discordant merge
conflicts. An unequivocal takeaway was the profound realization of the centrality of effective
communication and teamwork within the tapestry of software development projects.

41
7.9 Introduction to Real-World Software Development

The synthesis of hands-on projects and assignments unfurled an introductory vista into the
intricate tapestry of the software development life cycle. From the meticulous analysis of
requirements to the meticulous design of user interfaces, the embodiment of functionality, the
rigors of testing, and the finesse of debugging, the training journey provided an invaluable
backstage pass to the art of translating abstract concepts into tangible, functional applications.

7.10 Project Management & Time Management Skills

Juggling the concurrent stewardship of multiple assignments and projects within the confines
of finite temporal parameters emerged as a crucible for the development of robust project
management and time allocation skills. The training's crucible underscored the pivotal import
of strategic planning, the delineation of milestones, and the punctual negotiation of deadlines
as indispensable pillars underpinning the triumphant fruition of any project endeavor.

42
 Chapter 8
Conclusion

The industrial training at Cetpa Infotech Private Limited was a transformative experience that
significantly contributed to my growth as a programmer and aspiring software developer. The
hands-on approach, exposure to industry practices, and practical application of React.JS skills
enriched my technical and professional abilities. The training not only imparted technical
knowledge but also instilled essential soft skills like teamwork, communication, and
problem-solving. The gained experience will undoubtedly prove valuable in my future
academic and professional pursuits.

43
 References

● https://www.cetpainfotech.com/technolgy/react-js-training#course
● https://www.cetpainfotech.com/
● https://www.cetpainfotech.com/hr-consultancy#
● https://onlinetraining.cetpainfotech.com/login.aspx?ReturnUrl=%2fstudents%2faplyo
nlinetraining.aspx
● https://onlinetraining.cetpainfotech.com/students/RequestforCertificate.aspx

44