5 cách tạo kiểu phản ứng bằng CSS [2023]

2023-02-03
Spread the love

Bạn có biết rằng hơn 97% trang web sử dụng CSS để tạo kiểu không?

Cascading Style Sheets, hay CSS, cho phép các nhà phát triển xây dựng các trang web đẹp mắt, có thể quét được và hiển thị được.

Ngôn ngữ CSS chỉ định cách trình bày tài liệu cho người dùng. Trong trường hợp này, một tài liệu là một tệp được viết bằng ngôn ngữ đánh dấu như XML hoặc HTML.

Phong cách trong React là gì?

Sự đơn giản của việc tạo, chạy và duy trì ứng dụng React là lý do chính đằng sau sự phổ biến của nó. React là một thư viện JavaScript chứ không phải là một framework, cung cấp nhiều thứ hơn là chỉ các hàm và đoạn mã được viết sẵn.

Tính sẵn có của các thành phần có thể tái sử dụng, tính linh hoạt, độ ổn định của mã, tốc độ và hiệu suất là một số lý do khiến React được xếp hạng cao trong số các khung và thư viện JavaScript.

Tạo kiểu trong React là quá trình tạo các thành phần khác nhau trong ứng dụng React hấp dẫn trực quan bằng CSS. Tuy nhiên, điều đáng chú ý là React sử dụng JSX (JavaScript và XML) thay vì HTML làm ngôn ngữ đánh dấu của nó. Một trong những điểm khác biệt chính là HTML sử dụng .class để gắn nhãn các lớp trong khi JSX sử dụng .ClassName để biểu thị giống nhau.

Tại sao bạn nên tạo kiểu cho React bằng CSS?

  • Làm cho ứng dụng của bạn đáp ứng. Các ứng dụng web hiện đại có thể truy cập được trên cả màn hình nhỏ và lớn. CSS cho phép bạn áp dụng các truy vấn phương tiện cho ứng dụng React của mình và làm cho ứng dụng phản hồi nhanh với các kích thước màn hình khác nhau.
  • Đẩy nhanh quá trình phát triển. Bạn có thể sử dụng cùng một quy tắc CSS trên một số thành phần của ứng dụng React.
  • Làm cho ứng dụng React có thể bảo trì được. Thực hiện thay đổi giao diện cho các thành phần/phần cụ thể trong ứng dụng của bạn thật dễ dàng bằng cách sử dụng CSS.
  • Cải thiện trải nghiệm người dùng. CSS cho phép định dạng thân thiện với người dùng. Một React với văn bản và các nút ở những vị trí hợp lý sẽ dễ dàng điều hướng và sử dụng.

Có một số cách tiếp cận mà nhà phát triển có thể sử dụng để tạo kiểu cho ứng dụng React của họ. Sau đây là một số phổ biến nhất;

Viết kiểu nội tuyến

Kiểu nội tuyến là cách tiếp cận dễ dàng nhất để tạo kiểu cho ứng dụng React, vì người dùng không cần tạo biểu định kiểu bên ngoài. Kiểu dáng CSS được áp dụng trực tiếp cho mã React.

  Thanh Tìm kiếm trên TikTok ở đâu?

Điều đáng chú ý là các kiểu nội tuyến có mức độ ưu tiên cao hơn các kiểu khác. Do đó, nếu bạn có một biểu định kiểu bên ngoài với một số định dạng, nó sẽ bị ghi đè bởi kiểu nội tuyến.

Đây là minh họa về kiểu dáng nội tuyến trong ứng dụng React. 

import React from 'react';

import ReactDOM from 'react-dom/client';

const Header = () => {

  return (

    <>

      <h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>

      <h2>Add a little style!</h2>

    </>

  );

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Header />);

Phần tử được hiển thị sẽ hiển thị h1 với nền màu xanh lam nhạt.

Ưu điểm của kiểu dáng nội tuyến

  • Nhanh. Đây là cách tiếp cận đơn giản nhất, khi bạn thêm kiểu trực tiếp vào thẻ bạn muốn tạo kiểu.
  • Có ưu đãi lớn. Kiểu nội tuyến sẽ ghi đè lên biểu định kiểu bên ngoài. Do đó, bạn có thể sử dụng nó để tập trung vào một chức năng cụ thể mà không cần thay đổi toàn bộ ứng dụng.
  • Tuyệt vời cho nguyên mẫu. Bạn có thể sử dụng kiểu nội tuyến để kiểm tra chức năng trước khi kết hợp định dạng trên biểu định kiểu bên ngoài.

Nhược điểm của kiểu dáng nội tuyến

  • Có thể tẻ nhạt. Việc tạo kiểu trực tiếp cho mọi thẻ rất tốn thời gian.
  • Giới hạn. Bạn không thể sử dụng các tính năng CSS như bộ chọn và hoạt ảnh với kiểu nội tuyến.
  • Rất nhiều kiểu nội tuyến khiến mã JSX không thể đọc được.

Nhập biểu định kiểu bên ngoài

Bạn có thể viết CSS trong một tệp bên ngoài và nhập nó vào ứng dụng React. Cách tiếp cận này có thể so sánh với việc nhập tệp CSS trong thẻ của tài liệu HTML.

