SALFORD & CO.

COMPONENTS AND
FUNCTIONAL, CLASS
COMPONENT
D A Y - 0 6
 SALFORD & CO.

COMPONENTS :-

The component-based approach

was introduced to overcome an
issue. In this approach, the entire
application is divided into a small
logical group of code, which is
known as components.
SALFORD & CO.

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.
SALFORD & CO.

Every React component have their own structure, methods

as well as APIs. They can be reusable as per your need. For
better understanding, consider the entire UI as a tree. Here,
the root is the starting component, and each of the other
pieces becomes branches, which are further divided into
sub-branches.
SALFORD & CO.

IN REACTJS, WE HAVE MAINLY TWO TYPES OF

COMPONENTS. THEY ARE

FUNCTIONAL COMPONENTS
CLASS COMPONENTS
 SALFORD & CO.

FUNCTIONAL
COMPONENT :-
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.
 SAMPLE CODE :-

function WelcomeMessage(props) {
return <h1>Welcome to the , {props.name}</h1>;
}
IMPORT REACT, { COMPONENT } FROM 'REACT';
CLASS APP EXTENDS REACT.COMPONENT {
RENDER() {
RETURN (
<DIV> CLASS SECOND EXTENDS REACT.COMPONENT {
RENDER() {
<FIRST/> RETURN (
<SECOND/> <DIV>
</DIV> <H2>WWW.JAVATPOINT.COM</H2>
<P>THIS WEBSITES CONTAINS THE GREAT CS TUTORIAL.</P>
);
</DIV>
} );
} }
}
CLASS FIRST EXTENDS REACT.COMPONENT {
EXPORT DEFAULT APP;
RENDER() {
RETURN (
<DIV>
<H1>JAVATPOINT</H1>
</DIV>
);
}
}
 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.
CLASS MYCOMPONENT EXTENDS REACT.COMPONENT {
RENDER() {
RETURN (
<DIV>THIS IS MAIN COMPONENT.</DIV>
);
}
}
 THE CLASS COMPONENT IS ALSO KNOWN AS A
STATEFUL COMPONENT BECAUSE THEY CAN HOLD
OR MANAGE LOCAL STATE. IT CAN BE EXPLAINED IN
THE BELOW EXAMPLE.
EXAMPLE
IN THIS EXAMPLE, WE ARE CREATING THE LIST OF UNORDERED
ELEMENTS, WHERE WE WILL DYNAMICALLY INSERT STUDENTNAME FOR
EVERY OBJECT FROM THE DATA ARRAY. HERE, WE ARE USING ES6
ARROW SYNTAX (=>) WHICH LOOKS MUCH CLEANER THAN THE OLD
JAVASCRIPT SYNTAX. IT HELPS US TO CREATE OUR ELEMENTS WITH
FEWER LINES OF CODE. IT IS ESPECIALLY USEFUL WHEN WE NEED TO
CREATE A LIST WITH A LOT OF ITEMS.
 IMPORT REACT, { COMPONENT } FROM 'REACT';
CLASS APP EXTENDS REACT.COMPONENT {
CONSTRUCTOR() { CLASS STUDENTNAME EXTENDS REACT.COMPONENT {
SUPER();
THIS.STATE = { RENDER() {
DATA:
RETURN (
[
{ <DIV>
"NAME":"ABHISHEK"
},
<H1>STUDENT NAME DETAIL</H1>
{ </DIV>
"NAME":"SAHARSH"
},
);
{ }
"NAME":"AJAY"
} }
] CLASS LIST EXTENDS REACT.COMPONENT {
}
} RENDER() {
RENDER() {
RETURN (
RETURN (
<DIV> <UL>
<STUDENTNAME/>
<UL>
<LI>{THIS.PROPS.DATA.NAME}</LI>
{THIS.STATE.DATA.MAP((ITEM) => <LIST DATA = {ITEM} />)} </UL>
</UL>
</DIV>
);
); }
}
} }
EXPORT DEFAULT APP;
7 BEST REASONS TO USE REACT.JS COMPONENTS IN YOUR PROJECT
1. INSTANT UPDATES WITHOUT PAGE RELOADS.
2. USE CONDITIONAL STATEMENTS WITHIN THE JSX.

3. REUSE THE SAME COMPONENTS.

4. UPDATE JUST ONE COMPONENT.

5. THE CODE IS NICE AND STABLE.

6. REACT.JS IS EASY TO LEARN.

7. REACT.JS HAS A VERY STURDY ENGINEERING TEAM BEHIND IT.

 1. INSTANT UPDATES WITHOUT PAGE RELOADS.

PERHAPS THE BIGGEST OF ALL REACT BENEFITS IS THE ABILITY TO UPDATE

INDIVIDUAL ELEMENTS ON YOUR WEB PAGE OR APP WITHOUT THE NEED TO
RELOAD THE ENTIRE PAGE. YOU CAN SEE THIS IN ACTION ON FACEBOOK,
WHEN PEOPLE CLICK LIKE OR WRITE A COMMENT THAT APPEARS
IMMEDIATELY. THERE’S NO NEED FOR EXCESSIVE LOADING AND THIS
FEATURE MAKES IT POSSIBLE TO UPDATE INFORMATION AS IT COMES IN.
 2. USE CONDITIONAL STATEMENTS WITHIN THE JSX.

