Giới thiệu

Trong hướng dẫn này, chúng ta sẽ triển khai Ứng dụng React TypeScript với Material UI. Sau đó, chúng ta sẽ thêm React Router vào ứng dụng của mình. Đầu tiên, hãy nói về điều kiện tiên quyết.

Tại sao nên sử dụng TypeScript?

TypeScript là một tập hợp siêu của JavaScript. Nó là một ngôn ngữ lập trình mã nguồn mở miễn phí được phát triển và duy trì bởi Microsoft. Khi chúng tôi sử dụng React với TypeScript, nó giúp cho việc phát triển giao diện người dùng dễ dàng hơn rất nhiều với ít lỗi hơn.

• Cải thiện khả năng đọc mã
• Kiểm tra kiểu tĩnh
• Hỗ trợ tốt hơn cho JSX
• Hỗ trợ TypeScript cho các thư viện phổ biến

Material UI là một trong những thư viện React UI phổ biến nhất. Khi chúng tôi sử dụng Material UI, chúng tôi với tư cách là nhà phát triển giao diện người dùng, không phải xây dựng từng thành phần UI từ cấp độ cơ bản.

• Có các thành phần React được tích hợp sẵn với Material Design của Google
• Có thể tạo các chủ đề tùy chỉnh
• Cập nhật thường xuyên
• Hỗ trợ cộng đồng lớn

Nếu bạn đã cài đặt Node.js, NPM và Yarn, bạn có thể bỏ qua phần này. Chúng tôi sẽ sử dụng Yarn làm trình quản lý gói của chúng tôi. Đầu tiên, chúng ta cần cài đặt Node.js và npm.

• Tải xuống trình cài đặt sẵn Node.js từ Node.js | Downloads .
• Sau khi tải xuống, hãy khởi chạy Trình hướng dẫn thiết lập Node.js.
• Chỉ cần chấp nhận các giá trị mặc định và nhấp vào nút cài đặt. Sau khi cài đặt, hãy nhấp vào kết thúc.
• Mở thiết bị đầu cuối của bạn và nhập node -vvà npm -vhệ thống sẽ hiển thị các phiên bản.
• Sau khi cài đặt Node và NPM, bạn có thể chạy lệnh sau để cài đặt Yarn .

npm install --global yarn

C:\> yarn --version
1.22.5
C:\> node -v
v14.17.6
C:\> npm -v
8.5.2

Tạo ứng dụng React

Hãy sử dụng Create React App để thiết lập dự án React của chúng tôi. Bây giờ, vì chúng ta muốn tạo một dự án TypeScript, chúng ta cần thêm -- template typescript.

npx create-react-app starter-app --template typescript

Điều hướng vào thư mục dự án của bạn và chạy lệnh sau bằng Yarn.

cd starter-app
yarn start

Thiết lập giao diện người dùng Material

Hãy thêm thiết kế Material UI vào các thành phần ứng dụng React của chúng tôi.

Đầu tiên, chúng ta cần cài đặt các phụ thuộc Material UI bằng cách sử dụng sợi. Theo mặc định, MUI sử dụng cảm xúc làm công cụ tạo phong cách.

yarn add @mui/material @emotion/react @emotion/styled

Tiếp theo, chúng ta có thể cài đặt gói biểu tượng vật liệu bằng sợi.

yarn add @mui/icons-material

Trong App.tsx của chúng tôi, hãy xóa các mục nhập liên quan đến các tệp đó. Và để kiểm tra giao diện người dùng Material, hãy kết xuất các thành phần Kiểu chữ và Giấy của MUI.

• line:7Chúng tôi đã sử dụng thành phần CssBaseline từ MUI. Theo tài liệu , MUI sử dụng lớp này để đặt lại CSS.
• line:17Hỗ trợ sx có thể được sử dụng để xác định kiểu tùy chỉnh. Bên trong sx prop này, chúng ta có thể truy cập các thuộc tính chủ đề một cách dễ dàng.

Đó là một thành phần giấy MUI ngay tại đó. Chúng tôi đã cài đặt MUI thành công. Hãy thêm chủ đề MUI tùy chỉnh vào ứng dụng React của chúng tôi.

Thiết lập chủ đề tùy chỉnh (Tùy chọn)

Vì vậy, chúng ta thường cần sử dụng các chủ đề tùy chỉnh với các thành phần MUI. Việc thiết lập các chủ đề tùy chỉnh với Material UI khá dễ dàng.

Đầu tiên, bạn cần xác định chủ đề.

Tiếp theo, chúng ta cần bao bọc thành phần Ứng dụng của mình với thành phần ThemeProvider của MUI và chúng ta cần chuyển chủ đề đã xác định của mình. Vì vậy, đây là App.tsxtệp của tôi sau khi thiết lập một chủ đề tùy chỉnh.

