Scribd
Upload
36 views3 pages

Components

helped in React Native course in Coursera

Uploaded by

Ankit Karmakar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views3 pages

Components

helped in React Native course in Coursera

Uploaded by

Ankit Karmakar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Component

 A component is an independent, reusable bit of code which


divides the UI into smaller pieces.
 Instead of building the whole UI under one single file like HTML,
we can divide all the sections into smaller independent pieces.
 In other words, these are components. Each component will go
into its own JavaScript file.
 In React we have two types of
components: functional and class.

Extracting Components

 Everything in React is a component.


 Each component returns some HTML but we can return
only a single HTML element; inside which we can write many
child elements.
 Instead of writing all the code in a single file we can split our app
into multiple components.
 Write the code which is used for some unique purpose into a
separate component and use that component wherever we want
in our app, instead of rewriting and duplicating the code.
 Components can be used in any place inside the
app without duplicating the code. This is called extracting and
reusing components.

Functional Components

 A functional component is basically a JavaScript function that


returns a React element (JSX (JavaScript XML)).
 Functional components start with function keyword.

function HelloWorld() {
return <h1>Hello world</h1>;
}
Alternatively, create a functional component with the arrow
function syntax(ES6).

const HelloWorld = () => {


return <h1>Hello world</h1>;
};

 Export the component in order to use it somewhere else.

function HelloWorld() {
return <h1>Hello World</h1>;
}
export default HelloWorld;

 Import this component into another file.

import HelloWorld from "./HelloWorld";


const App = () => {
return (
<div className="App">
<header className="App-header">
<HelloWorld />
</header>
</div>
);
};
export default App;

 In short, a functional component is a JavaScript function or ES6


function which takes props as arguments and returns a JSX.

 Components should always start with a capital letter.


Class Components

 Class components are ES6 classes that return JSX.

 Class components start with class keyword that


extends the Component constructor from React and has
a render method which returns a JSX.

class HelloWorld extends React.Component {


render() {
return <h1>Hello World</h1>;
}
}

Uses of class components

 Apart from returning the JSX, sometimes we have a


situation where we need to manage some data inside
the components; which makes the components more dynamic
and makes our application faster and more user friendly. This data
is called state.

 We used to use class components in order to manage the state. In


the older versions of React (before version 16.8), it was not
possible to use state inside functional components.

 Apart from managing the state we use class components to


perform some additional operations, like life-cycle methods.

You might also like