Reader small image

You're reading from  Full Stack Development with Spring Boot and React - Third Edition

Product typeBook
Published inApr 2022
Reading LevelIntermediate
PublisherPackt
ISBN-139781801816786
Edition3rd Edition
Languages
Right arrow
Author (1)
Juha Hinkula
Juha Hinkula
author image
Juha Hinkula

Juha Hinkula is a software development lecturer at Haaga-Helia University of Applied Sciences in Finland. He received an MSc degree in Computer Science from the University of Helsinki and he has over 17 years of industry experience in software development. Over the past few years, he has focused on modern full stack development. He is also a passionate mobile developer with Android-native technology, and also uses React Native.
Read more about Juha Hinkula

Right arrow

Chapter 1

  1. Spring Boot is a Java-based web application framework that is based on Spring. With Spring Boot, you can develop standalone web applications with embedded application servers.
  2. Eclipse is an open source integrated development environment (IDE), and it is mostly used for Java programming, but it supports multiple other programming languages as well.
  3. Maven is an open source software project-management tool. Maven can manage builds, documentation, testing, and more in the software development project.
  4. The easiest way to start a new Spring Boot project is to create it with the Spring Initializr web page. This creates a skeleton for your project with the modules that you need.
  5. If you are using the Eclipse IDE, you just activate your main class and press the Run button. You can also use the Maven mvn spring-boot:run command to run an application.
  6. The Spring Boot starter package provides logging features for you. You can define the level of logging in the...

Chapter 2

  1. Depenency Injection (DI) is software development technology that helps the interaction between the classes, but at the same time keeps the classes independent.
  2. The easiest way to utilize DI in Spring Boot is to use @Autowired annotation.

Chapter 3

  1. ORM is a technique that allows you to fetch and manipulate data from a database using an object-oriented programming paradigm. JPA provides object-relational mapping for Java developers. Hibernate is a Java-based JPA implementation.
  2. The entity class is just a standard Java class that is annotated with the @Entity annotation. You have to implement constructors, fields, getters and setters inside the class. The unique ID field(s) are annotated with the @Id annotation.
  3. You have to create a new interface that extends the Spring Data CrudRepository interface. You define the entity and the type of the id field in the type arguments—for example, <Car, Long>.
  4. The CrudRepository provides all CRUD operations to your entity. You can create, read, update, and delete your entities using the CrudRepository.
  5. You have to create entity classes and link the entities using the @OneToMany and @ManyToOne annotations.
  6. You can add demo data to your main application...

Chapter 4

  1. REST is an architectural style for creating web services, and it defines a set of constraints.
  2. The easiest way to create a RESTful web service with Spring Boot is to use the Spring Data REST starter package. By default, the Spring Data REST package finds all public repositories and creates automatically RESTful web services for your entities.
  3. You can send a GET request to the endpoint of the entity. For example, if you have an entity class called Car, the Spring Data REST package creates an endpoint called /cars that can be used to fetch all cars.
  4. You can send a DELETE request to the endpoint of the individual entity item. For example, /cars/1 deletes a car with the ID 1.
  5. You can send a POST request to the endpoint of the entity. The header must contain the Content-Type field with the value application/json. The new item will be embedded in the request body.
  6. You can send a PATCH request to the endpoint of the entity. The header must contain the Content...

Chapter 5

  1. Spring Security provides security services for Java-based web applications.
  2. You have to add the Spring Security starter package dependency to your pom.xml file. You can configure Spring Security by creating a security configuration class.
  3. JWT (short for JSON Web Token) is a compact way to implement authentication in modern web applications. The size of the token is small, and so it can be sent in the URL, either in the POST parameter or inside the header.
  4. You can use the Java JWT library—that is, the JSON web token library for Java. The authentication service class adds and reads the token. The filter classes handle the login and authentication process.
  5. You have to add the Spring Boot test starter package to your pom.xml file. The Spring Boot test starter package provides a lot of nice testing utilities—for example, JUnit, AssertJ, and Mockito. When using the JUnit, the basic test classes are annotated with the @SpringBootTest annotation...

Chapter 6

  1. Node.js is an open source, JavaScript-based, server-side environment. Npm is a package manager for JavaScript.
  2. You can find the installation packages and instructions for installing these on multiple operating systems at https://nodejs.org/en/download.
  3. Visual Studio Code (VS Code) is an open source code editor for multiple programming languages.
  4. You can find the installation packages and instructions for installing this on multiple operating systems at https://code.visualstudio.com.
  5. You can create an app using the npx create-react-app projectname command.
  6. You can run the app using the npm start or yarn start command.
  7. You can start by modifying the App.js file, and when you save the modification, you will see the changes immediately in the web browser.

Chapter 7

  1. Components are the basic building blocks of React apps. The React component can be created using a JavaScript function or the ES6 class.
  2. The props and state are the input data for rendering the component. They are JavaScript objects, and the component is re-rendered when the props or state change.
  3. The data flow goes from the parent component to the child.
  4. The components that only have props are called stateless components. The components that have both props and a state are called stateful components.
  5. JSX is the syntax extension for JavaScript, and it is recommended that you use it with React.
  6. Handling events in React is similar to handling DOM element events. The difference in React is that event naming uses the camelCase naming convention—for example, onClick or onSubmit.
  7. We will often want to invoke a JavaScript function that has access to form data after the form submission. Therefore, we have to disable default behavior using the preventDefault...

