JSX and Displaying Lists in React

Componentization is a design paradigm in React application development. As a developer and React enthusiast, you will develop tons of useful components. You will need a combination of units to provide interfaces the user can interact with seamlessly.

JavaScript Syntax Extension (JSX) is an innovative approach to describing the User Interface (UI) for modern web applications. In this chapter, we are going to take a clinical dive into why JSX is one of the core requirements in developing production-ready React applications. In addition, you will learn how to display lists in React.

We use lists in virtually every web application development project we undertake, and knowing how to render lists is a required skill set for web developers. HTML and JavaScript, as languages of the web, have been with us from the beginning, helping web developers build web applications.

However, in recent times, the demand for complex and highly rich interactive...

Technical requirements

The complete code for this chapter is available on GitHub at: https://github.com/PacktPublishing/Full-Stack-Flask-and-React/tree/main/Chapter05.

What is JSX?

You’ve already been introduced to and seen some JSX. Let’s discuss in more depth what JSX means as a new approach to adding HTML to JavaScript when designing user interfaces.

JSX is simply an XML-like syntax extension for JavaScript. JSX allows frontend developers to bake HTML elements with JavaScript. The effect of this mix is usually an impressive user-friendly interface. As we know, the main purpose of React is to provide us with a set of APIs for building user interfaces.

With little or no controversy, React has been up to the challenge, becoming the leading shining gem in the jungle of frontend JavaScript libraries and frameworks. React powers large-scale, production-grade web and mobile applications with an improved user experience.

Interestingly, React is achieving this improved efficiency and performance with the same set of tools, languages, and techniques we are already familiar with: HTML and JavaScript. React leverages HTML elements and...

JSX versus HTML

JSX is an XML-like syntax extension for JavaScript. It is a creative approach to writing HTML inside JavaScript. Technically, React allows us to use what we love: HTML tags in marking up user interfaces while it uses React.createElement() under the hood. JSX makes component interface development hassle-free while optimizing efficiency.

HTML is the standard language for structuring the web. HTML elements power every web page you see on the internet. HTML syntax is easy to understand, and it is the language the browser understands natively.

The following table clearly states the subtle differences that exist between JSX and HTML for better understanding and usage in React applications:

How JSX abstracts JavaScript

Nowadays, coding React applications without JSX is not recommended, though it is possible. For instance, you can write a React.createElement(component, props, ...children) function to describe a UI.

However, you can easily describe a button UI in JSX with the following code:

<Button color="wine">    Click a Wine Button
</Button>

Writing the preceding code without JSX would require you to describe a button UI with the following code:

React.createElement(Button,
    {color: 'wine'},
    ' Click a Wine Button')

Doing this in a large React project could lead to multiple issues, such as having to deal with more bugs in your code base and facing a steeper learning curve to become a code-savvy developer who could function optimally at writing this low-level code to describe a UI. However, with very little to disagree on, you would agree that JSX...

Event handling in React

React’s event system is another powerful feature shipped with React core APIs. It is called SyntheticEvent. As React developers, we will come across event handling daily in React application development projects. Handling events shouldn’t be new to you if you are familiar with the basics of JavaScript. You could add an event to HTML DOM using the browser-native approach.

Let’s have a glimpse at this code snippet:

<html><body>
<h1>HTML DOM Operations</h1>
<p><strong>Click here to see my message.</strong></p>
<div id="root"></div>
<script>
document.addEventListener("click", function(){
document.getElementById("root").innerHTML =
    "This is a text added to the DOM tree!";
});
</script>
</body>
</html>

<div id="root"> </div> indicates the location where the DOM will inject...

Displaying lists in React

Most web applications we see around today use list components in describing a user interface. In any complex web application project or production-grade application, you will see the list feature, often used in data presentation. In React, you can use a list to display your component data.

