A React walk-through of props and components

The aim here is to try and explain components and props in a simplified way, I hope it helps.

Obviously, we must start at “Hello, World!”

So here is the code

HTML

<div id=”app”></div>

React JS

class App extends React.Component {

 render() {

   return (

       <h1>Hello, World!</h1>

   );

 }

}

React.render(<App />, document.getElementById(‘app’));

https://codepen.io/DrHWebDev/pen/OaQLXL sandbox version.

Here, the return statement returns JSX – everything inside the () – to the component named App. App then gets called in the HTML file and rendered out as heading 1 – Hello, World!

Although the code in the brackets looks like HTML, it is in fact JSX. JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML so it is easier for us to work with, but it is NOT HTML! JSX can be stored in JavaScript variables, objects, functions, arrays etc. Also, JavaScript can be used inside JSX and then stored inside JavaScript!

So then, React uses JSX, but also the JavaScript looks different. That is because React utilises JavaScript ES6 and above. You can write react without JSX and ES6+, but that kind of defeats the purpose of using it. Here is a sandbox example of ES5 and ES6 versions of the same code https://codepen.io/DrHWebDev/pen/yxLWMb

Components

Components is where react really shines. Think of several building blocks being used to make a wall but without the cement. So, each block can be changed independently of the other blocks around it. Each block/component can be a function, API, media, whatever. Think of Facebook – the news feed updates regardless of what is happening around it. You can also call that feed into another react app to display just that feed on your blog – as an example. So, all these blocks are interchangeable. Sometimes, we want to use a component from another library, like an Airbnb date picker. That is another beauty of react. Because the react library is being used by big tech companies, they will build and share their components for us to use and integrate.

At first, this seems a chore – installing via npm or yarn, several dependencies and then importing them into your app. It is when you realise that these are just parts of the building blocks to create your app, that it becomes less confusing. React itself, is just one component that can-do certain things, if you want to add another function, you must import it into your app.

It is also worth noting, that in the same way you can import third party components, you also need to build your components to enable reusability. Design your component so it can be stand alone and without props being passed down through that negate its reusability – more on props and state later. But just as you would import a third-party component, you would not expect it to rely on data being passed to it from another external component to work. In essence, you would want to set the variable name in the component, but you want to set the value in your main app component to ensure reusability.

Here is an example –

const Header = (props) => {

 return (

   <React.Fragment>

     <h1>{props.title}</h1>

     {props.subtitle && <h2>{props.subtitle}</h2>}

   </React.Fragment>

 )

}

Header.defaultProps = {

 title: ‘Default title’

}

ReactDOM.render(<Header title=”A new title” subtitle=”An actual subtitle”/>, document.getElementById(‘app’));

https://codepen.io/DrHWebDev/pen/jemqxx sandbox version.

In a “real world” application, the values of title and subtitle would be assigned in your main app.js file and imported. However, for ease of an example, the values have been assigned in the final argument. <Header title=”A new title” subtitle=”An actual subtitle”/>.

In the main Header const, we call props (the properties of the key:value pairs declared in the render call) and set them to the variables in the JSX. Props can only pass ONEWAY!

So, in this const Header, we set up the variables and set them to be the value of the prop(erty) passed in. So, the component “Header” has no values actually declared in the object. Instead, they are passed in. Therefore, the component is reusable because if we need to render a title and subtitle in any of our other apps, we import this Header and pass the props into it.

So, components are like building blocks, they are also similar to tables in a relational database. They want to be as small as their common denominator. For instance, if we wanted to create a function that would display user data we may want –  name and picture. Now, not all users may have a picture, so to avoid null data, we would split the component into three parts – 1. the main component that will render the data and assign the props, 2. the user name component and 3. the user image component will set up the variables.

Here is the main code before we split it down.

class Comment extends Component {

 render() {

   return (

   <div className=”Comment”>

       <div className=”UserInfo”>

         <img className=”Avatar”

           src={this.props.user.avatarUrl}

           alt={this.props.user.name}

           />

         <div className=”UserInfo-name”>

           {this.props.user.name}

         </div>

       </div>

       <div className=”Comment-text”>

         {this.props.text}

       </div>

       <div className=”Comment-date”>

         {formatDate(this.props.date)}

       </div>

       </div>

       );

 }

}

Here is the code as 3 reusable components instead

Component 1

class Comment extends Component {

 render() {

   return (

   <div className=”Comment”>

       <UserInfo user={this.props.user} />

       <div className=”Comment-text”>

         {this.props.text}

       </div>

       <div className=”Comment-date”>

         {formatDate(this.props.date)}

       </div>

       </div>

       );

 }

}

Component 2

function UserInfo(props) {

 return (

     <div className=”UserInfo”>

         <Avatar user={props.user} />

         <div className=”UserInfo-name”>

           {props.user.name}

         </div>

       </div>

    );

}

Component 3

function Avatar(props) {

 return (

     <img className=”Avatar”

         src={props.user.avatarUrl}

         alt={props.user.name}

      />

   );

}

https://codepen.io/DrHWebDev/pen/yRmxGe Sandbox version

Granted, the Avatar component is very small, but it means if an image is updated, only that component needs updating, and it can also be re-used elsewhere if needed. You could also use conditional rendering so that an image would only be rendered if an image was present etc. This is where the similarity to relational databases is also apparent. Instead of a primary key though, we have props!

If we look at the code above, we can see that there are two different types of functions be declared here – the function and the ES6 class components. The class-based component has additional functionality, like state, but we will explore this later.

As we have noticed in the code examples above, we can set the value of a variable by passing in a prop from inside, or outside the component. But what is props? Props are read only – they are immutable! Once set, that is that and it can only travel down a hierarchy. Props is a value that is passed into the variable from elsewhere. If we revisit the Header code snippet and convert the const to a function, we get this –

But what is going on here?

We set up the function and name it Header and call in props straight away. As this function is self-contained, we can see the props being set in the render call at the bottom. In a real app, this would be in perhaps the app.js file where we would place the Header and set the value. The value is then passed down to the child – in this case our Header function.

So, in the reactDOM line we see Header having a title of “A new title” and a subtitle of “An actual subtitled” being assigned to it as two key:value pairs. So, the values are set outside the function then passed in as props. We then call in the props as a JavaScript object inside our JSX. Basically, the prop is passed in as 2 key:value pairs and then we select the one called title and its value “A new title”. Therefore, this functional component is totally reusable because the value is always passed into the function and not set or changed within it. This would then be passed back to the main app.js to be placed and rendered in a real version of the app. Therefore, in a “real app” we would

·        call the function or component so we can set the key:value pair (assign a value to the variable) in the parent function

·        in the function – set up the variable and any siblings and call in the props set in the parent function to assign the values to the appropriate variable

·        then we place that function (with its new props) into the part of the main app that will render it to the virtualDOM.

This was one of the hardest parts of props for me to understand. I would ask myself – “Why do we use the variable in, like, 3 different places and call it, pass it, assign it etc all over the place?” Well I hope the above has gone some way to answer that. 

About the Author, – Dr Richard Haddlesey is the founder and Webmaster of English Medieval Architecture in which he gained a Ph.D. in 2010 and holds Qualified Teacher Status relating to I.C.T. and Computer Science. Richard is a professional Web Developer and Digital Archaeologist and holds several degrees relating to this. He is passionate about the dissemination of research and advancement of digital education and Continued Professional Development #CPD.

Please follow and like us:

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.