Để đạt được điều này, bạn cần tạo tệp CSS trong thư mục của ứng dụng, nhập tệp đó vào thành phần đích và viết quy tắc kiểu cho ứng dụng của bạn.

Để minh họa cách hoạt động của các biểu định kiểu CSS bên ngoài, bạn có thể tạo một tệp CSS và đặt tên cho nó là App.css. Sau đó, bạn có thể xuất nó như sau. 

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    <div className="main">

    </div>

  );

}

export default App;

Đoạn mã trên nhập biểu định kiểu bên ngoài vào thành phần App.js. Tệp App.css nằm trong thư mục Thành phần.

Ưu điểm của biểu định kiểu CSS bên ngoài

  • Tái sử dụng được. Bạn có thể sử dụng cùng một quy tắc CSS trên các thành phần khác nhau trong ứng dụng React.
  • Làm cho mã dễ nhìn hơn. Hiểu mã dễ dàng khi sử dụng biểu định kiểu bên ngoài.
  • Cấp quyền truy cập vào các tính năng CSS nâng cao. Bạn có thể sử dụng các lớp giả và bộ chọn nâng cao khi sử dụng biểu định kiểu bên ngoài.

Con của biểu định kiểu CSS bên ngoài

  • Yêu cầu quy ước đặt tên đáng tin cậy để đảm bảo các kiểu không bị ghi đè.

Sử dụng mô-đun CSS

Các ứng dụng React có thể trở nên thực sự lớn. Theo mặc định, tên hoạt hình CSS và tên lớp được đặt trong phạm vi toàn cầu. Cài đặt này có thể có vấn đề khi xử lý các biểu định kiểu lớn, vì một kiểu có thể ghi đè lên kiểu khác.

Mô-đun CSS giải quyết thách thức này bằng cách khoanh vùng tên lớp và hoạt hình cục bộ. Cách tiếp cận này đảm bảo rằng các tên lớp chỉ có sẵn trong tệp/thành phần khi chúng cần thiết. Mỗi tên lớp có một tên lập trình duy nhất, tránh xung đột.

  Cách cài đặt bổ sung khách VirtualBox cho máy ảo Ubuntu

Để triển khai các Mô-đun CSS, hãy tạo một tệp có .module.css. Nếu bạn muốn đặt tên biểu định kiểu của mình là kiểu, thì tên tệp sẽ là style.module.css.

Nhập tệp đã tạo vào thành phần React của bạn và bạn sẽ sẵn sàng bắt đầu.

Tệp CSS của bạn có thể trông giống như thế này;

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

Bạn có thể nhập Mô-đun CSS trên App.js của mình như sau;

import { React } from "react";

import styles from "./styles.module.css";

function App() {

  return (

    <h1 className={styles.heading}>Hello techpoe.com reader</h1>

  );

}

export default App;

Ưu điểm của việc sử dụng các mô-đun CSS

  • Tích hợp dễ dàng với SCSS và CSS
  • Tránh xung đột tên lớp

Nhược điểm của việc sử dụng các mô-đun CSS

  • Tham chiếu tên lớp bằng cách sử dụng các mô-đun CSS có thể gây nhầm lẫn cho người mới bắt đầu.

Sử dụng Styled-Components

Các thành phần được tạo kiểu cho phép các nhà phát triển tạo các thành phần bằng CSS trong mã JavaScript. Một thành phần được tạo kiểu hoạt động như một thành phần React đi kèm với các kiểu. Các thành phần được tạo kiểu cung cấp kiểu dáng động và tên lớp duy nhất.

Để bắt đầu sử dụng Thành phần được tạo kiểu, bạn có thể cài đặt gói trên thư mục gốc của mình bằng lệnh này;

npm install styled-components

Bước tiếp theo là nhập các Thành phần được tạo kiểu vào ứng dụng React của bạn

Sau đây là đoạn mã của App.js sử dụng Thành phần được tạo kiểu;

import { React } from "react";
import styled from "styled-components";

function App() {

  const Wrapper = styled.div`

    width: 80%;

    height: 120px;

    background-color: lightblue;

    display: block;

  `;

  return <Wrapper />;

}

export default App;

Ứng dụng được kết xuất sẽ có các kiểu trên được nhập từ Thành phần được tạo kiểu.

Ưu điểm của các thành phần theo kiểu

  • Nó có thể dự đoán được. Các kiểu trong phương pháp tạo kiểu này được lồng vào các thành phần riêng lẻ.
  • Không cần tập trung vào các quy ước đặt tên cho lớp học của bạn. Chỉ cần viết phong cách của bạn và gói phần mềm sẽ lo phần còn lại.
  • Bạn có thể xuất các Thành phần được tạo kiểu dưới dạng đạo cụ. Các thành phần được tạo kiểu chuyển đổi CSS bình thường thành các thành phần React. Do đó, bạn có thể sử dụng lại mã này, mở rộng kiểu thông qua các đạo cụ và xuất.

Con của các thành phần theo kiểu

  • Bạn phải cài đặt thư viện của bên thứ 3 để bắt đầu.

