React là một thư viện JavaScript front-end mã nguồn mở và miễn phí để xây dựng giao diện người dùng dựa trên các thành phần UI. Nó được duy trì bởi Meta và cộng đồng các nhà phát triển và công ty riêng lẻ. React có thể được sử dụng làm cơ sở trong việc phát triển các ứng dụng di động hoặc trang đơn. Đây là trang web chính thức của ReactJs https. //reacjs. tổ chức/

Để tạo ứng dụng phản ứng, bạn cần có Node >= 14. 0. 0 và npm >= 5. 6 trên máy của bạn

NodeJs và NPM là gì?

Nút. js là môi trường thời gian chạy JavaScript mã nguồn mở, đa nền tảng, back-end chạy trên công cụ V8 và thực thi mã JavaScript bên ngoài trình duyệt web. Bạn có thể tải xuống từ trang web chính thức của NodeJs. https. //nodejs. tổ chức/vi/. NPM sẽ được cài đặt cùng với NodeJs. NPM là trình quản lý gói mặc định cho môi trường thời gian chạy JavaScript NodeJs

Homebrew là gì?

Đối với mac bạn cũng có thể dùng Homebrew để cài vào máy. Homebrew là một hệ thống quản lý gói phần mềm nguồn mở và miễn phí giúp đơn giản hóa việc cài đặt phần mềm trên hệ điều hành của Apple, macOS, cũng như Linux. Cái tên nhằm gợi mở ý tưởng xây dựng phần mềm trên Mac tùy theo sở thích của người dùng. đây là trang web chính thức https. // ủ. sh/

Cài đặt Homebrew

export default function CreateUser() {
  return (
      
Create User
  );
}

Cài đặt NodeJ

export default function CreateUser() {
  return (
      
Create User
  );
}

Tạo ứng dụng ReactJS

export default function CreateUser() {
  return (
      
Create User
  );
}

npx không phải lỗi đánh máy — đó là một công cụ chạy gói đi kèm với npm 5. 2+

Tạo ứng dụng React không xử lý logic phụ trợ hoặc cơ sở dữ liệu; . Về cơ bản, nó sử dụng Babel và webpack, nhưng bạn không cần biết gì về chúng

Chạy ứng dụng phản ứng

cd react-crud
npm start

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ hãy truy cập vào liên kết sau, bạn sẽ có thể thấy ReactApp đang chạy.
______05

Để tạo API RestFul, chúng tôi sẽ cần PHP, MYSQL và Apache. Bạn có thể tự do cài đặt từng phần mềm riêng biệt và định cấu hình chúng hoặc sử dụng ứng dụng xếp chồng lên nhau. Trong trường hợp của tôi, tôi sẽ sử dụng MAMP (Mac Apache MySQL PHP) được thiết kế cho mac và đi kèm với tất cả các phần mềm cần thiết

PHP là gì?

PHP là ngôn ngữ kịch bản phía máy chủ có mục đích chung nguồn mở, đặc biệt phù hợp với phát triển web. Ban đầu nó được tạo ra bởi lập trình viên người Canada gốc Đan Mạch Rasmus Lerdorf vào năm 1994. Việc triển khai tham chiếu PHP hiện do Nhóm PHP sản xuất

MySQL là gì?

MySQL là một hệ thống quản lý cơ sở dữ liệu quan hệ mã nguồn mở. Tên của nó là sự kết hợp giữa “My”, tên con gái của người đồng sáng lập Michael Widenius và “SQL”, từ viết tắt của Structured Query Language

Apache là gì?

Máy chủ HTTP Apache là một phần mềm máy chủ web đa nền tảng miễn phí và mã nguồn mở, được phát hành theo các điều khoản của Giấy phép Apache 2. 0. Apache được phát triển và duy trì bởi một cộng đồng mở gồm các nhà phát triển dưới sự bảo trợ của Quỹ phần mềm Apache

Ứng dụng xếp chồng lên nhau

WAMP cho Windows
https. //www. máy chủ. com/vi/
ĐÈN dành cho Linux
https. //bitnami. com/stack/lamp/installer
MAMP dành cho Mac
https. //www. cái lược. info/en/mac/
XAMPP. Nguồn mở, Đa nền tảng
https. //www. apachefriends. tổ chức/chỉ mục. html

Tuyệt vời bây giờ tất cả chúng ta đã sẵn sàng để bắt đầu. Mở dự án của bạn tới trình chỉnh sửa mã yêu thích của bạn trong trường hợp của tôi, tôi đang sử dụng Visual Studio Code

Tạo liên kết và xử lý định tuyến trong React. cài đặt gói Reac-router-dom

