![State in Components
- State allows components to manage dynamic data
Example (useState Hook):
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}](https://image.slidesharecdn.com/reactjscomponentspresentation-250210055441-c1676fe6/85/ReactJS_Components_Presentation-for-freshers-7-320.jpg)
![Lifecycle Hooks (Functional
Components)
- useEffect() replaces lifecycle methods
Example:
import { useEffect } from 'react';
function Example() {
useEffect(() => {
console.log("Component Mounted!");
}, []);
return <p>Check the console!</p>;
}](https://image.slidesharecdn.com/reactjscomponentspresentation-250210055441-c1676fe6/85/ReactJS_Components_Presentation-for-freshers-9-320.jpg)
ReactJS_Components_Presentation for freshers
- 1. Introduction to React.js Components Understanding Functional & Class Components
- 2. What is React.js? - A JavaScript library for building user interfaces - Component-based architecture - Developed by Facebook
- 3. What is a Component? - Reusable, independent pieces of UI - Two types: - Functional Components (Modern & Preferred) - Class Components (Legacy & Less Common)
- 4. Functional Components (Introduction) - Simple JavaScript functions - Return JSX (UI structure) - Use React Hooks (useState, useEffect) for managing state & lifecycle Example: function Welcome() { return <h1>Hello, React!</h1>; }
- 5. Class Components (Introduction) - ES6 JavaScript classes that extend React.Component - Use lifecycle methods Example: class Welcome extends React.Component { render() { return <h1>Hello, React!</h1>; } }
- 6. Props in Components - Props allow data to be passed between components Example: function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } Usage: <Greeting name="Vaibhav" />
- 7. State in Components - State allows components to manage dynamic data Example (useState Hook): import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }
- 8. Lifecycle Methods (Class Components) - componentDidMount(): Runs after component mounts - componentDidUpdate(): Runs after state/props update - componentWillUnmount(): Runs before component unmounts
- 9. Lifecycle Hooks (Functional Components) - useEffect() replaces lifecycle methods Example: import { useEffect } from 'react'; function Example() { useEffect(() => { console.log("Component Mounted!"); }, []); return <p>Check the console!</p>; }
- 10. Component Communication - Parent to Child: Pass props - Child to Parent: Use callback functions - Sibling Communication: Use a shared state
- 11. Controlled vs Uncontrolled Components - Controlled Components: State-driven form elements - Uncontrolled Components: Use ref instead of state
- 12. Higher-Order Components (HOCs) - Functions that take a component and return a new enhanced component Example: withLogging(Component)
- 13. React Fragments & Keys - <>...</> avoids extra divs in the DOM - Keys help React identify list elements
- 14. Summary & Q&A - Recap main points - Encourage questions