1. We will explain what React components are.
2. We will also explain what props are.
3. We will show that React composes components to build UIs.
4. We will state the rule that a component must never modify its own props.

Components

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. We will start with the following:

import React from "react";
import ReactDOM from "react-dom";

const element = (
  <div>
    <h1>Hello, World!</h1>
    <h2>It is {new Date().toLocaleTimeString()}.</h2>
  </div>
);

ReactDOM.render(element, document.getElementById("root"));

Conceptually, components are like JavaScript functions. They accept arbitrary inputs, called props, and return React elements describing what should appear on the screen. The simplest way to define a component is to write a JavaScript function, such as the following Welcome function:

import React from "react";
import ReactDOM from "react-dom";

function Welcome(props) {  return <h1>Hello, {props.name}</h1>;}
const element = (
  <div>
    <h1>Hello, World!</h1>
    <h2>It is {new Date().toLocaleTimeString()}.</h2>
  </div>
);

ReactDOM.render(element, document.getElementById("root"));

Now, we can create the element in JSX by using a Welcome tag. We can pass a name to the name prop. For example, we can pass in the name “John”.

import React from "react";
import ReactDOM from "react-dom";

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

const element = <Welcome name="John" />;
ReactDOM.render(element, document.getElementById("root"));

The page in Google Chrome now shows “Hello, John”.

Props

The Welcome function is a valid React component because it accepts a single props object argument, and returns a React element.

Note also that, previously, we only encountered React elements that represent DOM tags, such as div, h1, or img. However, elements can also represent user-defined components, as our Welcome component shows. 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.

Note also that we always start user-defined components with a capital letter. For example, our Welcome component starts with a capital “W”. When we represent the component with the Welcome tag, we need to have the Welcome function in scope.

Composing Components

Now, we will talk about “composing components”, which is another reason React is so useful. Components can refer to other components in their output, which means that we can join and layer components like building blocks. This lets us use the same component abstraction for any level of detail. Whether we are dealing with a button, a form, a dialog, or a screen – in React apps, all of these are commonly expressed as components.

Let’s define an App function component, which will refer to the Welcome component in its output. Now, we can assign the App tag to the DOM-rendered element.

import React from "react";
import ReactDOM from "react-dom";

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

function App() {  return (    <div>      <Welcome name="John" />    </div>  );}
const element = <App />;
ReactDOM.render(element, document.getElementById("root"));

The page still shows “Hello, John”.

Now, we can have the App component output Welcome many times, with different names.

import React from "react";
import ReactDOM from "react-dom";

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

function App() {
  return (
    <div>
      <Welcome name="John" />
      <Welcome name="Sara" />      <Welcome name="Anne" />    </div>
  );
}

const element = <App />;

ReactDOM.render(element, document.getElementById("root"));

Typically, new React apps have a single App component at the very top. Generally, we add the top-level App component tag directly as the first argument to the ReactDOM.render() method call.

import React from "react";
import ReactDOM from "react-dom";

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

function App() {
  return (
    <div>
      <Welcome name="John" />
      <Welcome name="Sara" />
      <Welcome name="Anne" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Components Must Never Modify Props

A React component must never modify its own props. For example, consider this function, that sums up two numbers.

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

This function is called “pure” because it does not attempt to change its inputs. A pure function always returns the same result for the same inputs.

In contrast, when a function changes its own input, it is “impure”. For example...

// Impure function
function withdraw(account, amount) {
  account.total -= amount;
  return account;
}

The withdraw function is impure because it changes its account input. It will return different results each time it is called.

React is pretty flexible but it has a single strict rule: “All React components must act like pure functions with respect to their props.”

Of course, application UIs are dynamic and change over time. In a later video, we will introduce a new concept of “state”. State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.

Summary

We explained what React components are. We also explained what props are. We showed that React composes components to build UIs. And, we stated the rule that a component must never modify its own props.

Next Up…

In the next video, we will split a large component into smaller components.