Class 27 Forms and Props - Alwynblake/seattle-javascript-401n12 GitHub Wiki

• 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.

[url] (https://reactjs.org/docs/components-and-props.html)

Types of Components:

Function and Class Components:

• function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.

Rendering a Component:

• When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”.

Composing Components:

• Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components. ==============================================================

• Forms and Inputs - React form elements maintain internal state. Think of React inputs as stateful child components. This means that we must manage the state of inputs through our own stateful component and one way data binding. The creation of a parent component (which we'll refer to as form-container), manages the state for all child components of the form and passes any necessary state down into it's inputs through the use of props. Each input has an onChange event that we can handle and use to update our form-container's state each time the user interacts with an input.