JSX IS A JAVASCRIPT EXTENSION TO MAKE REACT.JS COMPONENTS MORE EFFICIENT. YOU CAN USE IT
TO CREATE A SINGLE FILE FOR BOTH MARKUP AND LOGIC, ELIMINATING THE NEED TO WORK ON
MULTIPLE FILES. JSX ALLOWS YOU TO EASILY CREATE CONDITIONAL STATEMENTS TO IMPROVE YOUR
DESIGN AND THE FUNCTIONALITY OF THE APP. IN FACT, YOU CAN BLEND HTML AND JSX TOGETHER TO
GIVE YOU EXACTLY THE RESULT YOU DESIRE.

JSX IS ALSO MUCH FASTER THAN JAVASCRIPT, SO YOU CAN GET YOUR PROJECT DONE FASTER. YOU’LL
FIND IT QUITE SIMPLE TO BUILD YOUR OWN TEMPLATES.
 3. REUSE THE SAME COMPONENTS.

AS YOU DESIGN YOUR MOBILE APP, YOU CAN USE THE SAME
ASSETS. REACT ORIGINALLY DID NOT REUSE CODE
COMPONENTS, WHICH MEANT A LOT OF TIME WAS WASTED.
HOWEVER, THAT OPTION IS NOW AVAILABLE AND YOU CAN
SPEED THINGS UP EVEN MORE BY USING THE SAME CODE OR
ASSETS AND THEN ADJUSTING TO YOUR NEEDS.
4. UPDATE JUST ONE COMPONENT.

EVERY REACT.JS COMPONENT ACTS SEPARATELY, SO YOU CAN CHANGE ONE SECTION OF
THE APP WITHOUT NEEDING TO UPDATE EVERYTHING. THIS ALSO MEANS YOU CAN USE THE
SAME COMPONENT IN EACH AREA OF THE APP AND CHANGE THE INDIVIDUAL PIECES.
THERE’S LESS TO UPDATE, SO IT MAKES THE ENTIRE PROCESS FAR MORE EFFICIENT.

IF THERE IS AN ERROR OR AN UPDATE THAT YOU NEED TO MAKE TO THE APP, YOU CAN DO
THIS EASILY. IN MANY APPS OR PROGRAMS, UPDATES ARE DIFFICULT BECAUSE OF THE
COMPLEX NATURE OF THE CODE. A SIMPLE CHANGE IN ONE AREA CAN END UP CAUSING
ISSUES THROUGHOUT THE ENTIRE APP. HOWEVER, WITH REACT.JS COMPONENTS, YOU CAN
MAKE QUICK ADJUSTMENTS ANYWHERE YOU LIKE WITHOUT WORRY.
5. THE CODE IS NICE AND STABLE.

AS OPPOSED TO MANY OTHER OPTIONS, REACT.JS OFFERS A STABLE CODE. THIS IS DONE BY
USING A DOWNWARD DATA FLOW. IT’S ACTUALLY HOW THE CODE PROTECTS THE PARENT
STRUCTURE FROM CHANGES IN THE CHILD STRUCTURE.

IF YOU’VE PREVIOUSLY HAD PROBLEMS WITH UNSTABLE CODE, GLITCHES, AND LONG, DRAWN
OUT MAINTENANCE PROCEDURES, YOU’LL LOVE REACT.JS. THE ABILITY TO FIX A GLITCH BY ONLY
FOCUSING ON THAT COMPONENT SAVES MORE TIME.
6. REACT.JS IS EASY TO LEARN.

ANYONE CAN LEARN TO USE THE REACT.JS COMPONENTS, BECAUSE IT’S SO

USER-FRIENDLY. ONE OF THE BIGGEST REACT BENEFITS IS THE FACT THAT IF YOU
KNOW JAVASCRIPT, YOU’LL KNOW HOW TO USE REACT. EVEN IF YOU DON’T
KNOW JAVASCRIPT, YOU LIKELY WON’T HAVE AN ISSUE LEARNING THE
COMPONENTS. THEY ARE SO WELL SET UP AND DESIGNED THAT IT TAKES VERY
LITTLE TIME TO UNDERSTAND THEM. THE CODE IS ALSO VERY FOCUSED, SO YOU
ONLY NEED TO LEARN A LITTLE IN ORDER TO DO A LOT.
 7. REACT.JS HAS A VERY STURDY
ENGINEERING TEAM BEHIND IT.

WHILE ORIGINALLY DESIGNED FOR FACEBOOK TO USE IN-HOUSE, THE REACT.JS LIBRARY IS NOW
AVAILABLE TO ANYONE WHO WANTS IT. HOWEVER, THE ENGINEERING TEAMS BEHIND THE DESIGN
ARE STILL A BIG PART OF THE PROGRAM. THESE INCLUDE TEAMS FROM FACEBOOK AND
INSTAGRAM, AND OUTSIDE DEVELOPERS WITH AN EXPERTISE IN THE AREA.

WHEN YOU USE REACT.JS COMPONENTS FOR YOUR APPS, YOU’RE IN EXPERT HANDS. IT’S ALSO
HELPFUL TO REMEMBER THAT SOME OF THE BIGGEST APPS IN THE WORLD ARE USING REACT,
MAKING IT LIKELY FACEBOOK WILL SUPPORT IT FOR YEARS TO COME. NETFLIX, PAYPAL, DROPBOX,
KHAN ACADEMY, LYFT, REDDIT, COURSERA, AND BBC ARE JUST A HANDFUL OF THE MANY SITES
THAT ARE BUILT WITH REACT.JS COMPONENTS. AS IT BECOMES MORE POPULAR, YOU’LL SEE THE
FRAMEWORK ON EVEN MORE FORTUNE 500 COMPANY SITES.
SALFORD & CO.

THANK YOU
W W W . R E A L L Y G R E A T S I T E . C O M