Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Full Stack Development with Spring Boot and React

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

Arrow left icon
Product type Paperback
Published in Apr 2022
Publisher Packt
ISBN-13 9781801816786
Length 378 pages
Edition 3rd Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Juha Hinkula Juha Hinkula
Author Profile Icon Juha Hinkula
Juha Hinkula
Arrow right icon
View More author details
Toc

Table of Contents (22) Chapters Close

Preface 1. Part 1: Backend Programming with Spring Boot
2. Chapter 1: Setting Up the Environment and Tools – Backend FREE CHAPTER 3. Chapter 2: Understanding Dependency Injection 4. Chapter 3: Using JPA to Create and Access a Database 5. Chapter 4: Creating a RESTful Web Service with Spring Boot 6. Chapter 5: Securing and Testing Your Backend 7. Part 2: Frontend Programming with React
8. Chapter 6: Setting Up the Environment and Tools – Frontend 9. Chapter 7: Getting Started with React 10. Chapter 8: Consuming the REST API with React 11. Chapter 9: Useful Third-Party Components for React 12. Part 3: Full Stack Development
13. Chapter 10: Setting up the Frontend for Our Spring Boot RESTful Web Service 14. Chapter 11: Adding CRUD Functionalities 15. Chapter 12: Styling the Frontend with React MUI 16. Chapter 13: Testing Your Frontend 17. Chapter 14: Securing Your Application 18. Chapter 15: Deploying Your Application 19. Chapter 16: Best Practices 20. Assessments 21. Other Books You May Enjoy

OpenWeatherMap API

First, we will make a React app that shows the current weather in London. This weather data will be fetched from OpenWeatherMap (https://openweathermap.org/). You need to register with OpenWeatherMap to get an API key. We will use a free account as that is sufficient for our needs. Once you have registered, navigate to your account information to find the API keys tab. There, you'll see the API key that you need for your React weather app:

Figure 8.1 – The OpenWeatherMap API key

Let's create a new React app with create-react-app:

  1. Open a terminal in Windows or Terminal in macOS/Linux, and type the following command:
    npx create-react-app weatherapp
  2. Navigate to the weatherApp folder:
    cd weatherapp
  3. Start your app with the following command:
    npm start
  4. Open your project folder with VS Code and open the App.js file in the editor view. Remove all the code inside the <div className="App"></div&gt...
lock icon The rest of the chapter is locked
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.
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 $19.99/month. Cancel anytime
Banner background image