React & Spring: Build Full-Stack Apps

Explore back-end development with Spring Boot for REST APIs and SQL/NoSQL databases, and front-end mastery with React, including components, state, props, and routing.

Explore the model-view-controller pattern in a full-stack with Spring handling models and controllers, and React managing the views, outlining the project structure and where logic resides.

Select an ideal IDE for Java and JavaScript development, with Visual Studio Code, and install the Java Development Kit 1.8+, Maven, and Java Extension Pack on Windows or Mac.

Install postman, create an account, and test api endpoints (get, post, put, delete) with headers and body. Use code snippets for Java or JavaScript to integrate calls into your app.

Install node.js and npm, verify npm version, then initialize a React client inside the crm project using npm create react app to create a client folder with a source directory.

Create a new spring boot project via the initializer, select maven and dependencies (Rest repositories, JPA, H2, Lombok), then unzip, open in an IDE, and run the server.

Learn how to set up spring with JPA—the Java Persistence API—for persisting objects in an SQL database, while you can also use MongoDB, Redis, or other databases via Spring Data.

Define the first model class for the CRM: a contact entity with id, first name, last name, and email, using JPA annotations and Lombok data, ready for repository integration.

Create a JPA repository to connect a new model with Spring's CrudRepository. Define contact repository as an interface extending CrudRepository<Contact, ID> to link the model and its primary key.

Preload the initial model by using a demo loader that runs on startup with a command line runner to seed a contact repository, testing the server and database connection.

Create React and Spring data Rest application.java in the model folder, add a main function to run the Spring Boot server, and set the rest base path to /api.

Explore how Spring auto generates endpoints and test a post endpoint with Postman to add contacts to the backend via JSON payloads.

Test the get endpoint with Postman to retrieve the contacts list as an array of people. Use the get method in React with the same url and send the request.

Learn how to fetch a single person by id in a Spring and React full-stack app, by appending the id to the URL and using code samples for get requests.

Learn to use put and delete endpoints to update and remove contacts by leveraging the self href URL from the contact list, testing with Postman, and ensuring json payloads.

Start the react frontend in the client folder, build a contacts component, and manage an array of contacts in state to render a backend-driven list.

Add Materialize styling by loading the Materialize CDN and icon scripts, then update app.js with a container fluid layout, a nav wrapper, and a centered brand logo for contacts.

Fetch contacts on mount, render each item with a single contact component, and show an add-contact form at the top while syncing data via state from localhost:8080/api/contacts.

Connect the add contact form to the server by implementing an onsubmit function that builds a contact object from form refs and posts it via fetch to localhost:8080/api/contacts, handling response.

Add a cors-enabled server controller to allow cross-origin requests from port 3000, map the api, and configure localhost access, while fixing class to className in the client.

Finish the contacts controller to expose get and post mappings through the contact repository, return all contacts, and verify the full-stack app with a React frontend and Spring backend.

Master state management with React's Context API to share data like contacts across components, fetch from a Spring backend, and integrate it into your full-stack apps.