React Components:
A ReactJS application is known to be a multi-component application. Each component of the ReactJS application is reusable and is responsible for outputting a small, reusable piece of HTML code. Being the heart of all React applications, its components can also be nested. This nesting with other components allows the creation of complex applications built of simple building blocks. There are mainly two types of components in React JS.
Functional Components:
The functional component in React is JavaScript functions that only contain a render method. They are a way to write components that don’t have their own state and thus they are also known as a stateless component. They may or may not receive data as parameters.
Example:
import React, { Component } from 'react';
class App extends React.Component {
render() {
return (
Hello
);
}
}
class Second extends React.Component {
render() {
return (
Have a Great day!
Believe in Yourself.
);
}
}
export default App;
Output:
Hello Have a Great day! Believe in Yourself.
Class Components:
The functional component in React is JavaScript functions that are more complex in nature. They are a way to write components that have their own state and thus they are also known as a stateful component. They require the user to extend from React Component and also to create a render function which returns a React element.
Example:
import React, { Component } from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[ {
"name":"Dhoni"
},
{
"name":"Kohli"
},
{
"name":"Pandya"
} ]
}
}
render() {
return (
{this.state.data.map((item) =>
)}
);
}
}
class PLAYERname extends React.Component {
render() {
return (
Player Names
);
}
}
class List extends React.Component {
render() {
return (
- {this.props.data.name}
Output:
Player Names
● Dhoni
● Kohli
● Pandya