Introduction
In React, we utilize components to construct our code in order for it to execute properly. Components are also utilized to guarantee that we understand which components of code are used. It also makes organizing a lot simpler since we don’t want messy code.
There are two different types of components:
- Functional Component
- Class Component
Let’s take a closer look at each one in more detail.
Functional Components
A functional component is a simple Javascript function that can return an HTML UI. It can be used to accept props from another function and return HTML, also known as JSX in React.
Unlike in a class component, you don’t have to render anything in the functional component.
To define a functional component, there are two different ways you can do it
1. Using an arrow function
import React from "react";
import './App.css';
export const App = () => {
const text = "Hello World"
return(
<div className = "App">
<p>{text}</p>
</div>
)
}
export default App
2. Without arrow function
import React from "react";
import './App.css';
export function App() {
const text = "Hello World"
return(
<div className = "App">
<p>{text}</p>
</div>
)
}
export default App
For both ways, you should have to import React on top. Make sure you put export beside your function so that you can call your function component in different files. If you don’t need any data sent to your function, then remove the props
Props are data that is sent to another function component.
Let’s say that the data we sent is
name = “Bob”
age = 36
I have code for you to change in your index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App name = {"Bob"} age = {36}/>
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
We can do this with arrow function and without arrow function
1. Arrow Function
import React from "react";
import './App.css';
export const App = (props) => {
const name = props.name;
const age = props.age
return(
<div className = "App">
<p>My name is {name} and I am {age} years old</p>
</div>
)
}
export default App
2. Without arrow function
import React from "react";
import './App.css';
export function App(props) {
const name = props.name;
const age = props.age
return(
<div className = "App">
<p>My name is {name} and I am {age} years old</p>
</div>
)
}
export default App
Class Component
The class component is a regular ES6 class that uses “extends Component” as it is from the React library. This makes it a React component rather than a plain Javascript class. In this component, you have to render the returning HTML. It also has a complex UI logic compared to the functional component. You can pass props to different class components and access the props by writing “this.props”.
When you call the render method, make sure it’s in a class component; as React uses it to generate the component.
Example of class component
import React, {Component} from "react";
class App extends Component {
constructor(props) {
super(props)
this.state = {name: "Bob"}
}
render(){
return(
<div>
<h1>Hello {this.state.name}</h1>
</div>
)
}
}
export default App
Instead of just importing react from “react”, you add Component as part of the react library. You put “extends Component” after the name of the class.
You put in your constructor, then you can put whatever value you want for your state. After that, you, render and return with your state in the curly brackets in the HTML
Which one should you use?
Both have their pros and cons, but for a beginner just getting into the React library, it would be easier to use a functional component. This is because it has a low barrier to entry and you don’t have to worry about rendering anything in return.
Some advantages of using functional components are:
- Cleaner to write
- Less Complex than class components
- Less Code to Write
- Easier to read and test
- Don’t have to think much when writing a functional component
- In order to use class components effectively, you should be comfortable with JSX syntax, state management, and lifecycle methods.
Some advantages of using class components are:
- You can render the HTML you are returning
- You can write error boundaries
- Can make React more Object Oriented
- You can control the HTML contents using lifecycle methods
- Have access to state management in order to update widgets
Conclusion
Both functional and class components have their own benefits, but the best way to figure out which one you should use is by deciding what type of project you’re working on.
If it’s a simple UI with not much logic involved, go for functional components; otherwise use class components if the complexity is high and there are state management or lifecycle methods that need to be used. While React’s functional components are a bit easier to use, the class components give you a lot more freedom and flexibility when building your UI at a lower cost of entry!
Link to more information about components
