React - Components and JSX

The course is part of this learning path

Understanding Components in React

This module introduces you to some of the basic components in React, and what JSX is. 

Learning Objectives 

The objectives of this module are to provide you with an understanding of 

  • What components are
  • What JSX is and why it is used in React JS
  • How to create Functional and Class Components
  • How to add multiple components
  • How to inspect components in the Browser
  • How the in-browser tools work

Intended Audience  

This Learning Path is aimed at all who wish to learn how to use the ReactJS framework.  


It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 


We welcome all feedback and suggestions - please contact us at to let us know what you think. 



React is fundamentally about Components. A development team's mindset needs to think and React components when creating an application you are using it. According to the official documentation which can be found at React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time. A React components code contains all of the markup and logic required to display the UI. They should never contain any business logic. 

React is for taking data and displaying it. Any logic in a React application should only be there for display purposes. If you're creating a new component, then it should be made as a function. Prior to React version 16 components were generally a mixture of functional class components. Version 1600 features the allow components to be functions saying that class components will never be deprecated so there's no need to rush off and convert all components to functions. 

Here's some examples of function components. The component first is an arrow function that implicitly returns the markup for the components. The components second is an arrow function that explicitly returns the markup. The components third is an arrow function that has some logic before it returns to component markup and uses the value created in the logic and the return. Notice how all the function returns look like HTML, and that the component third return has some curly brace syntax inserted into it to use the date value. 

That's because the component isn't written in Vanilla JavaScript, it's written in a language Facebook developed for React called JSX. We'll cover what that is and how it affects us in another video. Note that all my components import React from the React package and are exported so they can be used elsewhere in the application. To use these components, I simply import them into the component I wish to render them from and insert them as HTML style element in the components returned like shown here in the up component. 

Another thing to note for the return of a function is that it returns a single outer element. This can be only valid HTML element, a composite element like a div that has many child elements any React component, null or a boolean false. returning null or a boolean false means that the component will not render anything. React provide some components in its library and a useful one is the fragment component as shown here. 

This is a non rendering wrapper that allows me to optimize my HTML by not having to put a render in element like a div to wrap the rest of my component markup. A components return must be pure. This means that it shouldn't modify the component state. It should return the same result each time it's created and does not indirectly interact with the browser. This is because they should interact with the virtual DOM which will cause the actual DOM to update. 

I can now look at my application in the browser. My application is now running after using the MPM start command from the terminal. It runs on local host port 3000 by default, and pointing my browser to this address allows me to view my application. Using the developer tools I can see the actual DOM has been rendered and any messages from React on the console. 

Using the components tab, which is there because I installed Chrome div tools for React, I can see my component hierarchy. Clicking on a component allows me to see its properties and also where it is actually positioned within the DOM. Previous three out version 16 components that help changing data called state had to be created as a class. 

A class component, had to extend React as component class and included at least the render function. The job of the render function was to return the markup for the component and as for the function component, the return must be pure. The example shown is a very basic cost component and you're right, it could easily have been a function component but in the past, if I needed it to be more complex say by adding a changeable state to it, I would have needed a constructor and other features like component lifecycle methods that weren't available in function components. 

Facebook have said they will never deprecate class components and it's possible you'll come across them if you're working with legacy applications. So it's important for us to know what they look like and what the extra functionality does.

About the Author
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics