react spring boot
1.0.0
Dibuat pada: 11-04-2020
Terakhir Diperbarui pada: 10-09-2021 oleh Jordy Coder
Kontributor:
Jeffrey SPAAN (pengembang tumpukan penuh @ CodeBean)
Jordy Hamwijk (pengembang tumpukan penuh @ CodeBean)
Selamat datang pengembang. Ini adalah tutorial pertama dalam mengembangkan aplikasi web pertama Anda dengan React dan Spring Boot.
Bergerak maju, kami akan menggunakan repositori ini sebagai titik awal untuk repositori lebih lanjut yang akan kami posting di sini di GitHub.
Dalam tutorial ini kita akan membahas dasar -dasarnya dan mengatur frontend bereaksi dengan backend boot musim semi.
React adalah pustaka JavaScript open-source yang digunakan untuk membangun antarmuka pengguna khusus untuk aplikasi satu halaman.
Ini digunakan untuk menangani lapisan tampilan untuk aplikasi web dan seluler. Bereaksi juga memungkinkan kita untuk membuat komponen UI yang dapat digunakan kembali.
Penggunaan komponen UI memudahkan pengembangan dan mengurangi waktu pengembangan aplikasi Anda.
Spring Boot adalah kerangka kerja berbasis Java yang digunakan untuk membuat layanan mikro.
Mengkonfigurasi backend aplikasi Anda disederhanakan dengan penggunaan dependensi boot pegas yang memungkinkan Anda untuk hanya memilih dependensi yang diperlukan untuk dengan cepat mengatur backend aplikasi Anda.
Omong -omong, mari kita mulai dengan membuat backend kita segera.
Di browser Anda, buka: https://start.spring.io
Maven ProjectJava2.2.6nl.codebeanreact-spring-bootReact and Spring Boot TutorialJAR8Spring Web Untuk membuat aplikasi boot Spring yang telah dihasilkan sebelumnya, klik: Hasilkan
File zip diunduh di hard-drive Anda. Buka file zip dan ekstrak folder proyek.
Buka folder proyek di IDE favorit Anda.
Model objek proyek atau POM adalah unit pekerjaan mendasar di Maven.
Ini adalah file XML yang berisi informasi tentang proyek dan detail konfigurasi yang digunakan oleh Maven untuk membangun proyek.
Daftar berikut menunjukkan file POM.xml yang dibuat saat Anda memilih proyek Maven:
<? xml version = " 1.0 " encoding = " UTF-8 " ?>
< project xmlns = " http://maven.apache.org/POM/4.0.0 " xmlns : xsi = " http://www.w3.org/2001/XMLSchema-instance "
xsi : schemaLocation = " http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd " >
< modelVersion >4.0.0</ modelVersion >
< parent >
< groupId >org.springframework.boot</ groupId >
< artifactId >spring-boot-starter-parent</ artifactId >
< version >2.2.6.RELEASE</ version >
< relativePath /> <!-- lookup parent from repository -->
</ parent >
< groupId >nl.codebean</ groupId >
< artifactId >react-spring-boot</ artifactId >
< version >0.0.1-SNAPSHOT</ version >
< name >react-spring-boot</ name >
< description >React and Spring Boot Tutorial</ description >
< properties >
< java .version>1.8</ java .version>
</ properties >
< dependencies >
< dependency >
< groupId >org.springframework.boot</ groupId >
< artifactId >spring-boot-starter-web</ artifactId >
</ dependency >
< dependency >
< groupId >org.springframework.boot</ groupId >
< artifactId >spring-boot-starter-test</ artifactId >
< scope >test</ scope >
< exclusions >
< exclusion >
< groupId >org.junit.vintage</ groupId >
< artifactId >junit-vintage-engine</ artifactId >
</ exclusion >
</ exclusions >
</ dependency >
</ dependencies >
< build >
< plugins >
< plugin >
< groupId >org.springframework.boot</ groupId >
< artifactId >spring-boot-maven-plugin</ artifactId >
</ plugin >
</ plugins >
</ build >
</ project > Mari kita tambahkan layanan untuk membuat output aplikasi beberapa data.
Untuk melakukannya, tambahkan controller bernama: GreetController.java
Simpan pengontrol di src/main/java/nl/codebean/reactspringboot/GreetController.java
package nl . codebean . reactspringboot ;
import org . springframework . web . bind . annotation . RequestMapping ;
import org . springframework . web . bind . annotation . RestController ;
@ RestController
public class GreetController {
@ RequestMapping ( "/api/greet" )
public String greet () {
return "Greetings from CodeBean!" ;
}
} @RestController : Ini adalah anotasi boot musim semi yang menandai kelas sebagai pengontrol;
@RequestMapping : Ini adalah anotasi boot musim semi yang memetakan "/api/greet" ke metode greet() ; Saat dipanggil dari browser atau dengan menggunakan Curl pada baris perintah, metode ini mengembalikan teks saja. Itu karena @RestController menggabungkan @Controller dan @ResponseBody , dua anotasi yang menghasilkan permintaan web kembali data daripada tampilan.
Sekarang mari kita jalankan aplikasi di terminal.
Untuk memulai aplikasi, buka terminal perintah dan jalankan tugas berikut (ditunjukkan dengan outputnya):
Dalam tutorial ini, perintah terminal ditandai dengan> di depan perintah asli.
> mvn spring-boot:run
2020-04-12 10:42:20.303 INFO 2232 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http)
2020-04-12 10:42:20.311 INFO 2232 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat]
2020-04-12 10:42:20.312 INFO 2232 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.33]
2020-04-12 10:42:20.378 INFO 2232 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext
2020-04-12 10:42:20.378 INFO 2232 --- [ main] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 896 ms
2020-04-12 10:42:20.503 INFO 2232 --- [ main] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService 'applicationTaskExecutor'
2020-04-12 10:42:20.610 INFO 2232 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path ''
2020-04-12 10:42:20.612 INFO 2232 --- [ main] n.c.r.ReactSpringBootApplication : Started ReactSpringBootApplication in 1.444 seconds (JVM running for 1.78) Setelah aplikasi dimulai, mari kita jalankan layanan (di terminal perintah terpisah). Jalankan tugas berikut (ditampilkan dengan outputnya):
> curl http://localhost:8080/api/greet
Greetings from CodeBean! Kerja bagus! Layanan REST Spring Boot sekarang sudah berjalan dan berjalan.
Mari kita lanjutkan dengan mendapatkan data backend ke frontend.
Sekarang kita akan membangun frontend menggunakan perpustakaan JavaScript yang disebut React.
Di frontend kami dapat mengambil data yang dihasilkan oleh backend. Mari kita mulai!
> npx create-react-app frontend
Creating a new React app in ../react-spring-boot/frontend
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
Installing template dependencies using npm...
Removing template package using npm...
Success! Created frontend at ../react-spring-boot/frontend
We suggest that you begin by typing:
cd frontend
npm startInstruksi jelas, mari terus melakukannya (ditunjukkan dengan outputnya):
> cd frontend
> npm start
Compiled successfully!
You can now view frontend in the browser.
Local: http://localhost:3000
Buka browser Anda dan buka http: // localhost: 3000 untuk melihat aplikasi bereaksi .
Seharusnya terlihat seperti ini:
Tugas kami berikutnya adalah menampilkan data API dari backend (sisi server) di frontend (sisi klien) .
Backend berjalan di port 8080 http://localhost:8080
Frontend berjalan di port 3000 http://localhost:3000
Kedua port sekarang berjalan bersama satu sama lain tanpa interkonektivitas. Untuk mengizinkan akses baca dan tulis dari port frontend ke port backend, kita perlu mengatur proxy yang memungkinkan transfer data.
Ini diselesaikan dengan menambahkan bidang proxy ke file frontend/package.json Anda yang memungkinkan port 3000 untuk mentransfer data dari/ke port 8080 .
"proxy" : " http://localhost:8080 " , File frontend/package.json Anda sekarang harus terlihat seperti ini:
{
"name" : " frontend " ,
"version" : " 0.1.0 " ,
"private" : true ,
"dependencies" : {
"@testing-library/jest-dom" : " ^4.2.4 " ,
"@testing-library/react" : " ^9.5.0 " ,
"@testing-library/user-event" : " ^7.2.1 " ,
"react" : " ^16.13.1 " ,
"react-dom" : " ^16.13.1 " ,
"react-scripts" : " 3.4.1 "
},
"scripts" : {
"start" : " react-scripts start " ,
"build" : " react-scripts build " ,
"test" : " react-scripts test " ,
"eject" : " react-scripts eject "
},
"proxy" : " http://localhost:8080 " ,
"eslintConfig" : {
"extends" : " react-app "
},
"browserslist" : {
"production" : [
" >0.2% " ,
" not dead " ,
" not op_mini all "
],
"development" : [
" last 1 chrome version " ,
" last 1 firefox version " ,
" last 1 safari version "
]
}
} Untuk mempelajari lebih lanjut tentang Proxying API Permintaan, lihat Dokumentasi Buat Aplikasi React.
Mari kita uji jika kita sekarang dapat mengakses data dari frontend juga.
Pertama, restart frontend Anda. Untuk menghentikan sesi saat ini, ketik Ctrl + C di jendela terminal IDE Anda.
Setelah frontend dimulai ulang, buka jendela terminal baru dan ketik perintah berikut (ditunjukkan dengan outputnya):
> curl http://localhost:3000/api/greet
Greetings from CodeBean! Kami hampir sampai. Kami sekarang akan mengambil data dari backend untuk ditampilkan di frontend.
Buka folder /frontend/src Anda. Tambahkan folder bernama components .
Di folder components , tambahkan file bernama Greet.js
Menurut praktik terbaik React, folder komponen akan berisi semua file yang bertindak sebagai komponen.
Menurut praktik terbaik React, nama -nama komponen akan dimulai dengan huruf kapital.
Struktur folder Anda /src sekarang akan terlihat seperti ini:
.
├─ ...
├─ components
│ └─ Greet.js
└─ ...
Tambahkan kode berikut ke file Greet.js Anda.
import React , { useState , useEffect } from 'react' ;
const Greet = ( ) => {
const [ greet , setGreet ] = useState ( "" ) ;
async function fetchData ( ) {
let res = await fetch ( '/api/greet' ) ;
let greet = await res . text ( )
setGreet ( greet ) ;
}
useEffect ( ( ) => {
fetchData ( ) ;
} , [ ] ) ;
return (
< div >
< h4 > { greet } </ h4 >
</ div >
)
}
export default Greet ; Sekarang buka file App.js Anda, terletak di folder /frontend/src .
Di sini kita akan mengimpor komponen Greet.js dengan menambahkan import Greet from './components/Greet'; dan <Greet /> ke file App.js
Kode Anda akan terlihat seperti ini:
import React from 'react' ;
import logo from './logo.svg' ;
import './App.css' ;
import Greet from './components/Greet' ;
function App ( ) {
return (
< div className = "App" >
< header className = "App-header" >
< img src = { logo } className = "App-logo" alt = "logo" />
< p >
Edit < code > src/App.js </ code > and save to reload.
</ p >
< Greet />
< a
className = "App-link"
href = "https://reactjs.org"
target = "_blank"
rel = "noopener noreferrer"
>
Learn React
</ a >
</ header >
</ div >
) ;
}
export default App ;Frontend React Anda sekarang harus menampilkan teks dari API backend Anda.
Frontend React Anda sekarang terhubung dengan backend boot spring Anda yang memungkinkan aplikasi Anda mengambil dan menulis data dari/ke server Anda.
Saya harap Anda menikmati mengikuti tutorial ini, jangan lupa untuk memberikan bintang ini bintang ini.
Ikuti Universitas CodeBean di GitHub dan dapatkan diperbarui dengan tutorial baru yang menarik.
Dalam tutorial kami berikutnya, kami akan membuat aplikasi API Restful Spring Boot yang akan kami hubungkan dengan database PostgreSQL.
