Components & Props

Question 1

What are components?

Answer 1

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.

Question 2

Functional Components

Answer 2

The simplest way to define a component is to write a JavaScript function.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

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

Question 3

Rendering a component

Answer 3

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

Let’s recap what happens:

1. We call ReactDOM.render() with the element.
2. React calls the Welcome component with {name: ‘Sara’} as the props.
3. Our Welcome component returns a <h1>Hello, Sara</h1> element as the result.
4. React DOM efficiently updates the DOM to match <h1>Hello, Sara</h1>.

Question 4

What should react components always start with?

Answer 4

Always start component names with a capital letter. React treats components starting with lowercase letters as DOM tags. For example, <div></div> represents an HTML div tag, but represents a component and requires Welcome to be in scope.

Question 5

Composing Components

Answer 5

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.

Question 6

App component

Answer 6

Typically, new React apps have a single App component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like Button and gradually work your way to the top of the view hierarchy.

Question 7

Extracting components

Answer 7

Don’t be afraid to split components into smaller components. It can be tricky to change a component if it has a lot of nesting of JSX and it can be hard to reuse individual parts of it.

Question 8

How should you name props?

Answer 8

It’s recommended to name props from the component’s own pov rather than the context in which it is being used. Having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be extracted to a separate component.

Question 9

Props are read-only

Answer 9

Whether you declare a component as a function or a class, it must never modify its own props. Consider this sum function:

function sum(a, b) {
  return a + b;
}

Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs.

Question 10

What is the single strict rule for React?

Answer 10

All React components must act like pure functions with respect to their props.

Question 11

Props.children

Answer 11

Some components don’t know their children ahead of time. This is especially common for components like Sidebar or Dialog that represent generic “boxes”.
We recommend that such components use the special children prop to pass children elements directly into their output:

function FancyBorder(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

This lets other components pass arbitrary children to them by nesting the JSX:

function WelcomeDialog() {
  return (

      <h1>
        Welcome
      </h1>
      <p>
        Thank you for visiting our spacecraft!
      </p>

);
}

Anything inside the JSX tag gets passed into the FancyBorder component as a children prop. Since FancyBorder renders {props.children} inside a <div>, the passed elements appear in the final output.
</div>