Css có được sử dụng trong phản ứng không?
|
Front-end xác định sự thành công của bất kỳ doanh nghiệp trực tuyến nào vì nó mang lại sự cải thiện đáng kể về hiệu suất web. Chỉ mất 0. 05 giây để một người dùng trung bình có ý kiến về một doanh nghiệp/sản phẩm bằng cách xem trang web của họ. Không còn nghi ngờ gì nữa, cần phải có bố cục, thiết kế giao diện người dùng tốt và trải nghiệm tổng thể trên web Show
Theo npmjs, React thu được gần 15.353.836 lượt tải xuống hàng tuần, trong khi VueJS, đối thủ cạnh tranh gần nhất của nó, có 3.334.067 lượt tải xuống hàng tuần. Ngoài ra, Angular chỉ có 2.918.034 lượt tải xuống hàng tuần  Là nhà phát triển React, bạn thường sẽ làm việc để tạo kiểu cho ứng dụng React của mình. Là một freelancer, tôi đã phạm sai lầm đó, và tôi vẫn hối hận. Tôi không muốn bất kỳ nhà phát triển front-end nào phạm phải sai lầm tương tự Trong hướng dẫn chi tiết về CSS trong React này, chúng tôi sẽ hướng dẫn bạn các phương pháp khác nhau để bạn có thể tạo kiểu cho ứng dụng React bằng CSS Vậy hãy bắt đầu Bắt đầu phát triển ứng dụng bằng ReactĐể tạo một ứng dụng React, thứ đầu tiên bạn cần là NodeJS, một runtime cho JavaScript
npx tạo-phản ứng-ứng dụng your_app_name Nó sẽ tạo một ứng dụng React mà chúng ta sẽ làm việc trong blog này về CSS trong React Hiển thị bên dưới là cấu trúc thư mục, khá dễ hiểu bưu kiện. json là trung tâm của tệp NodeJS. Nó chứa tất cả các thông tin quan trọng về dự án. Tệp JSON này bao gồm các phần sau npm cài đặt tên phụ thuộc @ 1. 3. 4 Bạn có thể đạt được điều này bằng cách thay đổi tập lệnh bắt đầu trong gói. json Kết quả của tất cả điều này, trang web sẽ xuất hiện như dưới đây Giới thiệu về CSSCó thể bạn đã đọc nhiều về CSS, viết tắt của Cascading Style Sheets. Nếu không có phong cách, trang web của bạn sẽ trông giống như một bộ phim đen trắng buồn tẻ mà không ai trong chúng ta thích xem trong thời đại ngày nay 🙂 Một thiết kế tốt có thể làm cho doanh nghiệp/sản phẩm của bạn trông chuyên nghiệp và có thể biến các tương tác thành các mối quan hệ. Đây là một trong những động lực chính của tăng trưởng và duy trì. Xem trải nghiệm di động đỉnh cao có thể thúc đẩy 73% doanh số bán hàng thương mại điện tử như thế nào Bạn có thể tưởng tượng cửa hàng thương mại điện tử yêu thích của mình mà không cần CSS không? không có CSS Với CSS Khả năng với CSS là vô tận và với kỹ năng thiết kế của mình, bạn có thể tạo nên những điều kỳ diệu cho trang web của mình – phương tiện lý tưởng để thúc đẩy trải nghiệm và bán hàng. Trước khi chuyển sang phần tiếp theo của hướng dẫn CSS trong React này, hãy xem hướng dẫn cheat sheet CSS của chúng tôi Ưu điểm của CSSCho đến nay, chúng ta đã đề cập đến các khía cạnh cơ bản của CSS. Hãy đi sâu vào một số lợi ích không thể thiếu do CSS mang lại Cho đến nay, chúng ta đã đề cập đến các khía cạnh cơ bản của CSS. Hãy đi sâu vào một số lợi ích không thể thiếu do CSS mang lại
Bây giờ chúng ta đã có một ý tưởng tổng thể về lý do tại sao sử dụng CSS và những lợi ích của việc sử dụng CSS, đã đến lúc chúng ta xem xét cách tận dụng các kỹ năng CSS trong các ứng dụng React Giới thiệu về phản ứngReact là một trong những thư viện front-end được sử dụng nhiều nhất có thể được sử dụng để tạo các trang đích đơn giản cũng như các trang web doanh nghiệp phức tạp React (thư viện dựa trên thành phần) giúp dễ dàng tạo các thành phần giao diện người dùng cho từng phần riêng biệt. Trang web đang được phát triển tạo các thành phần có thể tái sử dụng riêng biệt cho từng phần như đầu trang, chân trang, thanh bên, v.v. Cộng đồng là một trong những điểm mạnh của React framework. Phải nói rằng, React không phải là giải pháp tất cả trong một; Có hàng nghìn thư viện hỗ trợ hệ sinh thái React, như react-router-dom để định tuyến trang, react-redux để quản lý trạng thái, v.v. React, với hệ sinh thái khổng lồ của nó, làm cho nó trở thành một giải pháp toàn diện để phát triển ứng dụng web Kiểm tra các trang web dựa trên React của bạn để biết khả năng tương thích với trình duyệt. Thử LambdaTest ngay Làm cách nào để tạo kiểu và viết CSS trong React?Tạo kiểu là một trong những khía cạnh quan trọng nhất của ứng dụng React. Đã từng làm việc trên một số ứng dụng React, tôi có thể đảm bảo rằng phần lớn thời gian dành cho việc thiết kế ứng dụng Có năm cách riêng biệt để bạn có thể tạo kiểu và viết CSS trong React
Hãy đi sâu vào từng vấn đề này một cách chi tiết hơn Kiểu nội tuyến trong ReactCSS nội tuyến là cách được ưa thích rộng rãi nhưng ít được đề xuất hơn để tạo kiểu cho trang web của bạn. Đây không chỉ là trường hợp của React. Ngay cả với HTML thô, việc viết CSS nội tuyến sẽ gây khó khăn cho việc chỉnh sửa trong tương lai Tạo kiểu nội tuyến là cách tốt nhất để thử các thuộc tính CSS khác nhau. Một điểm quan trọng cần nhớ là các kiểu nội tuyến được ưu tiên hơn và chúng sẽ ghi đè lên bất kỳ kiểu nào khác được cung cấp cho chúng theo bất kỳ cách nào Viết CSS nội tuyến trong React và HTML thuần túy có một sự khác biệt nhỏ. Trong HTML, bạn sẽ viết kiểu của mình bằng cách sử dụng thuộc tính kiểu, theo sau là dấu = và sau đó là thuộc tính CSS được bao quanh bởi dấu ngoặc kép hoặc dấu ngoặc đơn. Trong React, chúng ta sẽ sử dụng dấu ngoặc kép {{ }} thay vì dấu ngoặc kép “ ” HTML React được tạo ra bởi Jordan Walke vào năm 2013 Phản ứng
React hiện được duy trì bởi Facebook Khi nào nên sử dụng Inline Styling?Kiểu dáng nội tuyến là lý tưởng khi chúng tôi đang tạo một trang web đơn giản và khi bạn là người duy nhất làm việc trong dự án đó. Nói một cách đơn giản, kiểu dáng nội tuyến là điều tuyệt đối không nên làm đối với các dự án liên quan đến các nhóm phân tán lớn. CSS nội tuyến trong React được ưu tiên khi bạn đang thử nghiệm một kiểu cụ thể Nói tóm lại, CSS nội tuyến phù hợp nhất cho người học nhưng không phù hợp để triển khai các dự án web trong thế giới thực Đây là lý do tại sao bạn không nên sử dụng CSS nội tuyến trong React
Viết CSS nội tuyến trong React không sai, nhưng việc thêm các quy tắc CSS vào mọi phần tử HTML sẽ tốn thời gian và khiến cấu trúc HTML của bạn trở nên lộn xộn Ví dụ CSS nội tuyếnTên tệp – Ứng dụng. jsxđầu ra biến tái sử dụngSao chép cùng một mã không phải là một ý tưởng hay trong thế giới lập trình. Đó cũng là trường hợp tương tự trong CSS Tại đây, bạn có thể sử dụng các biến đối tượng thay vì viết lặp đi lặp lại cùng một mã cho một thành phần giao diện người dùng tương tự. Tất cả những gì bạn phải làm là tạo biến đối tượng để lưu trữ một kiểu cụ thể và sử dụng tên biến chứ không phải chính kiểu đó. Biến này hiện có các kiểu được xác định trước và bạn có thể sử dụng nó bao nhiêu lần tùy thích Ví dụ dưới đây cho thấy rằng cùng một Khi thêm kiểu vào trang web, một trong những mục tiêu chính là sử dụng cùng một lớp CSS nhiều lần cho các thành phần tương tự. Khi triển khai CSS trong React, chúng tôi sử dụng các biến đối tượng để đạt được nhiều kiểu dáng trong một lần Ưu điểm ở đây là chúng ta sẽ giảm được nhiều dòng code dư thừa, từ đó cải thiện khả năng bảo trì, độ tin cậy và dễ đọc của code đầu ra MãSandbox Từ cú pháp, bạn có thể nhận thấy rằng CSS nội tuyến trong React vẫn đang được sử dụng, do đó chúng ta không thể sử dụng các lớp giả, phần tử giả, v.v. Một điều cần lưu ý là nếu có hai hoặc nhiều kiểu tạo kiểu (Nội tuyến + Bên ngoài) cho cùng một phần tử, CSS nội tuyến trong React sẽ có ưu tiên cao hơn các kiểu khác CSS bên ngoàiĐây là một trong những cách viết CSS ưa thích trong React. Thay vì viết mã CSS bên trong HTML (i. e. , CSS nội tuyến), chúng tôi tách phần CSS thành một tệp riêng biệt được nhập đơn giản vào thành phần React Ưu điểm của các biểu định kiểu bên ngoài là chúng ta có toàn quyền kiểm soát các thuộc tính CSS (e. g. , bộ chọn giả), điều này là không thể với CSS nội tuyến trong React Ở đây tất cả những gì chúng ta phải làm là tạo một tên tệp với một. css và nhập nó vào tệp React Bây giờ chúng ta có thể cung cấp className và id để chỉ kiểu nào sẽ trỏ đến phần tử nào. Điều quan trọng cần lưu ý là thuộc tính class được sử dụng trong HTML, trong khi className được sử dụng trong React
Một điều mà chúng ta nên tập trung vào là quy ước đặt tên cho các lớp và ID. Có một cơ hội tốt là nếu chúng ta đang viết giao diện người dùng web phức tạp, chúng ta có thể vô tình tạo nhiều Tên lớp có cùng tên Một quy ước đặt tên được gọi là BEM là câu trả lời cho vấn đề được liệt kê ở trên Quy ước đặt tên – BEMBEM là viết tắt của Công cụ sửa đổi phần tử khối. Sử dụng các quy ước đặt tên phù hợp sẽ chuẩn bị cho bạn những thay đổi trong thiết kế của trang web
BEM là một trong những quy ước đặt tên được sử dụng phổ biến nhất. Bạn có thể đặt tên theo logic của bạn Mô-đun CSSMô-đun CSS là một tệp CSS có phần mở rộng Một lợi thế rất lớn của các mô-đun CSS là bạn sẽ không chứng kiến bất kỳ xung đột tên lớp nào. Các thuộc tính CSS mà chúng tôi nhắm mục tiêu được chuyển đổi thành các tên lớp duy nhất trong quá trình biên dịch Các mô-đun CSS trong ứng dụng ReactKhi làm việc với CSS trong React, bạn có thể sử dụng Mô-đun CSS bằng cách tạo [tên]. mô-đun. css và nhập nó vào tệp Thành phần React cụ thể Tên tệp – Ứng dụng. jsApp. mô-đun. CSSđầu ra Tại đây, bạn có thể thấy chúng tôi có Ứng dụng của mình. js và ứng dụng. mô-đun. tập tin css. Mặc dù điều này có vẻ bình thường, nhưng niềm vui bắt đầu khi bạn kiểm tra nó trong trình duyệt Như bạn có thể thấy, chúng tôi đã không chỉ định tên lớp trong CSS. Ở đây, tên lớp của chúng tôi là CSS-in-JSJSX nghe có vẻ quen thuộc nếu bạn đã biết React. JSX trông giống như HTML, nhưng không phải vậy. Không giống như HTML, nó đi kèm với toàn bộ sức mạnh của JavaScript. Tương tự như vậy, CSS trong JS đi kèm với một số tính năng bổ sung cho CSS CSS-in-JS là một trong những cách tiếp cận để viết CSS, cố gắng loại bỏ một số trình chặn bằng CSS đơn giản, chẳng hạn như phạm vi, tính di động và chức năng động Thư viện CSS-in-JS được thiết kế tốt sẽ nhóm tất cả các thuộc tính CSS của nó và các phần phụ thuộc được liên kết với nó. Tất cả logic kiểu hiện đã tách biệt và có thể tái sử dụng Các tính năng chung của tất cả các thư viện CSS-in-JS là
Bây giờ chúng ta hãy xem xét một số thư viện CSS-in-JS phổ biến JSX được tạo kiểuStyled JSX là một thư viện rất nhỏ được xây dựng và duy trì bởi nhóm NextJS. Nó cho phép bạn viết CSS được đóng gói và có phạm vi trong React để tạo kiểu cho (các) thành phần của bạn
cài đặt npm --save style-jsx "bổ sung". ["styled-jsx/babel"] Xem ví dụ sử dụng jsx đã tạo kiểu để tạo kiểu cho ứng dụng React xuất chức năng mặc định App() {
Tự hỏi điều gì thậm chí còn khó khăn hơn việc chọn một khung JavaScript? . chọn giải pháp CSS-in-JS. Tại sao?src=https. //cdn. tĩnh. io/img/austinil. com/f=auto%2Cq=70/wp-content/uploads/JavaScript-Blog-Cover. png' đầu ra thành phần theo kiểuStyled-components là một thư viện được xây dựng cho React và React Native. Nó cho phép bạn sử dụng các kiểu cấp độ thành phần trong ứng dụng của mình. Điều này có nghĩa là bạn có thể tạo kiểu cho các thành phần giao diện người dùng cụ thể. styled-components là sự kết hợp giữa JavaScript và CSS tôi. e. CSS-in-JS Bây giờ chúng ta hãy bắt đầu làm việc với styled-components đầu ra Đây là hai thư viện CSS-in-JS phổ biến nhất. Một số thư viện CSS-in-JS khác như JSS, Emotion, Styletron, v.v. , cho phép bạn viết CSS cấp thành phần bằng JavaScript Khung CSS hàng đầuTạo kiểu không chỉ giới hạn trong việc viết CSS thô. Bạn cũng có thể sử dụng các thư viện CSS giao diện người dùng khác nhau như Tailwind CSS, Bulma, Ant Design, v.v. Việc sử dụng các thư viện và khung CSS tốt nhất hiện nay khá phổ biến vì nó thân thiện với nhà phát triển và giảm thời gian phát triển xuống rất nhiều Một số khung CSS tốt nhất là CSS đuôi gióTailwind CSS là một trong những CSS framework được sử dụng rộng rãi nhất. Đây là một khung tiện ích đầu tiên với gần 13 triệu lượt tải xuống hàng tháng. Nó cho phép bạn linh hoạt và tự do lựa chọn thiết kế trang web của mình Tailwind CSS có một số ưu điểm, cụ thể là CSS có thể được tùy chỉnh để đáp ứng nhu cầu cá nhân. Tailwind CSS đi kèm với cấu hình mặc định, nhưng bạn có thể ghi đè lên cấu hình đó. Các tiện ích và thành phần của Tailwind có thể dễ dàng tùy chỉnh Tailwind sử dụng hệ thống điểm dừng ưu tiên thiết bị di động, nghĩa là bạn có thể chỉ định các tiện ích có tiền tố như sm. md. lg. chỉ có hiệu lực tại điểm ngắt cụ thể trở lên Tên tệp – Ứng dụng. jsđầu ra Mặc dù chúng tôi đang sử dụng các kiểu nội tuyến ở đây, nhưng nó khá gọn gàng và dễ quản lý. Tailwind CSS cung cấp cho chúng tôi tên lớp cho một kiểu cụ thể. Khi sử dụng Tailwind CSS, mọi thứ đều nằm trong tầm kiểm soát của bạn (đọc là của nhà phát triển). Bạn cũng có thể sử dụng lớp giả và bộ chọn giả với Tailwind CSS Bootstrap phản ứngReact-Bootstrap thay thế Bootstrap JavaScript. React-Bootstrap là một trong những thư viện thành phần React tốt nhất cung cấp các thành phần Bootstrap dưới dạng thành phần React. Mỗi thành phần đã được xây dựng từ đầu như một thành phần React thực sự Đây là một trong những giải pháp tốt nhất và thư viện UI được sử dụng nhiều nhất cho React. Nhiều hơn 1. 3 triệu lượt tải xuống hàng tuần cho React-Bootstrap Đối với các ứng dụng web JavaScript, React thống trị, trong khi Bootstrap thống trị các khung web CSS, cung cấp năng lượng cho hàng triệu trang web trên toàn thế giới React Bootstrap bao gồm một số thành phần bạn có thể sử dụng mà không cần phải tạo chúng từ đầu, chẳng hạn như thanh điều hướng, nút, biểu mẫu, thẻ, v.v. Tên tệp – Ứng dụng. jsđầu ra Giao diện người dùng vật liệuThay vì bạn xây dựng một thành phần UI mới, UI UI tạo một thành phần riêng lẻ có thể được điều chỉnh để đạt được đầu ra UI mong muốn Thành phần Material-UI chỉ đưa vào các kiểu mà nó cần hiển thị và tự hỗ trợ. Họ không dựa vào bất kỳ khái niệm bảng kiểu toàn cầu nào. UI UI cũng có thể được sử dụng với các khung khác như Angular và vue. js để giúp bạn gửi các tính năng giao diện người dùng mới nhanh hơn và làm cho chúng phản hồi nhanh và thích ứng Trong Material UI, giao diện người dùng dựa trên trải nghiệm kỹ thuật số chất lượng cao mang lại trải nghiệm kỹ thuật số chất lượng cao trong khi phát triển đồ họa mặt trước. Nó dựa trên Thiết kế Vật liệu của Google Với hơn 79.900 sao trên GitHub, Material UI là một trong những thư viện Giao diện người dùng hàng đầu cho React Tên tệp – Ứng dụng. tsxđầu ra Có nhiều thành phần giao diện người dùng và thư viện CSS khác hoạt động tốt với React Theo kinh nghiệm làm việc với khách hàng toàn cầu, tôi có thể tự tin đề cập rằng không có giải pháp tốt nhất duy nhất. Sự lựa chọn phụ thuộc vào dự án và sự dễ dàng của nhà phát triển với khung. Bạn phải quyết định cách tạo kiểu và viết CSS trong React Kiểm tra các ứng dụng web CSS Tailwind của bạn trên đám mây. Thử LambdaTest ngay Sử dụng LT Browser để kiểm tra CSS trong ReactĐể kiểm tra dự án của mình, chúng ta nên sử dụng các công cụ giúp dễ dàng xem các trang trông như thế nào và kiểm tra khả năng truy cập cũng như khả năng sử dụng của trang web hoặc ứng dụng web Kiểm tra trình duyệt chéo dựa trên đám mây của LambdaTest giúp bạn mang lại trải nghiệm web dễ dàng, thân thiện với người dùng và phản hồi nhanh trên tất cả các trình duyệt, hệ điều hành và thiết bị thực. Nó cho phép bạn thực hiện kiểm tra web trên nhóm trình duyệt trực tuyến gồm hơn 3000 trình duyệt và hệ điều hành thực Bạn cũng có thể Đăng ký Kênh YouTube LambdaTest và cập nhật các hướng dẫn mới nhất về thử nghiệm trình duyệt tự động, tự động hóa Selenium, tự động hóa Cypress, CI/CD, v.v. LambdaTest cung cấp giải pháp toàn diện với công cụ kiểm tra thân thiện với thiết bị di động để thực hiện kiểm tra độ phản hồi cho trang web của bạn. LT Browser được tải với hơn 50 chế độ xem thân thiện với thiết bị di động được cài đặt sẵn và các công cụ dành cho nhà phát triển nâng cao để kiểm tra khả năng phản hồi của ứng dụng phản ứng gói nó lênChúc mừng bạn đã đạt được điều này. Bạn là một độc giả tuyệt vời. Bây giờ bạn đã biết cách tạo kiểu cho ứng dụng của mình theo cách hiệu quả và hiệu quả nhất phong cách hạnh phúc Câu hỏi thường gặp (FAQ)CSS có được sử dụng trong React không?Câu trả lời ngắn gọn là. vâng, CSS được sử dụng trong React. Và đó là một loại câu hỏi được tải vì CSS không chỉ được "sử dụng" trong React - nó được đưa vào đó. CSS nào là tốt nhất cho React?Với sự phổ biến ngày càng tăng của React, việc muốn sử dụng thư viện CSS-in-JS cùng với nó là điều đương nhiên. Ở cấp độ cao, có hai lựa chọn chính. một là kiểu nội tuyến, trong khi tùy chọn còn lại là một khung như các thành phần hoặc cảm xúc được tạo kiểu Reactjs có sử dụng HTML và CSS không?Điều kiện tiên quyết. Quen thuộc với các ngôn ngữ HTML, CSS và JavaScript cốt lõi, kiến thức về terminal/command line. React sử dụng cú pháp HTML-in-JavaScript được gọi là JSX (JavaScript và XML) .
CSS nào là tốt nhất cho React?React Bootstrap là một tập hợp các thành phần React triển khai khung Bootstrap và kết hợp Bootstrap và React. Đây là một trong những khung CSS phổ biến và được sử dụng phổ biến nhất |
