In React, components are reusable, independent code blocks (A function or a class) that define the structure and behavior of the UI. They accept inputs (props or properties) and return elements that describe what should appear on the screen.
Key Concepts of React Components:
- Each component handles its own logic and UI rendering.
- Components can be reused throughout the app for consistency.
- Components accept inputs via props and manage dynamic data using state.
- Only the changed component re-renders, not the entire page.
Example:
React
import React from 'react';
// Creating a simple functional component
function Greeting() {
return (
<h1>Hello, welcome to React!</h1>
);
}
export default Greeting;
Output:
Hello, welcome to React!
Explanation:
Greeting
is a React functional component.- It returns JSX:
<h1>Hello, welcome to React!</h1>
. ReactDOM.render
mounts it to the DOM at an element with id root
.
Types of React Components
There are two primary types of React components:
1. Functional Components
Functional components are simpler and preferred for most use cases. They are JavaScript functions that return React elements. With the introduction of React Hooks, functional components can also manage state and lifecycle events.
- Stateless or Stateful: Can manage state using React Hooks.
- Simpler Syntax: Ideal for small and reusable components.
- Performance: Generally faster since they don’t require a 'this' keyword.
JavaScript
function Greet(props) {
return <h1>Hello, {props.name}!</h1>;
}
2. Class Components
Class components are ES6 classes that extend React.Component. They include additional features like state management and lifecycle methods.
JavaScript
class Greet extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
Props in React Components
Props (short for properties) are read-only inputs passed from a parent component to a child component. They enable dynamic data flow and reusability.
- Props are immutable.
- They enable communication between components.
JavaScript
function Greet(props) {
return <h2>Welcome, {props.username}!</h2>;
}
// Usage
<Greet username="Anil" />;
State in React Components
The state is a JavaScript object managed within a component, allowing it to maintain and update its own data over time. Unlike props, state is mutable and controlled entirely by the component.
- State updates trigger re-renders.
- Functional components use the useState hook to manage state.
JavaScript
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() =>
setCount(count + 1)}>Increment</button>
</div>
);
}
Rendering a Component
Rendering a component refers to displaying it on the browser. React components can be rendered using the ReactDOM.render() method or by embedding them inside other components.
- Ensure the component is imported before rendering.
- The ReactDOM.render method is generally used in the root file.
JavaScript
ReactDOM.render(<Greeting name="Pooja" />, document.getElementById('root'));
Components in Components
In React, you can nest components inside other components to build a modular and hierarchical structure.
- Components can be reused multiple times within the same or different components.
- Props can be passed to nested components for dynamic content.
JavaScript
function Header() {
return <h1>Welcome to My Site</h1>;
}
function Footer() {
return <p>© 2024 My Company</p>;
}
function App() {
return (
<div>
<Header />
<p>This is the main content.</p>
<Footer />
</div>
);
}
export default App;
Best Practices for React Components
- Keep Components Small: Each component should do one thing well.
- Use Functional Components: Unless lifecycle methods or error boundaries are required.
- Prop Validation: Use PropTypes to enforce correct prop types.
- State Management: Lift state to the nearest common ancestor when multiple components need access.
React Components and Props
React Components and Props
Components in React and it's Practice