• line:43 secondary.lighttương đương với theme.pallete.secondary.light. Vì chúng ta chuyển màu chủ đề nên khi chúng ta thay đổi chủ đề, các màu thành phần cũng sẽ thay đổi theo.

Co vẻ tôt vơi tôi. Vì vậy, chúng tôi chỉ cần cấu hình bảng màu của chúng tôi ở đây. Bạn cũng có thể chỉnh sửa các biến tùy chỉnh khác như khoảng cách, bóng đổ, chuyển tiếp và nhiều biến khác. Nếu bạn muốn tìm hiểu thêm về các ứng dụng chủ đề, bạn có thể xem hướng dẫn ban đầu này từ MUI,https://mui.com/customization/theming.

Bước cuối cùng, hãy thêm React Router vào ứng dụng của chúng tôi.

Tích hợp bộ định tuyến React

Trong ứng dụng React của chúng tôi, bây giờ chúng tôi muốn điều hướng qua các trang khác nhau. Có, ứng dụng React là một ứng dụng một trang. Tuy nhiên, có nhiều thư viện chúng ta có thể sử dụng để triển khai nhiều dạng xem. Thư viện bộ định tuyến React, là một trong những thư viện phổ biến nhất để đạt được định tuyến. Vì vậy, chúng ta hãy tìm hiểu cách chúng ta có thể thêm Bộ định tuyến React vào ứng dụng của mình.

Đầu tiên, chúng ta cần cài đặt thư viện React Router.

yarn add react-router-dom

Tôi đã tạo 3 trang. 'Trang Giới thiệu', 'Trang Sản phẩm' và 'Trang chủ'. Bây giờ chúng ta cần xác định các trang này là các tuyến đường trong ứng dụng của chúng ta. Chúng ta cần tạo một tệp riêng có tên routes.tstrong thư mục nguồn của chúng ta.

• Vì chúng tôi không hiển thị bất kỳ phần tử JSX nào ở đây, chúng tôi có thể sử dụng .tstiện ích mở rộng.
• Chúng tôi đã sử dụng một số phép thuật TypeScript ở đây. Chúng tôi đã xác định một Giao diện Tuyến đường riêng biệt để mọi tuyến đường sẽ có các thuộc tính giống nhau.

Các tuyến đường đã được xác định của chúng tôi trong routes.tstệp, nên được sử dụng App.tsxnhư thế này.

• line:36Đối với mỗi tuyến đường mà chúng tôi hiển thị, chúng tôi nên chuyển vào một khóa tuyến, đường dẫn tuyến và phần tử.

Vâng, nó đã hoạt động!

Chúng tôi đã thực hiện các tuyến đường của chúng tôi. Bây giờ một điều cuối cùng cần làm ở đây. Hãy thêm thành phần Chân trang và Thanh điều hướng để triển khai điều hướng giữa các trang.

Đây là thành phần Navbar ví dụ của tôi. Chúng tôi có thể tạo một thư mục mới /componentsđể lưu trữ các thành phần tùy chỉnh của chúng tôi.

Ở đây, tôi đã sử dụng một thành phần AppBar mẫu được cung cấp bởi hướng dẫn các thành phần MUI . Tôi nghĩ bạn cũng nên kiểm tra hướng dẫn đó. AppBar này ngay tại đây cũng hỗ trợ chế độ xem trên thiết bị di động. Đó là lý do tại sao tôi yêu thích Material UI, bạn có thể tạo các UI phức tạp chỉ với một vài dòng mã.

Hãy cũng thêm một thành phần Footer ví dụ.

Hãy nhập các thành phần Navbar và Footer này vào App.tsxtệp của chúng tôi.

Chỉ cần đảm bảo thêm các thành phần Navbar và Footer bên trong thành phần Router .

Bây giờ nếu chúng tôi chạy lại Ứng dụng của mình, ứng dụng sẽ hoạt động hoàn hảo.

Hoàn hảo! Bây giờ bạn có thể xây dựng bất kỳ thứ gì với Ứng dụng dành cho người mới bắt đầu này.

Sự kết luận

Vì vậy, đó là tất cả những gì tôi đã lên kế hoạch cho hướng dẫn này.

Trong hướng dẫn này, chúng tôi đã tạo một ứng dụng dành cho người mới bắt đầu với React, Typescript, Material UI và React Router Library. Bạn cũng có thể xem dự án này trên Github của tôi.

️ Dự án Github -https://github.com/SahanAmarsha/react-materialui-starter-app

Tôi hy vọng bạn đã hoàn thành tất cả các bước mà không gặp phải bất kỳ vấn đề nào. Tuy nhiên, nếu bạn làm vậy, bạn có thể hỏi bất cứ điều gì trong phần bình luận bên dưới.

Chúc bạn mã hóa vui vẻ!