React Components
- In the past, developers had to write thousands of lines of code to create a single-page application using the traditional DOM structure, which made making changes a challenging task. If any errors were found, it required manually searching through the entire application to update the code. The component-based approach was introduced to address this issue by dividing the application into smaller, logical units of code known as components.
- A component is a core building block of a React application, simplifying the process of creating user interfaces. Each component operates independently within the same environment and combines with others into a parent component, which ultimately forms the final user interface of the application.
- Each React component has its own structure, methods, and APIs, making them reusable as needed. To better understand this, think of the entire UI as a tree: the root represents the starting component, while the other components act as branches that further divide into sub-branches.
In ReactJS, there are primarily two types of components:
1.Functional Components
2.Class Components
Functional Components
In React, function components are used to create components that only have a render method and do not manage their own state. They are essentially JavaScript functions that may receive data as parameters. These functions take props (properties) as input and return the elements to be rendered. An example of a valid functional component is shown below.
function WelcomeMessage(props) {
return <h1>Welcome to the , {props.name}</h1>;
}
The functional component, also known as a stateless component, does not hold or manage state. This is illustrated in the example below.
Example
import React, { Component } from 'react';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Welcome to our Website</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>About Us</h2>
<p>We provide high-quality tutorials and resources for learning web development.</p>
</div>
);
}
}
export default App;
Output
Welcome to our Website
About Us
We provide high-quality tutorials and resources for learning web development.
Class Components
Class components are more complex compared to functional components. They require extending from `React.Component` and implementing a `render` function that returns a React element. Additionally, you can pass data between class components. To create a class component, define a class that extends `Component` and includes a `render` method. Here is an example of a valid class component.
class MyComponent extends React.Component {
render() {
return (
<div>This is main component.</div>
);
}
}
Class components are often referred to as stateful components because they can manage and hold local state. This is illustrated in the example below.
Example
import React, { Component } from 'react';
class App extends Component {
constructor() {
super();
this.state = {
books: [
{
title: "To Kill a Mockingbird",
author: "Harper Lee"
},
{
title: "1984",
author: "George Orwell"
},
{
title: "The Great Gatsby",
author: "F. Scott Fitzgerald"
}
]
};
}
render() {
return (
<div>
<LibraryTitle/>
<ul>
{this.state.books.map((book, index) => <BookList key={index} book={book} />)}
</ul>
</div>
);
}
}
class LibraryTitle extends Component {
render() {
return (
<div>
<h1>Book Library</h1>
</div>
);
}
}
class BookList extends Component {
render() {
const { title, author } = this.props.book;
return (
<li>
<strong>{title}</strong> by {author}
</li>
);
}
}
export default App;
Output
Book Library
- The Great Gatsby by F. Scott Fitzgerald
Explanation:
App Component:
State: Maintains a books array with each book containing title and author.
Render Method: Maps over the books array and passes each book object to the BookList component. Each list item is assigned a unique key based on its index to help React identify which items have changed.
LibraryTitle Component:
Render Method: Displays a heading for the book library.
BookList Component:
Render Method: Receives book as a prop and displays the book's title and author in a list item.
