Component Composition

Review, Research, and Discussion

• Can a parent component access the state of a child component?
  • Assign Refs for the child component in the parent component, then using Refs can access the child’s state.
• What can be passed along in a prop variable?
  • Any information, function, JavaScript that needs to be passed.
• How can a child component “know” the state of another component?
• pass the component’s state to it’s child components as props.

Vocabulary Terms

component props :

• a keyword in React stands for properties, can be any information that needs to be passed to another component.

component state :

• The state is an instance of React Component Class can be defined as an object of a set of observable properties that control the behavior of the component.

application state :

• is interface between data and the representation of this data with UI elements on the front-end. State is able to keep the data of different components in sync because each state update will rerender all relevant components.

react basics recap

• The Component Lifecycle : it details the life of a component, components are born, do some things , and then they die.

• A component can only be in one stage at a time. It starts with mounting and moves onto updating. It stays updating perpetually until it gets removed from the virtual DOM. Then it goes into the unmounting phase and gets removed from the DOM.

• Higher-Order Components: is a function that takes a component and returns a new component.

• Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting.
• You can think of React lifecycle methods as the series of events that happen from the birth of a React component to its death.
• setState() in only these React lifecycle methods: componentDidMount , componentDidUpdate and componentWillReceiveProps .

Components and Props

• Components let you split the UI into independent, reusable pieces, and think about each piece in isolation
• Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
• Components can refer to other components in their output
• Whether you declare a component as a function or a class, it must never modify its own props
• All React components must act like pure functions (do not attempt to change their inputs and always return the same result for the same inputs) with respect to their props

props.children

• we use props.children on components that represent ‘generic boxes’ and that ‘don’t know their children ahead of time’.

Component Composition

• Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way.
• Pass a function when you can to update state multiple times.

---

Home