You're reading from Full-Stack Flask and React Learn, code, and deploy powerful web applications with Flask 2 and React 18

Product type Paperback

Published in Oct 2023

Publisher Packt

ISBN-13 9781803248448

Length 408 pages

Edition 1st Edition

Languages

JavaScript

Tools

Flask

Concepts

Full Stack Web Development

Author (1):

Olatunde Adedeji

View More author details

Table of Contents (21) Chapters

Preface

1. Part 1 – Frontend Development with React

2. Chapter 1: Getting Full Stack Ready with React and Flask FREE CHAPTER

3. Chapter 2: Getting Started with React

4. Chapter 3: Managing State with React Hooks

5. Chapter 4: Fetching Data with React APIs

6. Chapter 5: JSX and Displaying Lists in React

7. Chapter 6: Working with React Router and Forms

8. Chapter 7: React Unit Testing

9. Part 2 – Backend Development with Flask

10. Chapter 8: SQL and Data Modeling

11. Chapter 9: API Development and Documentation

12. Chapter 10: Integrating the React Frontend with the Flask Backend

13. Chapter 11: Fetching and Displaying Data in a React-Flask Application

14. Chapter 12: Authentication and Authorization

15. Chapter 13: Error Handling

16. Chapter 14: Modular Architecture – Harnessing the Power of Blueprints

17. Chapter 15: Flask Unit Testing

18. Chapter 16: Containerization and Flask Application Deployment

19. Index

Why subscribe?

20. Other Books You May Enjoy

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...