Html có cần thiết cho phản ứng không?

Một trong những sự nhầm lẫn mà tôi thấy mọi người gặp phải với React là toàn bộ tình huống xung quanh CSS. Cụ thể, liệu bạn có cần sử dụng các thư viện CSS-in-JS hay bạn cần một số loại giải pháp tạo kiểu “tương thích với React”. Nó hiển thị trong các bình luận như thế này

Tôi đã thử React, nhưng tôi thực sự không thích styled-components

Giả định cơ bản là React và các thành phần được tạo kiểu là không thể tách rời - việc chọn sử dụng React đồng nghĩa với việc bị khóa để sử dụng thư viện CSS-in-JS

Và nó không đúng. Bạn có thể tạo kiểu cho ứng dụng React bằng CSS đơn giản, trong các tệp

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

Đây là một số CSS

cái nút. css

.call-to-action {
  background: red;
  color: #fff;
}

Và đây là một thành phần React cho một nút sử dụng nó

cái nút. js

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

Lưu ý cách chúng tôi đang

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

*Không chỉ là một thứ Webpack;

Áp dụng kiểu cho thành phần React khi di chuột

CSS rất giỏi trong việc xử lý các trạng thái

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

Giả sử chúng ta muốn thay đổi màu của nút khi nó được di chuột qua. Đây là thay đổi chúng tôi sẽ thực hiện đối với CSS

cái nút. css

.call-to-action {
  background: red;
  color: #fff;
}

.call-to-action:hover {
  background: blue;
}

Và đó là nó. Không cần thay đổi thành phần React

React không tạo kiểu

Bây giờ bạn có thể đang nghĩ, “Trời, những người React đã nghĩ ra mọi thứ. Họ thậm chí còn tích hợp hỗ trợ cho tất cả các tính năng CSS đó. ”

Họ đã không, mặc dù. )

React chỉ là một lớp ưa thích trên đầu trang của HTML. Các thành phần phản ứng xuất ra HTML và CSS tạo kiểu cho HTML

Đối với trình duyệt có liên quan, React không tìm hiểu về nó. Trình duyệt áp dụng các quy tắc CSS cho HTML trên trang, cho dù HTML đó đến từ tệp

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

Áp dụng kiểu “hoạt động” cho thành phần React

Ồ, nhưng còn khi phong cách của bạn phụ thuộc vào một số trạng thái thành phần hoặc một chỗ dựa thì sao?

Không hẳn

Bạn có thể tạo động lực cho prop

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

cái nút. js

import React from 'react';
import './button.css';

const Button = ({ isActive }) => {
  return (
    <button className={`call-to-action ${isActive ? 'active' : ''}`}>
      Click Me!
    </button>
  )
}

Sau đó, bạn có thể thêm lớp

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

cái nút. css

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

Bây giờ, nút sẽ có lớp

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

Tuy nhiên, có lẽ điều đó trông hơi… xấu xí? . Di chuyển nó ra dòng riêng của nó

cái nút. js

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

Hoặc cài đặt thư viện tên lớp để xây dựng các chuỗi này nếu bạn thấy mình làm việc này rất nhiều

cái nút. js

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