Biểu định kiểu cú pháp tuyệt vời (SASS/SCSS)

SASS đi kèm với nhiều công cụ và tính năng mạnh mẽ hơn mà CSS thông thường không có. Bạn có thể viết các kiểu theo hai kiểu khác nhau được hướng dẫn bởi các phần mở rộng này; .scss và .sass.

Cú pháp của SASS tương tự như cú pháp của CSS thông thường. Tuy nhiên, bạn không cần dấu ngoặc mở và đóng khi viết quy tắc kiểu trong SASS.

Một đoạn SASS đơn giản sẽ xuất hiện như sau;

nav

  ul

    margin-right: 20px

    padding: 0

    list-style: list

  li

    display: block

  a

    display: block

    padding: 6px 12px

    text-decoration: underline

nav

Để bắt đầu sử dụng SASS vào ứng dụng React của bạn, trước tiên bạn cần biên dịch SASS thành CSS đơn giản. Sau khi thiết lập ứng dụng của bạn thông qua lệnh Create React App, bạn có thể cài đặt node-sass để đảm nhiệm việc biên dịch. 

npm install node-sass

Sau đó, bạn có thể tạo các tệp của mình và cung cấp cho chúng phần mở rộng .scss hoặc .sass. Sau đó, bạn có thể nhập tệp của mình theo cách thông thường. Ví dụ;

import "./Components/App.sass";

Ưu điểm của SASS/SCSS

  • Nó đi kèm với nhiều tính năng động như mixin, lồng và mở rộng.
  • Bạn không có nhiều bản soạn sẵn để viết mã CSS khi sử dụng SASS/SCSS
  Làm thế nào để sửa chữa bộ chuyển đổi VLC không có lỗi âm thanh

Nhược điểm của SASS/SCSS

  • Các kiểu là toàn cầu và do đó bạn có thể gặp phải các vấn đề quan trọng.

Đó là cách tiếp cận phong cách tốt nhất?

Vì chúng ta đã thảo luận năm cách tiếp cận, bạn muốn biết cách nào là tốt nhất. Thật khó để làm nổi bật người chiến thắng hoàn toàn trong cuộc thảo luận này. Tuy nhiên, những cân nhắc này sẽ giúp bạn đưa ra quyết định sáng suốt:

  • Các chỉ số hiệu suất
  • Cho dù bạn cần một hệ thống thiết kế
  • Dễ dàng tối ưu hóa mã của bạn

Kiểu nội tuyến phù hợp khi bạn có ứng dụng đơn giản với vài dòng mã. Tuy nhiên, tất cả những người khác; bên ngoài, SASS, Thành phần được tạo kiểu và Mô-đun CSS, phù hợp với các ứng dụng lớn.

Các phương pháp hay nhất để duy trì CSS trong Ứng dụng React lớn là gì?

  • Tránh kiểu dáng nội tuyến. Viết các kiểu CSS nội tuyến cho mọi thẻ trong ứng dụng React lớn có thể rất mệt mỏi. Thay vào đó, hãy sử dụng một biểu định kiểu bên ngoài phù hợp với nhu cầu của bạn.
  • Lint mã của bạn. Linters chẳng hạn như Stylelint sẽ làm nổi bật các lỗi kiểu dáng trong mã của bạn để bạn có thể sửa chúng sớm.
  • Thực hiện đánh giá mã thường xuyên. Viết CSS có vẻ thú vị, nhưng việc đánh giá mã thường xuyên giúp dễ dàng xác định lỗi sớm.
  • Tự động kiểm tra các tệp CSS của bạn. Enzyme và Jest là những công cụ tuyệt vời mà bạn có thể sử dụng để tự động kiểm tra mã CSS của mình.
  • Giữ mã của bạn KHÔ. khi xử lý các kiểu thường được sử dụng chẳng hạn như màu sắc và lề, hãy sử dụng các biến tiện ích và các lớp phù hợp với nguyên tắc Không lặp lại chính mình (DRY).
  • Sử dụng các quy ước đặt tên như Block Element Modifier. Cách tiếp cận như vậy giúp bạn dễ dàng viết các lớp CSS dễ hiểu và dễ sử dụng lại.

Phần kết luận

Trên đây là một số cách bạn có thể sử dụng để tạo kiểu cho React. Việc lựa chọn phương pháp tạo kiểu tóc sẽ phụ thuộc vào nhu cầu, kỹ năng và sở thích của bạn. Bạn thậm chí có thể kết hợp một số phương pháp tạo kiểu, chẳng hạn như biểu định kiểu bên trong và bên ngoài, trong ứng dụng React của mình.

Bạn cũng có thể khám phá một số thư viện và khung CSS tốt nhất dành cho nhà phát triển giao diện người dùng.

Ý kiến ​​của bạn?
0
0
0
0
0
0
0

Làm thế nào để Ngừng đập do làm chậm máy tính của bạn

2023-03-27

Pháp y kỹ thuật số được giải thích trong 5 phút hoặc ít hơn

2023-03-27

Làm cách nào để ngăn chặn các vectơ tấn công trên mạng của bạn?

2023-03-27
x