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.
