Spring Boot & React: Day 1 Essentials

Author: Ravindranath Porandla

Welcome to Day 1 of my Spring Boot + React Full-Stack Journey 🚀

In today’s blog, I’ll provide beginner-friendly explanations of the core web concepts every full-stack developer should know. Whether you’re building REST APIs with Spring Boot or using them in React, this foundation is essential.

🌐 How the Web Works

The web operates on a request-response model, where a client (usually a browser) makes requests to a server, which processes and returns a response.

📝 Simple Example:

Ordering food online:

You place an order → client sends a request
Restaurant confirms & delivers → server sends a response

💡 Tip:

Always think of the internet like a conversation — the browser speaks first, the server responds.

🧑‍💻 What is Client-Server?

Client-server architecture separates concerns between front-end (client) and back-end (server). Clients initiate communication and servers provide requested services or data.

📝 Example:

A student (client) asks a teacher (server) for notes. The teacher gives the right material.

💡 Tip:

Client = Asks, Server = Answers. They work together.

🔌 What is an API?

An API (Application Programming Interface) is a set of rules that allow different software systems to communicate and exchange data.

📝 Example:

Think of an API as a waiter:

You tell the waiter (API) your order
The waiter talks to the kitchen (server)
Your food (response) is served

💡 Tip:

APIs are the middlemen that connect frontend and backend.

📥 HTTP Methods (Types of API Requests)

Method	Action	📝 Example
GET	Read	View order status on app
POST	Create	Place a new pizza order
PUT	Update	Change your address
DELETE	Remove	Cancel a placed order

💡 Tip:

Just remember: CRUD = Create, Read, Update, Delete → POST, GET, PUT, DELETE

📡 What is a REST API?

REST (Representational State Transfer) is an architectural style that uses standard HTTP methods to access and manipulate resources. It is stateless and scalable.

📝 Example:

GET /books → list all books
GET /books/1 → book with ID 1
POST /books → create a new book

💡 Tip:

REST is like organized shelves in a library — you ask for a book using its location.

🔐 HTTP vs HTTPS

Protocol	Security Status	📝 Example
HTTP	Not Secure	Like shouting a password in public
HTTPS	Secure (Encrypted)	Like whispering in private

💡 Tip:

Always use HTTPS for login, payments, or personal data. It's your online seatbelt.

🔢 HTTP Status Codes

Category	Code Range	Meaning	📝 Example
1XX	100–199	Informational	"Processing your request"
2XX	200–299	Success	"Here's your data!"
3XX	300–399	Redirection	"Page moved"
4XX	400–499	Client Error	"Page not found (404)"
5XX	500-599	Server Error	"Server crashed (500)"

💡 Tip:

If you get 404 → You made a mistake. If it’s 500 → Server made the mistake.

🔗 URI, URL, URN – What’s the Difference?

📘 Definitions:

URI: A string that identifies a resource
URL: A URI with access method and location (http://)
URN: A URI with a resource name (not its location)

Term	Description	📝 Example
URI	Generic resource ID	/api/users/101
URL	Location to access URI	https://app.com/api/users/101
URN	Resource name only	urn:isbn:978-3-16-148410-0

📝 Analogy:

URI: A contact in your phone
URL: Their full address
URN: Their Aadhaar or PAN number

💡 Tip:

All URLs and URNs are URIs. An URI can be URN or it can be URL, but not both.

👨‍💻 Setting up React + JavaScript

📘 What is JavaScript?

JavaScript is a programming language that runs in browsers and makes websites interactive.

📝 Example:

When you click "Add to Cart" and it instantly updates – that's JavaScript

💡 Tip:

HTML builds the structure, CSS styles it, and JavaScript brings it to life.

🛠️ Engines that Run JS

Engine	Used In
V8	Chrome, Node.js
SpiderMonkey	Firefox

⚙️ JavaScript in Action

Try this in browser console:

console.log("Hello World");
alert("Welcome!");
clear();

🧰 Tools for Frontend Dev

📘 Why VS Code?

Lightweight, open-source, and highly customizable
Preferred by most frontend developers

❌ Why not IntelliJ / PyCharm (Community)?

Limited frontend features
Slower setup for React/JavaScript

💻 First JS Program

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First JS</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
<script>
  console.log("Hello World from JS");
</script>
</html>

📂 Structure of a JavaScript File

📘 Explanation:

JavaScript files contain statements, not HTML tags
JS is written inside <script> tags
Scripts can be placed in <head> or after <body>.

📝 Difference:

If placed in <head>, the script runs before the DOM(Document Object Model, as of now think this a HTML) is loaded, which can cause errors if it tries to access elements that aren’t loaded yet
If placed after <body>, it ensures the HTML is fully loaded before JS runs

✅ Best Practice:

Always place your script just before the closing </html> tag or use defer in <script> tag in <head>

<script src="index.js" defer></script>

💡 Tip:

Let HTML load first → then run JavaScript

🔌 External vs Inline JS

📘 Explanation:

Inline JS is written directly in HTML
External JS is in a .js file and linked via <script src="">

💡 Tip:

Keep logic in external files to separate concerns and keep code clean.

📝 JS Comments

// Single-line comment
/* Multi-line comment */
/**
 * Doc-style comment
 * Use jsdoc.app for documentation
 * Refer web to learn more about Doc-style comments
 */

✅ Summary

Today we covered:

How the web works
Client-server architecture
APIs and REST principles
HTTP methods and status codes
Differences between URI, URL, and URN
JavaScript setup and first steps with React

Stay tuned for Day 2 as we dive deeper into real coding with Spring Boot and build our first RESTful endpoint!

🧠 Follow more at: Ravindranath Porandla Blog

— Ravindranath Porandla 🧑‍💻

Day 1 of Spring Boot + React Mastery: Web, APIs & JavaScript Basics Simplified

Table of contents

🌐 How the Web Works

📝 Simple Example:

💡 Tip:

🧑‍💻 What is Client-Server?

📝 Example:

💡 Tip:

🔌 What is an API?

📝 Example:

💡 Tip:

📥 HTTP Methods (Types of API Requests)

💡 Tip:

📡 What is a REST API?

📝 Example:

💡 Tip:

🔐 HTTP vs HTTPS

💡 Tip:

🔢 HTTP Status Codes

💡 Tip:

🔗 URI, URL, URN – What’s the Difference?

📘 Definitions:

📝 Analogy:

💡 Tip:

👨‍💻 Setting up React + JavaScript

📘 What is JavaScript?

📝 Example:

💡 Tip:

🛠️ Engines that Run JS

⚙️ JavaScript in Action

🧰 Tools for Frontend Dev

📘 Why VS Code?

❌ Why not IntelliJ / PyCharm (Community)?

💻 First JS Program

📂 Structure of a JavaScript File

📘 Explanation:

📝 Difference:

✅ Best Practice:

💡 Tip:

🔌 External vs Inline JS

📘 Explanation:

💡 Tip:

📝 JS Comments

✅ Summary

Subscribe to my newsletter

Ravindranath Porandla

Ravindranath Porandla