We are going to use mocked data to showcase how you can use map() to fetch a list of data items. We will also discuss the essence of the key and id attributes in React list management. The GitHub repository for this book’s project (https://github.com/PacktPublishing/Full-Stack-Flask-Web-Development-with-React/tree/main/Chapter-05/06/frontend) contains the mocked conference speakers data source; you can find images in the public folders and css (index.css) inside the src folder.

However, the backend section of this book (Chapter 9, API Development and Documentation) will explain how we can pull this data from an API endpoint developed in Flask.

This url leads...

Nesting lists in JSX

As mentioned earlier, lists are a critical component of most web applications. Lists are often used to structure data and organize information neatly. We are familiar with some of the list clichés in web development: a to-do list, a task list, and even a menu list. All these lists can become complicated, depending on the data structure and how you are expected to present list items to end users. Dealing with lists in a React application requires an understanding of how you can handle data that comes in the form of an array of objects.

In this section, we will learn how to render nested lists of items in JSX in React applications. You are going to see complex nested data structure like this and even more coming from your API data sources, so having an understanding of nested lists will make React applications that contain complex data easier to handle.

The following code snippet displays a list of nested web technology stack items in a component.

Edit...

Looping over objects in JSX

Looping through complex data objects is part of what experienced React developers need to know how to handle effortlessly. You will undoubtedly encounter scenarios where you will have to work with both simple and nested object data from your API endpoints to extract useful data for your application. In this section, we are going to understand how to seamlessly iterate over data objects in an application.

In JavaScript, objects are not iterable. You simply can’t loop over the object properties with the for ... of syntax. Object.Keys() is one of the in-built standard object methods used to loop over object data in JavaScript. However, in ES2017, new object methods were added that can be used to loop over object properties: Object.values() and Object.entries().

Let’s briefly examine each of these methods and learn how to use them with object data.

Create the object data to loop over and name it speakersData:

const speakersData = {name...

Summary

In this chapter, we extensively discussed JSX in React. We delved into explaining what JSX is all about as well as the rules guiding the use of JSX in React. Then, we discussed the DOM and how VDOM in React abstracts the native browser DOM for React developers to build a more efficient, cross-browser user interface. JSX improves DOM interaction in React applications and also optimizes the speed for elements in React components to render.

We also examined event handling in React and the use of the SyntheticEvent event wrapper in React in handling event operations in React. We discussed the subtle differences between JSX and HTML and the rules guiding the usage in React.

Finally, with use cases, we discussed how you can display lists in a React project and how key and id are used in managing list items uniquely. We also looked at how you can iterate over objects and display complex nested objects in React.

In the next chapter, we will discuss how to handle form operations...

The rest of the chapter is locked

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Renews at €14.99/month. Cancel anytime

Start free trial

Previous Chapter

Chapter 7 of 21

Next Chapter

You have been reading a chapter from

Full-Stack Flask and React

Published in: Oct 2023Publisher: PacktISBN-13: 9781803248448

© 2023 Packt Publishing Limited All Rights Reserved

Register for a free Packt account to unlock a world of extra content!

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

Sign up now

undefined

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at €14.99/month. Cancel anytime

Author (1)

Olatunde Adedeji

Olatunde Adedeji is a seasoned web developer with over 15 years of experience in developing dynamic and detail-oriented enterprise web applications. Along with his extensive experience in developing, maintaining and supporting mobile, web and enterprise applications in Python, Go and JavaScript, Olatunde has consistently delivered excellent services, as team lead, team member or in consultancy capacity. Olatunde is proficient in application design and solution blueprinting; including mastery of application development tools such as: Flask, Django, Gin, React, and NodeJS. When not weaving the web and playing chess, Olatunde spends time with his wife, Adedoyin and two daughters, Mitchelle and Mabel.
Read more about Olatunde Adedeji

See other products by Olatunde Adedeji

Personalised recommendations for you

Based on your interests and search pattern

Modernizing Drupal 10 Theme Development

Modernizing Drupal 10 Theme Development covers everything a frontend developer or a Drupal developer needs to know about the Drupal 10 theme layer. Using real-world examples, this book will help you to build up from an empty theme to a fast, responsive, maintainable, and accessible Drupal website in both monolithic and decoupled ways.

BookAug 2023360 pages4

Full Stack Development with Spring Boot 3 and React

Full Stack Development with Spring Boot 3 and React contains a wealth of practical guidance for picking up full stack development. The step-by-step exploration of everything from dependency injection, ORM with Hibernate, and JWTs to RESTful APIs, UI styling, and TypeScript will help you to develop the Spring Boot and React skills you need.

BookOct 2023454 pages5

Modern API Development with Spring 6 and Spring Boot 3

This practical guide teaches inexperienced Java programmers and web developers how to design, develop, test, and deploy highly scalable and maintainable APIs using REST, gRPC, GraphQL, and reactive programming paradigms with Java and Spring Boot. Complete with real-world examples, it will guide you to build enterprise-level APIs and services.

BookSep 2023494 pages1

Hands-On Web Scraping with Python

This book guides you to discover and extract quality data from the web using Python libraries such as requests, lxml, pyquery, scrapy, and to use effective scraping techniques. It’ll help you master the fundamentals and advanced concepts of web scraping and apply your skills to real-world data extraction tasks, with analysis and visualization.

BookOct 2023324 pages

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages4

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages3

Full Stack Web Development with Remix

Unlock the power of the web platform and cutting-edge technologies for your React applications using Remix to take advantage of the full stack to create a great user experience. This book is a complete resource covering the conventions, levers, and primitives of Remix and illustrates concepts through a real-world project.

BookNov 2023318 pages

Real-World Svelte

This book is a must-have guide to unlocking Svelte's true potential. You’ll learn about advanced component development, efficient coding, and powerful UI patterns using actions. With a focus on state management, custom stores, and renderless components, this book equips you to build exceptional web apps with lightning-fast performance.

BookDec 2023282 pages3

Building Micro Frontends with React 18

This book is a step-by-step guide to building production-grade, highly scalable, and performant web apps using multi-SPA and micro apps patterns, where you’ll learn to deal with complexities related to micro frontends. The book is a full life cycle guide to building, deploying, and managing micro frontends in a cloud-native environment.

BookOct 2023218 pages

Drupal 10 Masterclass

This all-in-one guide helps you get up and running with building Drupal applications using the latest Drupal 10 features. You’ll develop a complete practical understanding of Drupal frontend, backend, architecture, content management, themes, and modules to deliver a rich user experience by creating custom Drupal apps.

BookDec 2023310 pages

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages5

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages2

GO TO TOP

Machine LearningKubernetesReactPythonCybersecurityUnity Game DevelopmentPower BIAzureWeb Development

• Machine Learning
• Kubernetes
• React
• Python
• Cybersecurity
• Unity Game Development
• Power BI
• Azure
• Web Development

Legal

Terms and ConditionsPrivacy PolicyCookie PolicyShipping PolicyReturn Policy

Support

HelpContact Us

Business

Partnerships

Sponsored eBooks

Custom eBooks

CareersBecome an author

Packt+ Membership

SubscriptionDataProSecPro

Packt Subscription Packt NewsLetter

Legal

Terms and Conditions

Privacy Policy

Cookie Policy

Shipping Policy

Return Policy

Support

Help

Contact Us

Business

Packt Subscription

Packt NewsLetter

---

Company Address: Packt Publishing Ltd, Grosvenor House, 11 St Paul's Square, Birmingham, B3 1RB© 2024 Packt Publishing Limited All Rights Reserved

	HTML	JSX
Native to the browser	HTML elements are native to the browser.	JSX is transpiled into JavaScript using...

How JSX abstracts JavaScript

Nowadays, coding React applications without JSX is not recommended, though it is possible. For instance, you can write a React.createElement(component, props, ...children) function to describe a UI.

However, you can easily describe a button UI in JSX with the following code:

<Button color="wine">    Click a Wine Button
</Button>

Writing the preceding code without JSX would require you to describe a button UI with the following code:

React.createElement(Button,
    {color: 'wine'},
    ' Click a Wine Button')

Doing this in a large React project could lead to multiple issues, such as having to deal with more bugs in your code base and facing a steeper learning curve to become a code-savvy developer who could function optimally at writing this low-level code to describe a UI. However, with very little to disagree on, you would agree that JSX...

Event handling in React

React’s event system is another powerful feature shipped with React core APIs. It is called SyntheticEvent. As React developers, we will come across event handling daily in React application development projects. Handling events shouldn’t be new to you if you are familiar with the basics of JavaScript. You could add an event to HTML DOM using the browser-native approach.

Let’s have a glimpse at this code snippet:

<html><body>
<h1>HTML DOM Operations</h1>
<p><strong>Click here to see my message.</strong></p>
<div id="root"></div>
<script>
document.addEventListener("click", function(){
document.getElementById("root").innerHTML =
    "This is a text added to the DOM tree!";
});
</script>
</body>
</html>

<div id="root"> </div> indicates the location where the DOM will inject...

Displaying lists in React

Most web applications we see around today use list components in describing a user interface. In any complex web application project or production-grade application, you will see the list feature, often used in data presentation. In React, you can use a list to display your component data.

We are going to use mocked data to showcase how you can use map() to fetch a list of data items. We will also discuss the essence of the key and id attributes in React list management. The GitHub repository for this book’s project (https://github.com/PacktPublishing/Full-Stack-Flask-Web-Development-with-React/tree/main/Chapter-05/06/frontend) contains the mocked conference speakers data source; you can find images in the public folders and css (index.css) inside the src folder.

However, the backend section of this book (Chapter 9, API Development and Documentation) will explain how we can pull this data from an API endpoint developed in Flask.

This url leads...

Nesting lists in JSX

As mentioned earlier, lists are a critical component of most web applications. Lists are often used to structure data and organize information neatly. We are familiar with some of the list clichés in web development: a to-do list, a task list, and even a menu list. All these lists can become complicated, depending on the data structure and how you are expected to present list items to end users. Dealing with lists in a React application requires an understanding of how you can handle data that comes in the form of an array of objects.

In this section, we will learn how to render nested lists of items in JSX in React applications. You are going to see complex nested data structure like this and even more coming from your API data sources, so having an understanding of nested lists will make React applications that contain complex data easier to handle.

The following code snippet displays a list of nested web technology stack items in a component.

Edit...

Looping over objects in JSX

Looping through complex data objects is part of what experienced React developers need to know how to handle effortlessly. You will undoubtedly encounter scenarios where you will have to work with both simple and nested object data from your API endpoints to extract useful data for your application. In this section, we are going to understand how to seamlessly iterate over data objects in an application.

In JavaScript, objects are not iterable. You simply can’t loop over the object properties with the for ... of syntax. Object.Keys() is one of the in-built standard object methods used to loop over object data in JavaScript. However, in ES2017, new object methods were added that can be used to loop over object properties: Object.values() and Object.entries().

Let’s briefly examine each of these methods and learn how to use them with object data.

Create the object data to loop over and name it speakersData:

const speakersData = {name...

Summary

In this chapter, we extensively discussed JSX in React. We delved into explaining what JSX is all about as well as the rules guiding the use of JSX in React. Then, we discussed the DOM and how VDOM in React abstracts the native browser DOM for React developers to build a more efficient, cross-browser user interface. JSX improves DOM interaction in React applications and also optimizes the speed for elements in React components to render.

We also examined event handling in React and the use of the SyntheticEvent event wrapper in React in handling event operations in React. We discussed the subtle differences between JSX and HTML and the rules guiding the usage in React.

Finally, with use cases, we discussed how you can display lists in a React project and how key and id are used in managing list items uniquely. We also looked at how you can iterate over objects and display complex nested objects in React.

In the next chapter, we will discuss how to handle form operations...