Understanding React Components

Chapter 2 from the book; Vumbula React — Co-authored by Edmond Atto

John Kagga
May 14, 2018 · 13 min read
Cover Image by Edmond Atto

What are components?

Your first component

const Greeting = () => <h1>Hello World today!</h1>;

This is a functional component (called Greeting) written using ES6’s arrow function syntax that takes no props and returns an H1 tag with the text “Hello World today!”

In Chapter 1, you learnt how to set up a React App using the create-react-app tool. We’ll take a step back momentarily and use a basic setup to learn the basics of components. You can find the starter app here and clone it to your computer.

In order to run the code examples in this chapter on your machine, you first have to install a server globally using nodeJs. Below is the command to install the http-server on your machine. Open your terminal and run:-

npm install http-server -g

Open the index.html file within the Chapter 2/starter-code folder in your text editor and add the Greeting component where you see the instructions to do so. Below is a code snippet of how your index.html file should look like after this change.

Within the starter-code folder run the command below to start the server:-

http-server .

Open the url within the terminal in your browser and you should see the text “Hello World Today!”.

In case you make changes to the code and they are not shown in the browser even after refresh. Try hard refreshing that tab or page.

You did it! You created and rendered your first component. Let’s take a closer look to help us understand what just happened.

Your index.html should look like this at this point

=> The React script allows us to write React components

=> The ReactDOM script allows us to place our components and work with them in the context of the DOM

=> The Babel script allows us to transpile ES6 to ES5. Some browsers have limited support for ES6 features; transpiling our ES6 to ES5 allows us to use the modern features of ES6 in our design without having to worry about compatibility. Notice that the React code is wrapped in a script tag with a type of text/babel.

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

Translating the line of code above to English would sound something like this;

Use ReactDOM’s render method to render the Greeting element into the DOM in a container with the id of root.

When naming a React component, it is convention to capitalize the first letter. This is important because it enables React to differentiate between the native HTML tags such as div, h1, span etc and custom components like Greeting.

A different way to write components

