Download to read offline
![Props and State
- Props: Passing data to components
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
- State: Managing component data
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/reactjsfirstpractical-250210055440-051fceb1/75/ReactJS_First_Practical-for-the-freshers-pptx-6-2048.jpg)
More Related Content
Similar to ReactJS_First_Practical for the freshers.pptx
ReactJS_First_Practical for the freshers.pptx
- 1. Introduction to React.js -First Practical Session Welcome to your first hands-on session!
- 2. What is React.js? - JavaScript library for building UIs - Developed by Facebook (Meta) - Component-based architecture - Used for web & mobile applications
- 3. Setting Up React.js - Install Node.js and npm - Install VS Code or preferred IDE - Use create-react-app: npx create-react-app my-app cd my-app npm start
- 4. Understanding JSX -JavaScript XML (JSX) syntax - Combines HTML and JavaScript - Example: const element = <h1>Hello, React!</h1>;
- 5. Creating Your FirstComponent - Functional component example: function Welcome() { return <h1>Welcome to React!</h1>; } export default Welcome;
- 6. Props and State - Props: Passing data to components function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } - State: Managing component data 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> ); }
- 7. Hands-on Practice -Create a simple React component - Use props to pass data - Implement state with hooks
- 8. Q&A and NextSteps - Questions and clarifications - Next session topics (Event Handling, Lifecycle Methods, etc.) - Practice assignments