React JS Components
Components are the fundamental building blocks of React applications. They allow you to break down the UI into reusable and manageable pieces. Each component is a JavaScript function or class that returns a React element, which describes how the UI should appear.
Types of Components
Function Components:
- Definition: Function components are JavaScript functions that return JSX. They are simpler and often used for components that do not require lifecycle methods or complex state management.
- Usage: They can accept props (properties) and return JSX.
- Example:
function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } // Usage <Greeting name="Sara" />
Class Components:
- Definition: Class components are ES6 classes that extend
React.Component
and must have arender()
method that returns JSX. They can have state and lifecycle methods. - Usage: They are typically used for more complex components that need to manage state or handle side effects.
- Example:
class Greeting extends React.Component { render() { return <h1>Hello, {this.props.name}!</h1>; } } // Usage <Greeting name="Sara" />
- Definition: Class components are ES6 classes that extend
Component Structure
Props:
- Definition: Props (short for properties) are read-only inputs passed to components. They allow components to receive data from their parent components.
- Usage: Props are passed to components via attributes and accessed using
props
in function components orthis.props
in class components. - Example:
function Welcome(props) { return <h1>Welcome, {props.username}!</h1>; } // Usage <Welcome username="John" />
State:
- Definition: State is a mutable data structure used to manage data within a component. It allows components to keep track of information that can change over time.
- Usage: In function components, state is managed using the
useState
hook. In class components, state is managed using thethis.state
object andthis.setState()
method. - Function Component Example:
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> ); }
- Class Component Example:
class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={this.increment}>Increment</button> </div> ); } }
Lifecycle Methods:
- Definition: Lifecycle methods are special methods in class components that allow you to hook into different stages of a component’s lifecycle, such as mounting, updating, and unmounting.
- Usage: Examples include
componentDidMount
,componentDidUpdate
, andcomponentWillUnmount
. - Function Components: Similar behavior can be achieved using the
useEffect
hook. - Example:
import React, { useEffect } from 'react'; function Example() { useEffect(() => { // Side effect code here console.log('Component mounted or updated'); return () => { // Cleanup code here console.log('Component unmounted'); }; }, []); // Empty dependency array means this effect runs only on mount and unmount return <div>Check the console for lifecycle messages</div>; }
Component Composition:
- Definition: React components can be composed together to build complex UIs from simple components.
- Usage: You can nest components within each other, pass data down as props, and manage state and side effects as needed.
- Example:
function Header() { return <header><h1>My App</h1></header>; } function Footer() { return <footer><p>© 2024 My App</p></footer>; } function App() { return ( <div> <Header /> <main> <h2>Welcome to My App</h2> </main> <Footer /> </div> ); }
Summary
Components in React are the core building blocks of an application. They can be defined as function components or class components, with each serving different needs. Components use props to receive data, manage their own state to track changes, and can utilize lifecycle methods or hooks to handle side effects and manage their lifecycle. Component composition allows for creating complex UIs by combining simpler components, making React a powerful and flexible library for building interactive user interfaces.