class Greeting extends React.Component {
return <h1>Hello World Today!</h1>;

Replacing the the functional component in index.html with your new class component and refreshing your browser should also render “Hello World Today!” which means everything is working well.

Functional (Stateless) Vs Class (Stateful) components

Functional components

Generally, it is preferred to use functional components whenever possible because of their predictability and conciseness. Since, they are purely presentational, their output is always the same given the same props.

You may find functional components referred to as stateless, dumb or presentational in other literature. All these names are derived from the simple nature that functional components take on.

=> Functional because they are basically functions

=> Stateless because they do not hold and/or manage state

=> Presentational because all they do is output UI elements

A functional component in it’s simplest form looks something like this:

const Greeting = () => <h1>Hi, I’m a dumb component!</h1>;

Class Components

As you explore other resources, you might find class components referred to as smart, container or stateful components.

=> Class because they are basically classes

=> Smart because they can contain logic

=> Stateful because they can hold and/or manage local state

=> Container because they usually hold/contain numerous other (mostly functional) components

Class components have a considerably larger amount of markup. Using them excessively and unnecessarily can negatively affect performance as well as code readability, maintainability and testability.

A class component in its simplest form:

class Greeting extends React.Component {
return <h1>Hi, I’m a smart component!</h1>;

How do I choose which component type to use?

=> need to manage local state

=> need to add lifecycle methods to your component

=> need to add logic for event handlers

Otherwise, always use a functional component.

As you start out, you will not always know whether to use class or functional components. Many times, you will realise after a while that you chose the wrong type. Do not be discouraged, making this choice gets easier as you create more components. Until then, one helpful tip is, class components that only have markup within the render body can safely be converted to functional components.


Looking at the Greeting component you created earlier, it is clear that it’s not a very useful component to have. In real world situations, you will often need to render components dynamically depending on the situation. You, for example might want the Greeting component to append your application’s current user’s name to the end of the greeting to have output like “Hello Steve” as opposed to having it render “Hello World Today!” every time. Perhaps, you’re always saying hello world, and the world never says hello back.

Props are React’s way of making components easily and dynamically customisable. They provide a way of passing properties/data down from one component to another, typically from a parent to a child component (unidirectional dataflow).

It’s important to note that props are read-only and that a component must never modify the props passed to it. As such, when a component is passed props as input, it should always return the same result for the same input.

All React components should act as pure functions with respect to their props.

Now that you know about props, make use of them in the Greeting component to render a greeting with a custom name appended to it.

Make changes to the code between the script tags in your index.html document to make it look like this:

const Greeting = props => <h1>Hello {props.name}</h1>;
<Greeting name={‘Edmond’}/>,

This renders the text “Hello Edmond” to the screen. Go ahead and play around with this by switching out the name for yours.

Using props added some new syntax to your app. Let’s take a closer look and understand what is going on here.

=> An argument (props) is passed to the functional component. Recall that since a single argument is being passed to the arrow function, the parentheses are unnecessary. Passing this argument lets the component know to expect some data to be passed to it (in this case, the name of our app’s user)

=> Within ReactDOM.render, the name you want rendered to the screen is passed in by specifying propName={propValue} within the component’s tag.

=> In the h1 tag, {} are used to print the name that is added to the props object when it’s passed in via the component’s tag. Notice that the name attribute is accessed using the dot syntax.

There is no limit to how many props can be supplied to a component.

Using Props with Class Components

=> Props is not passed as an argument to the class

=> The name attribute is accessed using this.props.name instead of props.name

class Greeting extends React.Component {
return <h1>Hello {this.props.name}</h1>;
<Greeting name={‘Edmond’}/>,

Challenge: Make changes that make it possible for the Greeting component to take name, age and gender props and render this information to the page.

HINT: Pass 3 attributes (name, gender and age) to your component within ReactDOM.render() and alter your h1 text to accommodate your new data. Remember to access the attributes using the right syntax e.g. props.gender for functional components and this.props.gender for class components

Default props

As a fallback, default props are helpful in enabling you offer a better user experience through your app , for example, considering the Greeting component from previous examples, using default props ensures that a complete greeting is always rendered even if the name attribute has not been explicitly passed to the component.

By altering the Greeting component as shown above, you now have “Hello User” being rendered in your browser if you do not pass the name attribute to the component.

Passing a name attribute as a prop to the Greeting component overwrites the default props.

Composing Components

React allows you to reference components within other components, allowing you to add a level(s) of abstraction to your application.

Take for example a user profile component on a social network. We could write this component’s structure like so:

|-> Avatar
|-> UserName
|-> Bio

In this case, UserProfile, Avatar, UserName and Bio are all components. The UserProfile component is composed of the Avatar, UserName and Bio components. This concept of component composition is quite powerful as it enables you to write highly modular and reusable components. For example, the UserName component can be used in many parts of the web application and in case it ever needed to be updated, changes would only be made to the UserName component and the changes would reflect everywhere with the application where it is used.

In the code snippet above, the Avatar, UserName and Bio components are defined within the UserProfile component. Try and do this on your own using the index.html file from previous examples.

Functional components can be referenced within class components and vice versa. However, it is not often that you will reference a class component within a functional component; class components typically serve as container components.

Project One

Let’s get started

  • Create a project folder to hold the project files.
  • Create an index.html page
  • Create a src folder to hold the JavaScript files.
  • Create an index.js file within the src folder
  • Add a div with an id of root to the body of the index.html.
  • Add the react, react-dom and babel scripts
  • Link to the index.js script below the babel script at the bottom of the html page.
  • Within index.js create a presentational component called Application.
  • Copy all the html within the body of the html template in the starter-code folder within the chapter 2 folder apart from the script tags.
  • Paste this html within the <> </> tags (fragments). We use tags because a React component only accepts one element and all the rest/siblings must be nested within the one parent element.
  • We need to clean up the html code and turn it into JSX that React can understand.
  • Let us start by removing all the html comments like this one <!-— Navbar -→
  • Rename all class instances to className, then close all img tags like so <img className=”card-img-top” src=”img/8.png”/> and also close the horizontal rule <hr/>

class is a reserved name in React, hence, the requirement to change all class instances to className.

