Membina Aplikasi Web Responsif dengan React dan Java Spring Boot

Mencipta aplikasi web responsif adalah penting dalam dunia hari ini di mana pengguna mengakses tapak web daripada pelbagai peranti dan saiz skrin. Menggabungkan keupayaan bahagian hadapan React yang berkuasa dengan rangka kerja bahagian belakang Java Spring Boot yang mantap, anda boleh membina aplikasi web berskala dan responsif yang memberikan pengalaman pengguna yang luar biasa.

Mengapa Gunakan React dan Spring Boot?

• React: Pustaka JavaScript yang popular untuk membina antara muka pengguna, React membenarkan penciptaan komponen UI boleh guna semula, menjadikannya mudah untuk membangunkan aplikasi web dinamik dan interaktif. Seni bina berasaskan komponen React dan DOM maya menjadikannya sangat cekap dan berskala.

• Spring Boot: Rangka kerja yang memudahkan pembangunan aplikasi back-end berasaskan Java, Spring Boot menyediakan sokongan infrastruktur yang komprehensif untuk membangunkan perkhidmatan mikro. Ia menawarkan alat yang berkuasa untuk konfigurasi, suntikan pergantungan dan keselamatan, antara ciri lain.

Menyediakan Persekitaran Pembangunan Anda
Untuk bermula, anda perlu menyediakan persekitaran pembangunan anda dengan Node.js untuk React dan JDK untuk Spring Boot.

1. Pasang Node.js dan npm:
2. Muat turun dan pasang Node.js daripada tapak web rasmi.

3. Sahkan pemasangan dengan menjalankan nod -v dan npm -v dalam terminal anda.

4. Pasang Java dan Spring Boot:

5. Muat turun dan pasang JDK daripada tapak web rasmi.

6. Pasang Spring Boot CLI dengan mengikut arahan pada tapak web Spring Boot.

Membuat React Front-End
Mulakan dengan mencipta projek React baharu menggunakan Create React App, alat yang menyediakan persekitaran pembangunan web moden tanpa konfigurasi.

npx create-react-app my-react-app
cd my-react-app
npm start

Ini akan mencipta aplikasi React baharu dan memulakan pelayan pembangunan. Anda kini boleh mula membina komponen UI responsif anda.

Membina Komponen Responsif:
React memudahkan untuk membuat komponen responsif menggunakan perpustakaan CSS-dalam-JS seperti komponen gaya atau dengan terus menggunakan pertanyaan media CSS.

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  display: flex;
  flex-direction: column;
  padding: 20px;

  @media (min-width: 768px) {
    flex-direction: row;
  }
`;

const Item = styled.div`
  flex: 1;
  margin: 10px;
`;

function App() {
  return (
    <Container>
      <Item>Item 1</Item>
      <Item>Item 2</Item>
      <Item>Item 3</Item>
    </Container>
  );
}

export default App;

Mencipta Spring Boot Back-End

Buat projek Spring Boot baharu menggunakan Spring Initializr. Pilih kebergantungan yang diperlukan seperti Spring Web, Spring Data JPA dan sebarang penyambung pangkalan data seperti MySQL atau PostgreSQL.

1. Mulakan Projek:
2. Lawati Spring Initializr.
3. Pilih metadata dan kebergantungan projek anda.

4. Jana dan muat turun projek.

5. Sediakan Aplikasi:

6. Ekstrak projek yang dimuat turun dan bukanya dalam IDE pilihan anda. Konfigurasikan sifat aplikasi untuk menyambung ke pangkalan data anda.
   

# src/main/resources/application.yml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mydatabase
    username: root
    password: password
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true

1. Buat Titik Akhir RESTful: Cipta pengawal REST mudah untuk mengendalikan permintaan daripada bahagian hadapan React.

@RestController
@RequestMapping("/api/products")
public class ProductController {

    @Autowired
    private ProductRepository productRepository;

    @GetMapping
    public List<Product> getAllProducts() {
        return productRepository.findAll();
    }

    @PostMapping
    public Product createProduct(@RequestBody Product product) {
        return productRepository.save(product);
    }
}

1. Tentukan Entiti Produk dan Repositori:

@Entity
public class Product {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private double price;

    // Getters and setters
}

public interface ProductRepository extends JpaRepository<Product, Long> {
}

Mengintegrasikan React dengan Spring Boot
Untuk menyepadukan bahagian hadapan React dengan bahagian belakang Spring Boot, anda boleh menggunakan Axios atau Fetch API untuk membuat permintaan HTTP ke titik akhir REST Spring Boot.

1. Pasang Axios dalam React:

npm install axios

1. Ambil Data daripada Spring Boot:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios.get('/api/products')
      .then(response => setProducts(response.data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h1>Product List</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name} - ${product.price}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Menggunakan Aplikasi

Setelah aplikasi anda sedia, anda perlu menggunakan aplikasi itu. Terdapat beberapa pilihan untuk menggunakan aplikasi React dan Spring Boot, seperti:

• Heroku: Platform awan yang menyokong penggunaan kedua-dua aplikasi bahagian hadapan dan bahagian belakang.
• AWS: Gunakan perkhidmatan seperti Elastic Beanstalk, S3 dan RDS untuk penyelesaian penggunaan berskala.
• Docker: Simpan aplikasi anda untuk penggunaan mudah dan kebolehskalaan.

Kesimpulan

Membina aplikasi web responsif dengan React dan Java Spring Boot memanfaatkan kekuatan kedua-dua teknologi untuk mencipta penyelesaian yang berkuasa dan berskala. Fleksibiliti dan kecekapan React dalam mencipta antara muka pengguna yang dinamik, digabungkan dengan keupayaan back-end teguh Spring Boot, membolehkan pembangun membina aplikasi web moden yang boleh memenuhi keperluan pengguna yang pelbagai. Dengan mengikuti amalan terbaik dan memanfaatkan rangka kerja yang berkuasa ini, anda boleh menyampaikan aplikasi web yang berkualiti tinggi dan responsif yang memberikan pengalaman pengguna yang sangat baik.

Atas ialah kandungan terperinci Membina Aplikasi Web Responsif dengan React dan Java Spring Boot. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!