React Components and Props Discussion

reactprops.md

1. What is a React component, and how does it differ from a traditional JavaScript function or class?
2. How would you describe the role of props in React? Why might they be crucial for component reusability?
3. How do state and props differ in a React component? Can you think of scenarios where you'd use one over the other?
4. If components are meant to be reusable, how can props help in achieving this goal? Can you think of real-world analogies or examples?
5. In a typical React application, components are often nested within other components. How do props facilitate data flow in such hierarchies? What challenges might arise from this?
6. React documentation emphasizes that props should be "immutable". What does this mean, and why might it be an important principle in React development?

room num 15
Sanad, Ahmad, Mo’mena

Q1:
React components:  independent and reusable bits of code, it’s return HTML not like the other traditional functions.

Q2:
pass data from the parent component to the child’s components, yes it should be used to make the component customizable and easy to maintain.

Q3:
Props are used to pass data between components, while the state is used to manage the state of a component.
Props should be used to make the component customizable, while the state should be used to manage the component’s internal state.
if we change the background colour automatically when the user doesn’t click the button (state)

Q4:
if we want to build a house using React components, First, we would need to define some components that represent different parts of the house, such as walls, windows, doors, and roofs.
These components are all function components that take some props that define their dimensions and appearance.
and in this case, we can reuse the components to build other houses using the same prop.

Q5:
state is passed from the parent component to the children components via props, allowing the child components to access/manipulate that state.

Q6:
immutable => unchangeable
state that is managed by the component owner

1- React is a block of code that is reusable - the differ between (function or class) and react component is that the component can be maintained easily and work with each component as a team,
React is primarily responsible for Rendering UI elements in an efficient way.

2- is to pass the data from one component to another, we can use a component more than once by passing different props from parent to child and not vice versa.

3- State: to manage and store mutable data within a component, props: when we want to pass that variable,
Scenario: when I click the button it will update the value by passing the props to another component, when I click it again it will change the state of the component to another value .

4- Allowing you to customize and configure a component's behavior, appearance, and content based on the data passed from the parent component. --- Example: when playing the piano, you have a different set of keys that can produce different notes when played, the same as handling different input values with props.

5- parent to child data flow allows data to pass components to the child which ensures that data from parents is used and accessible, it helps in callback function challenges: the nesting would cause a layer of components to drill through which makes it harder to have a clean code that could be maintained,

6- it means that the values passed to a component via props should not be changed or mutated within that component. Instead, props should be treated as read-only values. its useful because the data flow would be more predictable, would make it more reusable, and optimize performance.