Book Image

Full Stack Development with Spring Boot 3 and React - Fourth Edition

By : Juha Hinkula
5 (1)
Book Image

Full Stack Development with Spring Boot 3 and React - Fourth Edition

5 (1)
By: Juha Hinkula

Overview of this book

If you’re an existing Java developer who wants to go full stack or pick up another frontend framework, this book is your concise introduction to React. In this three-part build-along, you’ll create a robust Spring Boot backend, a React frontend, and then deploy them together. This new edition is updated to Spring Boot 3 and includes expanded content on security and testing. For the first time ever, it also covers React development with the in-demand TypeScript. You’ll explore the elements that go into creating a REST API and testing, securing, and deploying your applications. You’ll learn about custom Hooks, third-party components, and MUI. By the end of this book, you'll be able to build a full stack application using the latest tools and modern best practices.
Table of Contents (23 chapters)
1
Part I: Backend Programming with Spring Boot
8
Part II: Frontend Programming with React
14
Part III: Full Stack Development
21
Other Books You May Enjoy
22
Index

Creating a React app with TypeScript

Now, we will create a React app using Vite, and we will use TypeScript instead of JavaScript. We will use TypeScript later when we develop the frontend for our car backend. As we mentioned earlier, Vite comes with built-in TypeScript support:

  1. Create a new React app using the following command:
    npm create vite@latest
    
  2. Next, name your project tsapp, and select the React framework and the TypeScript variant:

Figure 9.7: React TypeScript app

  1. Then, move to your app folder, install dependencies, and run your app using the following commands:
    cd tsapp
    npm install
    npm run dev
    
  2. Open your app folder in VS Code, and you will see that the filename of our App component is App.tsx:

    Figure 9.8: App.tsx

    The file extension of TypeScript React files is .tsx (combining JSX with TypeScript). The regular file extension of TypeScript files is .ts.

  1. Locate the tsconfig...