You're reading from Full Stack Development with Spring Boot 3 and React Build modern web applications using the power of Java, React, and TypeScript

Product type Paperback

Published in Oct 2023

Publisher Packt

ISBN-13 9781805122463

Length 454 pages

Edition 4th Edition

Languages

Java

Tools

React

Concepts

Full Stack Web Development

Author (1):

Juha Hinkula

View More author details

Table of Contents (23) Chapters

Preface

1. Part I: Backend Programming with Spring Boot

2. Setting Up the Environment and Tools – Backend FREE CHAPTER

3. Understanding Dependency Injection

4. Using JPA to Create and Access a Database

5. Creating a RESTful Web Service with Spring Boot

6. Securing Your Backend

7. Testing Your Backend

8. Part II: Frontend Programming with React

9. Setting Up the Environment and Tools – Frontend

10. Getting Started with React

11. Introduction to TypeScript

12. Consuming the REST API with React

13. Useful Third-Party Components for React

14. Part III: Full Stack Development

15. Setting Up the Frontend for Our Spring Boot RESTful Web Service

16. Adding CRUD Functionalities

17. Styling the Frontend with MUI

18. Testing React Apps

19. Securing Your Application

20. Deploying Your Application

21. Other Books You May Enjoy

22. Index

Debugging a React app

To debug React apps, we should also install React Developer Tools, which is available for Chrome, Firefox, and Edge browsers. Chrome plugins can be installed from the Chrome Web Store (https://chrome.google.com/webstore/category/extensions), while Firefox add-ons can be installed from the Firefox add-ons site (https://addons.mozilla.org). After you have installed React Developer Tools, you should see a new Components tab in your browser’s developer tools once you navigate to your React app.

You can open the developer tools by pressing Ctrl + Shift + I (or F12) in the Chrome browser. The following screenshot shows the developer tools in the browser. The Components tab shows a visual representation of the React component tree, and you can use the search bar to find components. If you select a component in the component tree, you will see more specific information about it in the right-hand panel: