CRUD - Spring Boot + ReactJS + API Rest + MySQL #1 Starter

Spring

Crear el proyecto spring en https://start.spring.io , selecciona Maven Project con lenjuaje Java 8 con la versión del Spring Boot 2.2.5 y de resto llena los datos como nombre y descripción, y 7 dependencias que vamos trabajar :

https://start.spring.io/#!type=maven-project&language=java&platformVersion=2.2.6.RELEASE&packaging=jar&jvmVersion=1.8&groupId=com.tutofox&artifactId=demo&name=demo&description=Demo%20project%20for%20Spring%20Boot%20and%20ReactJS&packageName=com.tutofox.demo&dependencies=devtools,web,thymeleaf,security,data-jpa,mysql,data-rest

Extrae el proyecto y abre en terminal y ejecuta el proyecto con el comando

sudo mvn spring-boot:run

En caso si no tiene maven entonces debe instalarlo con el comando (Linux)

sudo apt install maven

IDE

https://spring.io/tools

Configuracion de base de datos
src/main/resources/application.properties

spring.datasource.url=jdbc:mysql://localhost:3306/springboot
spring.datasource.username=artyom
spring.datasource.password=password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

Controller

Crear una carpeta llamado controllers y y luego un controllador HomeControllers.js

src/main/java/com/tutofox/app/controllers/HomeController.java

package com.tutofox.app.controllers;
 
import org.springframework.stereotype.Controller; 
import org.springframework.web.servlet.ModelAndView; 
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod; 

@Controller
public class HomeController {	
 
	 @RequestMapping(value= {"/home"}, method=RequestMethod.GET)
	 public ModelAndView home() {
		  ModelAndView model = new ModelAndView();  
		  model.setViewName("Home");
		  return model;
	 }	 
	 
}

Crear una vista html en la carpeta template Home.html

src/main/resources/templates/Home.html

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <title>ReactJS + Spring Data REST</title>
    <link rel="stylesheet" href="/main.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
</head>
<body>
	
	
	<h1 style="text-align:center;margin:20px;">
		React.js + React.js + MySQL <br> 
		<small>Developed by Artyom</small>
	</h1>
	 
</body>
</html>

React.js

Agregar dependecias de node npm y webpack en el pom.xlm dentro de puglin debajo de

<plugin>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>

.....

<!-- tag::frontend-maven-plugin[] -->
<plugin>
	<groupId>com.github.eirslett</groupId>
	<artifactId>frontend-maven-plugin</artifactId>
	<version>1.6</version>
	<configuration>
		<installDirectory>target</installDirectory>
	</configuration>
	<executions>
		<execution>
			<id>install node and npm</id>
			<goals>
				<goal>install-node-and-npm</goal>
			</goals>
			<configuration>
				<nodeVersion>v10.11.0</nodeVersion>
				<npmVersion>6.4.1</npmVersion>
			</configuration>
		</execution>
		<execution>
			<id>npm install</id>
			<goals>
				<goal>npm</goal>
			</goals>
			<configuration>
				<arguments>install</arguments>
			</configuration>
		</execution>
		<execution>
			<id>webpack build</id>
			<goals>
				<goal>webpack</goal>
			</goals>
		</execution>
	</executions>
</plugin>
<!-- end::frontend-maven-plugin[] -->

Crear un archivo llamado webpack.config.js en el proyecto

var path = require('path');

module.exports = {
    entry: './src/main/resources/js/app.js',
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        rules: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            }
        ]
    }
};

package.json

{
  "name": "spring-data-rest-and-reactjs",
  "version": "0.1.0",
  "description": "Demo of ReactJS + Spring Boot Data REST",
  "keywords": [
    "rest",
    "hateoas",
    "spring",
    "data",
    "react"
  ],
  "author": "Artyom Developer",
  "license": "Apache-2.0",
  "homepage": "https://github.com/spring-guides/tut-react-and-spring-data-rest",
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "rest": "^1.3.1"
  },
  "scripts": {
    "watch": "webpack --watch -d"
  },
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0"
  }
}

src/main/resources/js/app.js

require('./components/home');

src/main/js/components/home.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Home extends Component {
    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <div className="card">
                            
                            <div className="card-header">Employe</div>

                            <div className="card-body">This is component react.js</div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById('component-home')) {
    ReactDOM.render(<Home />, document.getElementById('component-home'));
}

src/main/resources/templates/Home.html

<div id="component"></div>
<script src="/built/bundle.js"></script>

Ejecutar de nuevo para instalar nueva dependencias

sudo mvn spring-boot:run

sudo npm run-script watch

Tutorial Part

AdBlock Detected

Hemos detectado que estás utilizando AdBlock Plus o algún otro software de bloqueo de anuncios que impide que la página se cargue por completo.

CRUD – Spring Boot + ReactJS + API Rest + MySQL #1 Starter

Spring

IDE

Controller

React.js

Tutorial Part

Acerca de Artyom

Deja una respuesta Cancelar la respuesta

AdBlock Detected

Hemos detectado que estás utilizando AdBlock Plus o algún otro software de bloqueo de anuncios que impide que la página se cargue por completo.

Spring

IDE

Controller

React.js

Tutorial Part

Entradas relacionadas

Tutorial Fullstack: React Typescript + Spring Boot + PostgreSQL

Tutorial Fullstack: React Typescript + Spring Boot + MySQL

Spring Boot JPA CRUD REST API

Acerca de Artyom

Deja una respuesta Cancelar la respuesta