Sử dụng giá đỡ .call-to-action { background: red; color: #fff; } .call-to-action:hover { background: blue; } 0 để có kiểu dáng thực sự năng động

Có thể bạn đang xây dựng một loại thành phần nào đó cần đặt động kiểu CSS của nó, dựa trên một biến JS. Có thể là chỗ dựa, hoặc một chút trạng thái. Chắc chắn điều đó yêu cầu CSS-in-JS?

Không

Ví dụ, đây là thanh tiến trình có chiều rộng động. Prop

.call-to-action {
  background: red;
  color: #fff;
}

.call-to-action:hover {
  background: blue;
}

.call-to-action {
  background: red;
  color: #fff;
}

.call-to-action:hover {
  background: blue;
}

thanh tiến trình. js

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

.call-to-action {
  background: red;
  color: #fff;
}

.call-to-action:hover {
  background: blue;
}

.call-to-action {
  background: red;
  color: #fff;
}

.call-to-action:hover {
  background: blue;
}

.call-to-action {
  background: red;
  color: #fff;
}

.call-to-action:hover {
  background: blue;
}

Prop

.call-to-action {
  background: red;
  color: #fff;
}

.call-to-action:hover {
  background: blue;
}

.call-to-action {
  background: red;
  color: #fff;
}

.call-to-action:hover {
  background: blue;
}

thanh tiến trình. css

import React from 'react';
import './button.css';

const Button = () => {
  return (
    <button className="call-to-action">
      Click Me!
    </button>
  )
}

Cách tốt nhất để sử dụng CSS trong React là gì?

Toàn bộ mục tiêu của bài viết này là làm rõ rằng bạn không bắt buộc phải sử dụng CSS-in-JS với React, React hoạt động tốt với CSS đơn giản

Nhưng bạn có nên sử dụng thư viện CSS-in-JS trong các dự án của mình không?

Câu trả lời thực tế là, nó hoàn toàn phụ thuộc vào bạn. Nếu bạn thích CSS-in-JS, hãy dùng nó. Nếu bạn chưa thử, hãy thử và xem bạn nghĩ gì. Có những ưu điểm và nhược điểm với mọi phương pháp

Đối với các dự án của riêng tôi, tôi có xu hướng sử dụng CSS đơn giản hoặc gần đây là cách tiếp cận ưu tiên tiện ích với Tailwind CSS. Nhân tiện, Tailwind tạo CSS đơn giản, có nghĩa là Tailwind hoạt động tốt với React và bất kỳ khung giao diện người dùng nào khác có thể sử dụng CSS (tất cả đều là CSS)

React Native lại là một câu chuyện khác, vì CSS không có sẵn trên các nền tảng gốc, vì vậy bạn thực sự cần sử dụng giải pháp CSS-in-JS ở đó

Nhưng đối với React thông thường? . )

Thành công. bây giờ hãy kiếm tra thư điện tử của bạn

Tìm hiểu kiến ​​thức cơ bản về React trong 5 ngày

Cuối cùng cũng hiểu cách React hoạt động. Bạn sẽ

🎉 Nhận một cái gì đó trên màn hình

💄 Viết các thành phần động

🏃 Làm cho nó tương tác

😎 Tìm nạp dữ liệu thực

🛳 Đặt nó trực tuyến

5 ngày, 5 email. Đi bộ với những điều cơ bản và một kế hoạch

Nhận bài học 1 ngay bây giờ 👇

Đã xảy ra lỗi khi gửi đăng ký của bạn. Vui lòng thử lại

Địa chỉ email

Tôi tôn trọng sự riêng tư email của bạn. Hủy đăng ký bất cứ lúc nào

Trước khi chúng ta tiếp tục, tôi phải hỏi

bằng lòng

Đã xảy ra lỗi khi gửi đăng ký của bạn. Vui lòng thử lại

Học React có thể là một cuộc đấu tranh — rất nhiều thư viện và công cụ.
Lời khuyên của tôi? . )
Để biết cách tiếp cận từng bước, hãy xem hội thảo Pure React của tôi.

Học cách suy nghĩ trong React

• Hơn 90 bài học về màn hình
• Bảng điểm đầy đủ và phụ đề chi tiết
• Tất cả các mã từ các bài học
• phỏng vấn nhà phát triển

Dave Ceddia's Pure React là một tác phẩm có chiều sâu và sự rõ ràng to lớn. đội nón ra đi. Tôi là một huấn luyện viên React ở London và sẽ giới thiệu kỹ lưỡng điều này cho tất cả các nhà phát triển giao diện người dùng muốn nâng cao kỹ năng hoặc củng cố

HTML có cần thiết trong React không?

Có nhất thiết phải học HTML trước React không?

HTML có cần thiết cho phản ứng gốc không?

Chúng ta có thể sử dụng React mà không cần CSS không?