React

An important lesson about components and props in React

props

The components concepts in React is based out of Single Responsibility Principle. https://en.wikipedia.org/wiki/Single_responsibility_principle

In a nutshell what it means is every class, function or module should have responsibility over a single part of functionality of a software. Let me explain how this seemingly simple principle works wonders in software development. Suppose your software product has 100 functionalities/features. Now take two scenarios.

Scenario 1

These 100 functionalities are just implemented as part of 5 classes. Each class represents 20 functionalities. Now an end user of your software is not happy with one of the functionalities and wants a chance. In order to change that, you will make change in one class, but now you have to test 19 other functionalities to ensure that none of those 19 functionalities are broken due to your change in that class.

Scenario 2

In this scenario all 100 functionalities are implemented as part of 100 classes. So each class represents 1 functionality. Now if your end user wants change in a particular functionality, you can go ahead and just change that 1 class feeling confident that all other functionality will still work as expected. This is in a nutshell single responsibility principle.

A very simple way to write a component is to create a javascript function.

function House(props) {
    return (<p>Beautiful House on Malibu Beach belongs to {props.name}</p>);
}

The same component can be written in an ES6 class.

class House extends React.Component {
   render() {
      return (<p>Beautiful House on Malibu Beach belongs to {this.props.name}</p>);
   }
}

How to render a component

React elements can represent dom tags. They can also represent user defined components.

//element representing dom tag
const element = <h1>This is a nice element</h1>;
//element representing a component
const element = <House name="Charlie" />;
ReactDOM.render(element,document.getElementById('root'));

This is what is going on here.

  • We call ReactDOM.render() with the <House name="Charlie" /> element.
  • React calls the House component with {name: 'Charlie'} as the props.
  • Our House component returns a <p>Beautiful House on Malibu Beach belongs to Charlie</p> element as the result.
    React DOM efficiently updates the DOM to match <p> Beautiful House on Malibu Beach belongs to Charlie</p>.

You can see everything in action live here.

https://codepen.io/anilpank/pen/jONQRWj

We need to always start component names in capital letter. React treats components starting with small letter as dom elements. We will talk about it later in a detailed blog post.

A component can have other components which can then have other components and so on.

function Greeting(props) {
  return <h1>Good morning, {props.name}</h1>;
}
 
function App() {
  return (
    <div>
      <Greeting name="Sara" />
      <Greeting name="Cahal" />
      <Greeting name="Edite" />
    </div>
  );
}

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

Pure vs impure functions

A pure function is what does not modify function arguments.

// This is a pure function. This does not modify arguments a and b.
function multiply(a, b) {
  return a*b;
}

An impure function is what modifies any of the function arguments.

// This is an impure function as it changes argument account.
function withdrawMoney (account, amount) {
    if (amount>account.balance) {
        throw 'Low balance, not enough money in your account';
    }
    else {
         account.balance = account.balance - amount;
    }     
}

So why did I introduce it here. It is because all React components must act like pure functions as far as props are concerned. Props can never be modified.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

About anil

Hi, I'm Anil Verma. I have a passion for teaching and developing awesome front end apps. I was involved in development of post processor for Nastran(built by NASA). More recently I have been building supply chain apps at E2open.
View all posts by anil →

Leave a Reply

Your email address will not be published. Required fields are marked *