React Components and Props

Components

• Building blocks of a React application
• Reusable pieces of code that represent a part of the UI
• Can be either functional or class components
  • Functional components: pure functions that take in props and return JSX
  • Class components: classes that extend the React.Component class

Props

• Short for "properties"
• Immutable values passed from a parent component to a child component
• Used to customize the behavior of a component
• Can be any type of data (string, number, object, etc.)
• Passed as an object to the component, with each key-value pair being a prop
• Example: ``

State

• An object that stores data that can change within a component
• Used to store data that is specific to a component and can change over time
• Initialized in the component's constructor or with a state hook (useState)
• Can be updated using the setState method or the useState hook
• When state changes, the component is re-rendered with the new state

Event Handling

• A way to respond to user interactions (e.g. clicks, hover, keyboard input)
• In React, event handling is done using event handlers
• Event handlers are functions that are called when an event occurs
• Event handlers are passed as props to components
• Example: console.log("Button clicked!")}>Click me!
• Synthetic events: React's way of handling events, which provides a consistent interface across different browsers

React Components

• Building blocks of a React application, reusable pieces of code that represent a part of the UI
• Can be either functional or class components
• Functional components: pure functions that take in props and return JSX
• Class components: classes that extend the React.Component class

Props

• Short for "properties", immutable values passed from a parent component to a child component
• Used to customize the behavior of a component
• Can be any type of data (string, number, object, etc.)
• Passed as an object to the component, with each key-value pair being a prop

State

• An object that stores data that can change within a component
• Used to store data that is specific to a component and can change over time
• Initialized in the component's constructor or with a state hook (useState)
• Can be updated using the setState method or the useState hook
• When state changes, the component is re-rendered with the new state

Event Handling

• A way to respond to user interactions (e.g. clicks, hover, keyboard input)
• In React, event handling is done using event handlers
• Event handlers are functions that are called when an event occurs
• Event handlers are passed as props to components
• Synthetic events: React's way of handling events, which provides a consistent interface across different browsers