Full Stack: React and Java Spring Boot - The Developer Guide

Explore how React builds modern single page applications that perform partial updates and connect the front end with a Spring Boot back end via REST API.

Set up your development environment for React and TypeScript by installing Visual Studio Code, Node, npm, and TSC, then use command line tools to compile code and build React apps.

Learn the fundamentals of React as a component-based framework for building single-page applications, covering components, state, props, hooks, and how the UI renders with JavaScript and HTML.

Discover how to bootstrap a React app with Vite, install Node.js, and run npm run dev to start a dev server with hot reloading and port 5100.

Explore how a React project boots up by mounting components into the index.html root div using main.jsx and createRoot, then rendering through app.jsx into the browser.

Render a dynamic list of to-do row items by mapping over props.to-dos, creating a to-do row for each item, and assigning a unique key to help React track changes.

Explore TypeScript basics and why it adds optional types to JavaScript, enabling IDE support and object‑oriented features, while serving as a superset that compiles to JavaScript for React development.

Set up Visual Studio Code, Node, and the TypeScript compiler. Create a simple TypeScript hello world file, compile with tsc, and run the JavaScript with Node to see hello world.

Define TypeScript variables with let, and explore boolean, number, and string types. Understand type safety, any usage, compile-time errors for mismatches, and use console.log and template strings.

Define and print boolean, number, and string variables in TypeScript. Use console.log with concatenation and template strings, then compile with tsc and run with node.

Explore TypeScript loops and arrays, using for loops, array indexing, and pushes to compute averages and print elements, including for-of syntax and conditional logic.

Write and run basic for loops in TypeScript, iterating a counter and an array of reviews, then compute an average with total and reviews.length.

Modify and run code that uses traditional and simplified for loops to iterate over arrays, apply conditionals, and manage a global array with push operations.

Create a TypeScript customer class with first and last name string properties, a constructor, and getters and setters; explore public, protected, and private access modifiers and compilation behavior.

Create a customer class with first and last name properties, instantiate and log the values, then add a constructor to initialize these fields and reproduce the same output.

Explore how to implement private properties in TypeScript using getter and setter accessors, including traditional methods and the get/set syntax, and configure TypeScript with tsconfig for S5 targets.

Define private properties and implement get and set accessors in TypeScript, fix compilation errors with no emit on error, and rename fields with underscores while generating accessors in the IDE.

Configure compiler options in a tsconfig.json file, generate a template with tsc --init, enable noEmitOnError, and compile with tsc to use the file's settings.

Explore parameter properties in TypeScript, a constructor shortcut that defines and assigns properties automatically, reducing boilerplate and simplifying class setup with private first name and last name.

Organize code with TypeScript modules by exporting a customer class in one file and importing it into a driver in another using dot slash relative paths.

Explore how TypeScript implements single inheritance with a shape hierarchy, overriding getInfo in circle and rectangle, using super calls and parameter properties to build polymorphic behavior.

Explore inheritance in TypeScript by creating a shape superclass with x and y, then circle subclass that extends it, uses parameter properties, calls super, and overrides info to include radius.

Demonstrates inheritance in TypeScript by pulling it all together with a driver that creates shape and circle instances, imports modules, and calls getInfo to show main app output.

Develop and extend a shape hierarchy by implementing a rectangle subclass, defining width and length, overriding the getInfo method, and wiring up inheritance in TypeScript.

Add array support for shapes by creating an array of shapes, pushing a shape, a circle, and a rectangle, and iterating to log each shape's info using inheritance.

Define abstract classes in TypeScript to model shapes with an abstract calculate area method; concrete subclasses like circle and rectangle provide specific area formulas.

Learn how to create an abstract class, declare an abstract method calculate area, and implement it in concrete shapes like rectangle and circle, then compile and run.

Explore how TypeScript interfaces define a method contract and properties, and how the cricket coach and the golf coach implement get daily workout to expose distinct routines.

Explore interfaces in TypeScript by defining a coach interface with get daily workout and implementing cricket coach and golf coach classes, then run a driver to output workouts.

Create a new React components folder and convert a JavaScript to-do app to TypeScript by adding type annotations and updating app.tsx, form, row item, and table components step by step.

Bootstrap is a free front end framework with packaged HTML, CSS, and JavaScript. Learn to set it up in index.html and use components like containers, buttons, cards, and progress bars.

Set up your development environment in VS Code, create a home.html, include bootstrap 5.0.2 starter template, and use live server for automatic reloading.

Discover how bootstrap containers control margins and layout with container and container-fluid, using size-specific classes like large, medium, small, and xl to adapt header text across screens.

Show how to build bootstrap buttons with the button tag and class button, using color variants, outline styles, sizes, and disabled states, plus margins and button groups for connected actions.

Implement bootstrap dropdowns by creating a dropdown container with a toggle button and a data-bs-toggle attribute. Populate the menu with three dropdown items inside an unordered list.

Explore building a Bootstrap card with header, body, title, text, and a primary button, then add a footer and muted timestamp to resemble a post card.

Learn how to implement bootstrap alerts, including primary, secondary, success, danger, warning, and info styles, with links using alert link and responsive behavior.

Learn how to implement Bootstrap spinners to indicate asynchronous actions in React apps, including spinner border and spinner grow styles, accessible status text, and a disabled loading button.

Explore Bootstrap progress bars by building a div with class progress and setting inner width to 75% to reflect progress. Enhance appearance with striped and animated options, noting responsiveness.

Learn to implement a bootstrap collapse using a button to reveal and hide content by connecting a toggle to a target element.

Learn to implement a Bootstrap accordion by building nested divs with classes for accordion, header, button, and collapse content, including an accordion body that expands and collapses on click.

Build a responsive bootstrap navigation bar that spans the width with a container fluid, brand, and nav items; enable active and disabled states and a collapsible menu for small screens.

Master how Bootstrap rows and columns create a 12-column grid, with rows spanning full width inside a container and responsive column sizing for different screen sizes.

Master nested Bootstrap rows and columns to dynamically divide a row, then place additional rows inside a column to create further subdivisions, gaining precise, responsive layout control.

Create bootstrap tables by applying classes like table, table-striped, and table-hover; explore bootstrap colors such as table-dark, table-danger, and table-success to enhance styling.

Learn to build and style bootstrap forms, including email inputs, text areas, and checkboxes, using form label, form control, and form check classes.

Master bootstrap modals by building the modal structure with header, body, and footer, wiring opening and dismissal with data-bs-toggle and data-bs-target, and applying the fade animation powered by Bootstrap JavaScript.

Learn to hide and show elements by screen width using bootstrap utilities, making content visible on medium and larger screens while hidden on small screens for mobile and desktop.

Explore a full stack React and Spring Boot library app, from the home page to search, book details and reviews, with user and admin loan management.