An Interest In:
Web News this Week
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
What is a React Component?
Hey there!
In this article, we are going to see what is a Component in React.js.
If you prefer video, then check it out
In short, React components are a function or a class that returns Html.
Components come in two types Class component and Functional component.
Just like a function component takes an argument called props.
Here's an example of a Functional Component:
import React from 'react';function FunctionalComponent(props) { return ( <div> <h2>{props.greeting} world form functional component</h2> </div> );}export default FunctionalComponent;
A Functional component is just a plain old JavaScript function. It could also be an arrow function.
In a functional component, we access props from the props argument.
Here's an example of a Class Component:
import React, { Component } from 'react'; class ClassComponent extends Component { render() { return ( <div> <h2 className='class'> {this.props.greeting} world form Class component </h2> </div> ); }}export default CassComponent;
Here we created a simple Class component. To create a Class Component we need to first import the "Component" component from React. Then extends it to create a Class Component.
In a class component, we access props from "this.props".
To render these components, import them inside the app.js file and call them like this:
function App() { return ( <div className='App'> <ClassComponent greeting={"Hello" }/> <FunctionalComponent greeting={"Hello" }/> </div> );}
Conclusion:
That's it for today.
If you liked it don't forget to give it a like. And if you want to add anything to it please leave a comment below.
Thanks for reading.
Original Link: https://dev.to/coderamrin/what-is-a-react-component-api
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To