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
];
}
2Cài đặt NodeJ
export default function CreateUser[] {
return [
Create User
];
}
3Tạo ứng dụng ReactJS
export default function CreateUser[] {
return [
Create User
];
}
4npx 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
];
}
6Cậ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
-
List Users
-
Create User
];
}
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
];
}
7export default function CreateUser[] {
return [
Create User
];
}
1Và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
];
}
2Và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
];
}
8Bâ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
];
}
4Và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
];
}
5Và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
];
}
6Và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
];
}
0Và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
];
}
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
export default function ListUser[] {
return [
List Users
];
}
2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
export default function ListUser[] {
return [
List Users
];
}
3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
export default function ListUser[] {
return [
List Users
];
}
4Và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
];
}
5Và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
];
}
6Và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
];
}
7Và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
];
}
8Và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
];
}
9Và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
];
}
0Và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
];
}
1Và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