What are components?
All applications built using React are made up of components. These components are the building blocks of whatever application we are trying to build, as they each represent a part of the user interface (UI) that is visible to the client.
Instead of using HTML, React optionally uses JSX, (JavaScript XML) to describe the layout of the UI. JSX looks a lot like HTML, but it works inside your JavaScript code. React then turns this JSX into JavaScript and updates the page for you.
React components use props (short for properties) to share data. Props let you pass this data, like a username, from one component to another. This makes components reusable because they can show different information depending on what props they get. If you create a component to show a username, you don’t have to write different components for each user. Instead, you can just pass the username as a prop, and the component will change what it shows based on the value of the prop.
Types of React Components:
- Functional Components
- Class Components
- Pure Components
- High Order Components
Let’s focus on the two primary components:
Functional Components and Class Components.
Functional Components
Functional Components, also referred to as Stateless Functional Components, are just JavaScript/ES6 Functions.
They accept an object of properties (
props) and return HTML-like code written in JSX that describes the UI.
For example, say you want to have a message that shows that a user has logged in. You could create a LoginMessage message component and use props to pass in a username. The component will dynamically update based on the username prop.
function LoginMessage(props) {
return <p>{props.username} has logged in.</p>;
}
- The
LoginMessagecomponent is a function that acceptsprops - The JSX inside the return statement uses
props.usernameto dynamically display the username.
⭐ React component names are written in Pascal Case, meaning they always start with a capital letter (LoginMessage).
After LoginMessage is declared, you can nest it into another component like this:
function App() {
return (
<div>
<LoginMessage username="Lucy" />
<LoginMessage username="Stilton" />
<LoginMessage username="Buddy" />
</div>
);
}
- The
Appcomponent uses theLoginMessagecomponent three times. - Each
LoginMessagegets a different username as a prop.
The output would look like this:
Lucy has logged in.
Stilton has logged in.
Bud has logged in.
To use a component later, you need to export it before you can import it to another component:
function LoginMessage(props) {
return <p>{props.username} has logged in.</p>;
}
export default LoginMessage;
The export default keywords mark the main component you want to send from a file. (In this case, LoginMessage)
-
export defaultlets you import the component into another file without needing curly braces{}and also lets you name it whatever you want.
You can then import the function to the root component (in this case, App.js) by using the import declaration:
import LoginMessage from './LoginMessage';
function App() {
return (
<div>
<LoginMessage username="Lucy" />
</div>
);
}
Class Components
Class Components, also referred to as Stateful Class Components, are built using ES6 classes.
They can accept properties (
props), similar to functional components.They have to have a
render( )method to return JSX.Class components extend
React.Component.
They can also maintain a private internal state. State is the data that a component can "remember" and change. This means the component can handle dynamic data, like a user's login status or the number of times a button is clicked.
Here, the same LoginMessage functional component can be written as a class component:
class LoginMessage extends React.Component {
render() {
return <p>{this.props.username} has logged in.</p>;
}
}
- The
LoginMessagecomponent is a class that extendsReact.Component. - It uses
this.props.usernameto access theusernameprop.
Before React version 16.8, class components were used to manage state and lifecycle methods. With the introduction of React Hooks, functional components can now manage state and lifecycle methods, which makes class components less useful.
According to w3schools.com, "although Hooks generally replace class components, there are no plans to remove classes from React."
Conclusion
All applications are made up of components. React components are reusable _ that make up the user interface. They can be nested and contained in the root component.
Functional Components:
- Simple functions that receive
propsand return a declaration - Most commonly used component, especially with React Hooks
- Mostly used for UI
Class Components:
- ES6 classes that extend
React.Component - Can manage state and lifecycle methods
- Used less since the introduction of React Hooks
Sources:
Top comments (0)