Yêu cầu

• Nút và một IDE được cài đặt trong máy của bạn.

React là một thư viện JavaScript front-end mã nguồn mở được tạo bởi Facebook vào năm 2013. React là một trong những thư viện JavaScript tốt nhất giúp các ứng dụng web nhanh hơn và hiệu quả với mã hóa tối thiểu.

Trong bài viết này, chúng ta hãy hiểu các nguyên tắc cơ bản của React và cách tạo một ứng dụng phản ứng.

Tại sao React? ❗️ ❗️

• Dễ học hơn - Vì react nổi tiếng và được nhiều ngành công nghiệp sử dụng nên có rất nhiều tài liệu, blog, bài báo và hướng dẫn về react. Vì vậy việc tự học sẽ dễ dàng hơn.
• Có JSX - JSX là sự kết hợp của HTML và JavaScript giúp việc viết mã dễ dàng hơn rất nhiều.
• Các thành phần có thể tái sử dụng - Trong phản ứng, chúng ta có thể chia mã của mình thành các thành phần có kích thước nhỏ hơn và sử dụng lại chúng nhiều lần. Nó sẽ giúp giảm cơ sở mã.

Bạn sẽ cần có Node> = 10.16 và npm> = 5.6 trên máy của mình.

Sau đó, mở dòng lệnh (CLI) và cài đặt create-react-app trên toàn cầu máy của bạn bằng cách sử dụng:

npm install -g create-react-app

Bây giờ để tạo ứng dụng phản ứng, tôi đang tạo một thư mục có tên là 'Phản ứng đầu tiên' và mở thiết bị đầu cuối trong thư mục đó. Sau đó nhập create-react-app <project name> vào thiết bị đầu cuối. Bạn có thể đặt bất kỳ tên nào làm tên dự án. Nhưng hãy chắc chắn rằng tên dự án không có chữ cái viết hoa, nếu không phản ứng sẽ tạo ra một lỗi.

Ứng dụng tạo -react này sẽ tạo ra một mẫu ứng dụng React.

Ngoài ra, bạn có thể sử dụng trực tiếp ứng dụng create-react mà không cần cài đặt. Sử dụng có thể sử dụng lệnh dưới đây:

npx create-react-app <project name>

npx là một lệnh chạy gói bao gồm trong npm.

Bây giờ chúng ta cần điều hướng đến thư mục dự án. Loại hìnhcd <project name>

Sau đó, để chạy loại ứng dụng phản ứngnpm start

Khi create-react-app tạo một mẫu mẫu, chúng tôi có thể chạy và xem ứng dụng mẫu.

Sau khi chạy thành công dự án, bạn sẽ nhận được một cái gì đó như thế này. Nó sẽ tự động khởi chạy ứng dụng phản ứng trong trình duyệt hoặc bạn có thể nhập thủ công http://localhost:3000/ vào trình duyệt của mình để mở ứng dụng.

Giải thích ngắn gọn về thư mục dự án

Nếu bạn đang sử dụng VSCode, chỉ cần gõ code . vào thư mục dự án để mở dự án trong VSCode.

package.json - Tệp này chứa các phần phụ thuộc và các tập lệnh cần thiết cho dự án.

package-lock.json - Điều này đảm bảo cài đặt nhất quán các phần phụ thuộc của chúng tôi

.gitignore - Các tệp chúng tôi cần bỏ qua khi thêm dự án vào GitHub. Chúng tôi cũng có thể thêm các tệp mà chúng tôi không muốn thêm vào GitHub theo cách thủ công.

README.md - Thông tin chi tiết về ứng dụng react (cách chạy, xây dựng, v.v.)

node_modules - Tất cả các phụ thuộc của chúng tôi đã được cài đặt.

public - các biểu tượng và hình ảnh được sử dụng trong mẫu phản ứng, index.html - Trang HTML duy nhất trong dự án.

src - Thư mục chúng tôi sử dụng nhiều nhất để phát triển.

i ndex.js - Chỉ định thành phần gốc (Ứng dụng) và phần tử DOM. Điều này được kết nối với index.html mà chúng tôi đã thấy trước đây

App.js - Chịu trách nhiệm về HTML hiển thị trên trình duyệt. Đại diện cho chế độ xem chúng ta thấy trong trình duyệt.

Tệp CSS - Chứa các thiết kế CSS.

Các khái niệm cơ bản bạn cần biết

JSX

JSX là một cú pháp giống như XML / HTML. bổ sung cú pháp XML / HTML vào JavaScript.

Thành phần

Trong một ứng dụng phản ứng, các thành phần là các khối xây dựng chính. Một nhóm các thành phần tạo nên một dự án phản ứng.

Tại đây, bạn có thể thấy trang này được tạo bằng 5 thành phần. (Header World, Country, Chart và Footer). Chúng tôi cũng có thể sử dụng lại đầu trang và chân trang trong bất kỳ trang nào khác.

Có 2 loại thành phần.

• Thành phần lớp
• Thành phần chức năng

Props là bất biến là một cách làm cho các thành phần trở nên động bằng cách chuyển các thuộc tính / dữ liệu xuống từ thành phần này sang thành phần khác. Nó chỉ đơn giản là chuyển một số thông tin của thành phần mẹ sang thành phần con.

Tiểu bang

Trạng thái là một biến trong mọi thành phần lớp có khả năng lưu trữ thông tin động và được điều khiển bởi thành phần. Nó là riêng tư cho một thành phần đó.

Tài liệu tham khảo

• https://reactjs.org/docs/create-a-new-react-app.html