Scribd
Upload
21 views

Notes

Components are the building blocks of React applications and come in two types: functional and class components. Functional components are JavaScript functions that return JSX while class components extend from React.Component. Both can manage state, with functional components using hooks and class components using lifecycle methods. Components are composed together to build complex UIs and encourage reusability through props.

Uploaded by

Codes with Abhi
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
21 views

Notes

Components are the building blocks of React applications and come in two types: functional and class components. Functional components are JavaScript functions that return JSX while class components extend from React.Component. Both can manage state, with functional components using hooks and class components using lifecycle methods. Components are composed together to build complex UIs and encourage reusability through props.

Uploaded by

Codes with Abhi
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Components are the building blocks of a React application.

They are reusable, self-


contained pieces of code that encapsulate a specific part of a user interface (UI)
and its functionality. React applications are typically composed of multiple
components, which are organized in a tree-like structure. Let's delve into
components in detail:

1. Types of Components:

In React, there are two main types of components: functional components and class
components.

Functional Components: These are JavaScript functions that return JSX. They are
also known as stateless components because they don't have internal state (prior to
React 16.8 and the introduction of hooks).

function FunctionalComponent() {
return <div>This is a functional component</div>;
}
Class Components: These are JavaScript classes that extend the React.Component
class. Class components can manage their own internal state.

class ClassComponent extends React.Component {


render() {
return <div>This is a class component</div>;
}
}
Functional Components with Hooks: With the introduction of hooks in React 16.8,
functional components can now manage state and side effects, making them equivalent
to class components in terms of functionality.
2. Props (Properties):

Props allow you to pass data from a parent component to a child component.
Props are read-only and help make components reusable.
Props are passed as attributes to a component in JSX.

function Greeting(props) {
return <div>Hello, {props.name}</div>;
}

// Usage
<Greeting name="John" />
3. State:

State is used to manage data that can change over time within a component.
State is specific to class components and functional components using hooks.
You can initialize state in the constructor (for class components) or using the
useState hook (for functional components).

class Counter extends React.Component {


constructor(props) {
super(props);
this.state = { count: 0 };
}

render() {
return (
<div>
<p>Count: {this.state.count}</p>
</div>
);
}
}

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
4. Lifecycle Methods (Class Components):

Class components have lifecycle methods like componentDidMount, componentDidUpdate,


and componentWillUnmount.
These methods allow you to perform actions at specific points in the component's
lifecycle, such as data fetching, DOM manipulation, and cleanup.
5. Rendering:

The render method (in class components) or the return statement (in functional
components) specifies what should be rendered to the DOM.
Components can render other components, creating a hierarchy of components.
6. Reusability:

Components encourage reusability, making it easy to maintain and extend your


application.
You can use the same component multiple times with different props.
7. Composition:

React components can be composed together to create complex UIs.


Smaller, more focused components can be combined to build larger, more complex
ones.
8. Controlled vs. Uncontrolled Components:

Controlled components are components that rely entirely on props and state for
their data and behavior.
Uncontrolled components, on the other hand, manage some aspects of their state
internally and are less predictable in behavior.
9. Presentational vs. Container Components:

Presentational components are concerned with how things look and are often
stateless.
Container components are concerned with how things work and manage data and state.
10. Component Lifecycle (Class Components):
- Class components have a series of lifecycle methods that can be used to manage
component behavior, such as componentDidMount (called after the component is
inserted into the DOM), componentDidUpdate (called after a component's props or
state changes), and componentWillUnmount (called before a component is removed from
the DOM).

11. React Fragments:


- React Fragments (<React.Fragment>) allow you to return multiple elements from a
component's render method without adding an extra DOM element to the output.
12. Key Props for Lists:
- When rendering lists of elements, it's important to include a unique key prop for
each item to help React efficiently update the DOM.

Certainly! Here's an example of both a functional component and a class component


for a simple counter in React:

Functional Component (CounterFunctional.js):

import React, { useState } from 'react';

function CounterFunctional() {
const [count, setCount] = useState(0);

const increment = () => {


setCount(count + 1);
};

const decrement = () => {


setCount(count - 1);
};

return (
<div>
<h2>Functional Counter</h2>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}

export default CounterFunctional;


In the functional component, we use the useState hook to manage the state of the
counter.

Class Component (CounterClass.js):

import React, { Component } from 'react';

class CounterClass extends Component {


constructor(props) {
super(props);
this.state = {
count: 0,
};
}

increment = () => {
this.setState({ count: this.state.count + 1 });
};

decrement = () => {
this.setState({ count: this.state.count - 1 });
};

render() {
return (
<div>
<h2>Class Counter</h2>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
</div>
);
}
}

export default CounterClass;


In the class component, we use the constructor to initialize the state and methods
to modify the state. State updates are done using this.setState.

You might also like