Chapter 8

  1. A promise is an object that represents the result of an asynchronous operation. The use of promises simplifies the code when performing asynchronous calls.
  2. The fetch API provides the fetch() method that you can use to make asynchronous network calls using JavaScript.
  3. When using the REST API, it is recommended that you use the useEffect hook function if the request is sent after the first render.
  4. You can access the response data using the promises with the fetch() method. The data from the response is saved to the state and the component is re-rendered when the state changes.

Chapter 9

  1. You can find React components from multiple sources—for example, https://js.coach/ or https://github.com/brillout/awesome-react-components.
  2. You can install React components using the npm or yarn package managers. If you are using npm, use the npm install <package_name> command.
  3. First, you have to install the Ag-grid component. After the installation, you can use the AgGridReact component in your component. You have to define the data and the columns using the AgGridReact component props. The data can be an array of objects.
  4. First, you have to install the MUI component library. After the library is installed, you can start to use components. The documentation of the different components can be found at https://mui.com.
  5. Routing can be implemented using the React Router component, which can be found at https://github.com/ReactTraining/react-router.

Chapter 10

  1. With the mock-up, it is much easier to discuss needs with the client before you start to write any actual code. Changes to the mock up are really easy and quick to make, compared to modifications with real frontend source code.
  2. You can modify the security configuration class to allow access to all endpoints without authentication.

Chapter 11

  1. First, you have to call the REST API using the fetch() method. Then, you can access the response data using the promises with the fetch() method. The data from the response is saved to the state and the component is re-rendered when the state changes.
  2. You have to send a DELETE method request using the fetch() method. The endpoint of the call is the link to the item that you want to delete.
  3. You have to send a POST method request to the entity endpoint using the fetch() method. The added item should be embedded in the body. You have to add the Content-Type header with the application/json value.
  4. You have to send a PATCH method request using the fetch() method. The endpoint of the call is the link to the item that you want to update. The updated item should be embedded in the body. You have to add the Content-Type header with the application/json value.
  5. You can use a third-party React component, such as MUI SnackBar, to show toast messages.
  6. You can...

Chapter 12

  1. MUI is the component library for React, and it implements Google’s material design.
  2. First, you have to install the MUI library using npm. Then you can start to use components from the library. The documentation of the different components can be found at https://mui.com/.
  3. To use icons, you have to install @mui/icons-material package using npm. Then you can use icons with for example, IconButton component.

Chapter 13

  1. Jest is a test library for JavaScript developed by Facebook.
  2. Create a test file using the .test.js extension. Implement your test cases inside the file. You can run the tests using the npm run test command.
  3. You can use fireEvent method that React testing library provides.
  4. For snapshot testing, you have to install the react-test-render package and import renderer to your test file. Implement your snapshot test cases inside the file and run the tests using the npm run test command.

Chapter 14

  1. You have to create a new component that renders input fields for the username and the password. The component also contains a button that calls the /login endpoint when the button is pressed.
  2. The call from the login component is made using the POST method and a user object is embedded in the body. If the authentication succeeds, the backend sends the token back in the Authorization header.
  3. The token can be saved to session storage using the sessionStorage.setItem() method.
  4. The token has to be included in the request’s Authorization header.

Chapter 15

  1. You can create an executable JAR file by using the Maven mvn clean install command.
  2. The easiest way to deploy a Spring Boot application is to push your application source code to GitHub and link your GitHub repository to your app in Heroku.
  3. The easiest way to deploy a Spring Boot application is to push your application source code to GitHub and link your GitHub repository to your app in AWS Amplify.
  4. Docker is a container platform that makes software development, deployment, and shipping easier. Containers are lightweight and executable software packages that include everything that is needed to run software.
  5. The Spring Boot application is just an executable JAR file that can be executed with Java. You can use it to create a Docker container for your Spring Boot application in a similar way to creating one for any Java JAR application.
  6. You can pull the latest MariaDB container from the Docker Hub using the Docker docker pull mariadb:latest command...

Chapter 16

  1. It makes code more readable and easier to maintain. It also makes teamwork much easier because everyone is using the same structure in the coding.
  2. It makes code more readable and easier to maintain. The testing of the code is easier.
  3. It makes code more readable and easier to maintain. It also makes teamwork much easier because everyone is using the same naming convention in the coding.

Why subscribe?

  • Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
  • Improve your learning with Skill Plans built especially for you
  • Get a free eBook or video every month
  • Fully searchable for easy access to vital information
  • Copy and paste, print, and bookmark content

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at customercare@packtpub.com for more details.

At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

lock icon
The rest of the chapter is locked
You have been reading a chapter from
Full Stack Development with Spring Boot and React - Third Edition
Published in: Apr 2022Publisher: PacktISBN-13: 9781801816786
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.
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
Renews at €14.99/month. Cancel anytime

Author (1)

author image
Juha Hinkula

Juha Hinkula is a software development lecturer at Haaga-Helia University of Applied Sciences in Finland. He received an MSc degree in Computer Science from the University of Helsinki and he has over 17 years of industry experience in software development. Over the past few years, he has focused on modern full stack development. He is also a passionate mobile developer with Android-native technology, and also uses React Native.
Read more about Juha Hinkula