  • Copy the img folder and paste it at the root of the project folder.
  • Head back to the index.html file and add the Bootstrap 4 CSS link tag in the head section.
  • Whoop…Whoop…You can now open the html page in the browser and see your new React application.

Here is the code up to this point.

Great work so far, you are moving on well but you are not yet done. You need to break the main component down further into smaller components so that your code is clean and easy to maintain. Let us get back to work.

Into components

  • Below the Application component, create a new functional component with a name Nav.
  • Copy the <nav> </nav> JSX into the Nav component as shown below.
  • Delete the nav code from the Application component JSX and replace it with <Nav/> element as shown here.
  • Open up the application again in the browser and everything should still be the same.
  • Let’s move on to the second presentational component, the Jumbotron.
  • Create an arrow function with a name Jumbotron.
  • Copy the jumbotron code and paste it into the Jumbotron function.
  • Delete the jumbotron code from the Application component’s JSX and replace it with the <Jumbotron/> element.

It is now your turn, go on and create the Toys and Footer functional components and then reference them within the Application component. Be sure to follow similar steps as before.

Nothing about the page in the browser should change after you are done. When you are done cross-check your solution with this.

We have done a good job up to this point, you may have realized that our JSX is not DRY. Meaning there is a lot of repetition specifically in the <Toys/> component, the toy cards are repeated for every toy. We can leverage the power of reusability that React components possess to clean this up.

  • First, create an array called toys to hold objects containing the toy name, description and image number as shown below.
  • Create a functional component that accepts props as an argument and name it Card. Copy and paste one card’s JSX code into it from the Toys component as shown below.
  • We need to make a few changes to the card so that it is reusable by adding placeholders which will be replaced by the actual data to be rendered.
  • The toy name is replaced by {props.toy.name} where toy is a prop object passed into the component from the toys array.
  • The description is replaced by {props.toy.description}.
  • The image src is replaced by a string template literal which accepts {props.toy.image} to make up the image path.
  • Let us make use of our new Card component by refactoring our Toys component. First delete all the cards within a div with a class of row in the Toys component. Then change the function signature to accept props as its only argument.
  • In order to display all the cards again in the Toys component, we make use of the map function to loop through the toys array passed into it as props. This map function accepts a callback function that accepts two arguments, the item in the array and its index. This callback returns a Card component which accepts a toy has its props. React also requires us to add a key to elements that are being looped over so that it can easily keep track of them and the changes applied to them making it easy for it to know what elements to re-render when the underlying data changes. Therefore the index of the toy object within the array acts as the key in this case as shown below.
  • Before you can test out the changes there is one more thing to do, otherwise the toys wont show on the page.

We need to pass in the toys array as props to the application component so that the Toys component can get access to them. This is shown in the snippet below.

ReactDOM.render(<Application toys={toys}/>,document.getElementById('root'));

Finally, within the Application component we also need to pass the toys array as props down to the Toys component as shown below. Recall from chapter one that data flow in React is unidirectional.

<Toys toys={this.props.toys}/>

Now open the page again in the browser to view the changes we have made. You will realize that nothing changes in the browser, we still get to see our page design as it was, but now it is fully optimized with React.

At this point you know how components work and how you can make use of them to develop modular React code that represents different sections of your user interface. Here is the final code for this project. The next chapter explains the aspect of state in a React application, do not miss it.

If you have found this article useful, reach over to the 👏 button and hit it as many times as you have enjoyed reading this post. Your responses are also highly appreciated. You can also find me on twitter.

The Andela Way

A pool of thoughts from the brilliant people at Andela

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store