React : Function and Class Components / Rendering a Component / Composing Components / Extracting Components / Props are Read-Only

Function and Class Components

The simplest way to define component is to write a JS 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 JS function.

You can also use an ES6 to define a component :

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

The above two components are equivalent from React’s point of view.

 

Rendering a Component

Previously, we only encountered React element that represent DOM tags :

const element = <div />;

However, elements can also represent user-defined components :

const element = <Welcome name="Sara" />;

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

 

For example, this code renders “Hello, Sara” on the page :

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

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

Let’s recap what happens in this example :

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

Composing Components

Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail.

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

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

Extracting Components

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 can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let’s extract a few components from it.

 

First: Extract Avatar :

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

Next, we can extract the UserInfo component:

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

Finally, we can update the Comment component to use these extracted components:

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>
  );
}

By extracting the Avatar and UserInfo components, we make the code more modular and reusable. Now, we can reuse the Avatar and UserInfo components in other parts of our application without repeating the same code. It also simplifies the structure of the Comment component, making it easier to read and maintain.

 

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 change 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 section, 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.

 

 

 

React : Function and Class Components / Rendering a Component / Composing Components / Extracting Components / Props are Read-Only