Tạo các thành phần thư mục mới trong thư mục src/ của bạn và tạo 3 thành phần mới mà chúng tôi sẽ sớm cập nhật.
src/components/ListUser. js

export default function ListUser() {
  return (
      
List Users
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

src/thành phần/Tạo người dùng. js

export default function CreateUser() {
  return (
      
Create User
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

src/thành phần/Người dùng cập nhật. js

export default function UpdateUser() {
  return (
      
Update User
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ, hãy cài đặt bộ định tuyến phản ứng để tạo liên kết và định cấu hình tuyến đường

export default function CreateUser() {
  return (
      
Create User
  );
}

Cập nhật ứng dụng. js để xử lý định tuyến

import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import './App.css';
import CreateUser from './components/CreateUser';
import EditUser from './components/EditUser';
import ListUser from './components/ListUser';
function App() {
  return (
    

      
React CRUD operations using PHP API and MySQL
      
        
        
          } />
          } />
          } />
        
      
    
  );
}
export default App;

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tạo cơ sở dữ liệu trong PHPMyAdmin và thiết kế form trong React Component

export default function CreateUser() {
  return (
      
Create User
  );
}

export default function CreateUser() {
  return (
      
Create User
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cập nhật src/thành phần/Tạo người dùng. js

export default function CreateUser() {
  return (
      
Create User
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tạo API PHP và sử dụng bằng cách sử dụng axios. xử lý sự cố CORS trên localhost

Cài đặt axios để thực hiện lệnh gọi API từ ReactJs

export default function CreateUser() {
  return (
      
Create User
  );
}

Bây giờ hãy cập nhật src/components/CreateUser của bạn. js để thực hiện lệnh gọi POST API

export default function CreateUser() {
  return (
      
Create User
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tạo tệp PHP để viết API và đặt tên là chỉ mục. php

export default function CreateUser() {
  return (
      
Create User
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Lưu ý ở trên cùng, chúng tôi đã thêm các tiêu đề để giải quyết vấn đề CORS.
Ngoài ra, hãy tạo. htaccess để xử lý các URL đẹp như PHP lumen framework và thêm dòng sau vào bên trong.

export default function CreateUser() {
  return (
      
Create User
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hoola, cuối cùng tệp API của chúng ta đã sẵn sàng

Kết nối cơ sở dữ liệu MySQL bằng PDO. Truy cập dữ liệu biểu mẫu React và Lưu trong Cơ sở dữ liệu

Bây giờ, hãy tạo một tệp kết nối cơ sở dữ liệu và đặt tên là DbConnect. php và thêm đoạn mã sau vào bên trong. Cập nhật thông tin đăng nhập theo thông tin đăng nhập của bạn và nó sẽ kết nối với cơ sở dữ liệu của bạn bằng PDO (Đối tượng dữ liệu PHP)

export default function ListUser() {
  return (
      
List Users
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tạo POST API

export default function ListUser() {
  return (
      
List Users
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

export default function ListUser() {
  return (
      
List Users
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

export default function ListUser() {
  return (
      
List Users
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

export default function ListUser() {
  return (
      
List Users
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tạo GET PHP API và sử dụng trong React bằng axios. Danh sách trong thành phần bảng phản ứng

Cập nhật src/thành phần/ListUser. js

export default function ListUser() {
  return (
      
List Users
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cập nhật chỉ mục. php để thêm API GET mới để có được tất cả người dùng

export default function ListUser() {
  return (
      
List Users
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tải chi tiết người dùng để chỉnh sửa biểu mẫu và tạo PHP PUT API để cập nhật dữ liệu người dùng

Cập nhật src/thành phần/UpdateUser. js

export default function ListUser() {
  return (
      
List Users
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cập nhật phương thức get để trả về chi tiết người dùng cụ thể theo ID

export default function ListUser() {
  return (
      
List Users
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ hãy tạo API cập nhật để Xử lý yêu cầu PUT

export default function ListUser() {
  return (
      
List Users
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tạo API XÓA PHP, sử dụng nó bằng cách sử dụng axios và xóa người dùng khỏi cơ sở dữ liệu

Cập nhật src/thành phần/ListUser. js

export default function CreateUser() {
  return (
      
Create User
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cập nhật chỉ mục. php lại để viết API xóa

export default function CreateUser() {
  return (
      
Create User
  );
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tuyệt vời, bạn vừa hoàn thành REACT-CRUD bằng PHP và MySQL, Bây giờ hãy chạy ứng dụng của bạn và xây dựng một thứ gì đó thật đẹp

React có tốt với PHP không?

Tôi có thể sử dụng React cho giao diện người dùng và PHP cho phụ trợ không?