w3resource

Components and Props

For a lay man perspective, components are pieces or bits that makes up a whole. In React, 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.

Function and Class Components

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

function SampleComponent(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.

Class components are defined using ES6 class syntax as shown below:

class SampleComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

The above two components are equivalent from React?s point of view, though there are some extra features in the class component, which will be explored in the next section.

Rendering a Component

Previously, we only encountered and usex React elements that represent DOM tags:

const element = <div />;

However, I would like you to know that React elements can also represent user-defined components:

const element = <SampleComponent name="Vitalis" />;

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

For example, this code renders ?Hello, Vitalis? on the page:

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

const element = <SayHello name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Note: Always start component names with a capital letter.

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

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.

For example, we can create an App component that renders Welcome many times:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Extracting Components

In React, it is recommended to split components into their smallest form. Hence never be afraid to split components into smaller components.

For example, consider this Comment component:

function Comment(props) {
  return (
    <div className="Comment">
        <div className="UserInfo"  >
          <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        /  >
          <div className="UserInfo-name"  >
          {props.author.name}
          </div  >
        </div  >
        <div className="Comment-text"  >
        {props.text}
        </div  >
        <div className="Comment-date"  >
        {formatDate(props.date)}
        </div  >
      </div  >
  );
}

This component above accepts author (an object), text (a string), and date (a date) as props, and describes a comment on a social media website.

This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it.

To make this component flexible, Let?s extract a few components from it.

First, we will extract Avatar:

function Avatar(props) {
  return (
      <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

The Avatar doesn't need to know that it is being rendered inside a Comment. This is why we have given its prop a more generic name: user rather than author.

We can now simplify Comment a tiny bit:

function Comment(props) {
  return (
      <div className="Comment"  >
        <div className="UserInfo"  >
          <Avatar user={props.author} /  >
          <div className="UserInfo-name"  >
          {props.author.name}
          </div  >
        </div  >
        <div className="Comment-text"  >
        {props.text}
        </div  >
        <div className="Comment-date"  >
        {formatDate(props.date)}
        </div  >
      </div  >
  );
}

Next, we will extract a UserInfo component that renders an Avatar next to the user's name:

function UserInfo(props) {
  return (
      <div className="UserInfo"  >
        <Avatar user={props.user} /  >
        <div className="UserInfo-name"  >
        {props.user.name}
        </div  >
      </div  >
  );
}

This lets us simplify Comment even further:

function Comment(props) {
  return (
      <div className="Comment"  >
        <UserInfo user={props.author} /  >
        <div className="Comment-text"  >
        {props.text}
        </div  >
        <div className="Comment-date"  >
        {formatDate(props.date)}
        </div  >
      </div  >
  );
}

Extracting components might seem like grunt work at first, but 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 a reusable component.

Props are Read-Only

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.

In contrast, this function is impure because it changes its own input:

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

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 the next tutorial, 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.



Inviting useful, relevant, well-written and unique guest posts