Tôi có cần html css cho js phản ứng không?

Xin chào phản ứng

Như dòng giới thiệu chính thức của nó, React là một thư viện để xây dựng giao diện người dùng. React không phải là một framework – nó thậm chí không dành riêng cho web. Nó được sử dụng với các thư viện khác để kết xuất với một số môi trường nhất định. Chẳng hạn, React Native có thể được sử dụng để xây dựng các ứng dụng di động

Để xây dựng cho web, các nhà phát triển sử dụng React song song với ReactDOM. React và ReactDOM thường được thảo luận trong cùng một không gian — và được sử dụng để giải quyết các vấn đề giống như — các khung phát triển web thực sự khác. Khi chúng tôi đề cập đến React như một "khuôn khổ", chúng tôi đang làm việc với sự hiểu biết thông tục đó

Mục tiêu chính của React là giảm thiểu các lỗi xảy ra khi các nhà phát triển đang xây dựng giao diện người dùng. Nó thực hiện điều này thông qua việc sử dụng các thành phần — các đoạn mã logic, độc lập mô tả một phần của giao diện người dùng. Các thành phần này có thể được kết hợp với nhau để tạo ra một giao diện người dùng đầy đủ và React trừu tượng hóa phần lớn công việc kết xuất, giúp bạn tập trung vào thiết kế giao diện người dùng

Trường hợp sử dụng

Không giống như các khung khác được trình bày trong mô-đun này, React không thực thi các quy tắc nghiêm ngặt xung quanh quy ước mã hoặc tổ chức tệp. Điều này cho phép các nhóm thiết lập các quy ước phù hợp nhất với họ và áp dụng React theo bất kỳ cách nào họ muốn. React có thể xử lý một nút duy nhất, một vài phần của giao diện hoặc toàn bộ giao diện người dùng của ứng dụng

Mặc dù React có thể được sử dụng cho các phần nhỏ của giao diện, nhưng không dễ để "thích vào" một ứng dụng như một thư viện như jQuery hoặc thậm chí là một framework như Vue — sẽ dễ tiếp cận hơn khi bạn xây dựng toàn bộ ứng dụng của mình bằng React

Ngoài ra, nhiều lợi ích dành cho nhà phát triển trải nghiệm của ứng dụng React, chẳng hạn như viết giao diện với JSX, yêu cầu quy trình biên dịch. Thêm một trình biên dịch như Babel vào một trang web làm cho mã trên đó chạy chậm, vì vậy các nhà phát triển thường thiết lập công cụ như vậy với một bước xây dựng. React được cho là có yêu cầu cao về công cụ, nhưng nó có thể học được

Bài viết này sẽ tập trung vào trường hợp sử dụng React để hiển thị toàn bộ giao diện người dùng của một ứng dụng, sử dụng công cụ được cung cấp bởi công cụ tạo ứng dụng phản ứng của chính Facebook

React sử dụng JavaScript như thế nào?

React sử dụng các tính năng của JavaScript hiện đại cho nhiều mẫu của nó. Sự khác biệt lớn nhất của nó với JavaScript là việc sử dụng cú pháp JSX. JSX mở rộng cú pháp của JavaScript để mã giống như HTML có thể tồn tại cùng với nó. Ví dụ

const heading = <h1>Mozilla Developer Networkh1>;

Hằng tiêu đề này được gọi là biểu thức JSX. React có thể sử dụng nó để hiển thị thẻ

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Giả sử chúng tôi muốn bọc tiêu đề của mình trong thẻ

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Ghi chú. Dấu ngoặc đơn trong đoạn mã trước không phải là duy nhất đối với JSX và không có bất kỳ ảnh hưởng nào đến ứng dụng của bạn. Chúng là tín hiệu cho bạn (và máy tính của bạn) rằng nhiều dòng mã bên trong là một phần của cùng một biểu thức. Bạn cũng có thể viết biểu thức tiêu đề như thế này

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Tuy nhiên, điều này có vẻ hơi khó xử, vì thẻ

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Tất nhiên, trình duyệt của bạn không thể đọc JSX nếu không có trợ giúp. Khi được biên dịch (sử dụng công cụ như Babel hoặc Parcel), biểu thức tiêu đề của chúng ta sẽ như thế này

const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);

Có thể bỏ qua bước biên dịch và sử dụng

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Vì JSX là sự pha trộn giữa HTML và JavaScript, một số nhà phát triển thấy nó trực quan. Những người khác nói rằng bản chất pha trộn của nó làm cho nó khó hiểu. Tuy nhiên, khi bạn cảm thấy thoải mái với nó, nó sẽ cho phép bạn xây dựng giao diện người dùng nhanh hơn và trực quan hơn, đồng thời cho phép những người khác hiểu rõ hơn về cơ sở mã của bạn trong nháy mắt

Để đọc thêm về JSX, hãy xem bài viết chuyên sâu về JSX của nhóm React

Thiết lập ứng dụng React đầu tiên của bạn

Có nhiều cách để sử dụng React, nhưng chúng ta sẽ sử dụng công cụ tạo ứng dụng phản ứng giao diện dòng lệnh (CLI), như đã đề cập trước đó, giúp đẩy nhanh quá trình phát triển ứng dụng React bằng cách cài đặt một số gói và tạo một số gói.

Có thể thêm React vào trang web mà không cần tạo ứng dụng phản ứng bằng cách sao chép một số phần tử

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Yêu cầu

Để sử dụng ứng dụng tạo-phản ứng, bạn cần có Node. js đã cài đặt. Bạn nên sử dụng phiên bản hỗ trợ dài hạn (LTS). Nút bao gồm npm (trình quản lý gói nút) và npx (trình chạy gói nút)

Bạn cũng có thể sử dụng trình quản lý gói Yarn thay thế, nhưng chúng tôi sẽ cho rằng bạn đang sử dụng npm trong bộ hướng dẫn này. Xem Khái niệm cơ bản về quản lý gói để biết thêm thông tin về npm và sợi

Nếu bạn đang sử dụng Windows, bạn sẽ cần cài đặt một số phần mềm để cung cấp cho bạn tính tương đương với thiết bị đầu cuối Unix/macOS để sử dụng các lệnh thiết bị đầu cuối được đề cập trong hướng dẫn này. Gitbash (là một phần của bộ công cụ git dành cho Windows) hoặc Windows Subsystem for Linux (WSL) đều phù hợp. Xem Khóa học về sự cố dòng lệnh để biết thêm thông tin về những điều này và về các lệnh đầu cuối nói chung

Ngoài ra, hãy nhớ rằng React và ReactDOM tạo ra các ứng dụng chỉ hoạt động trên một bộ trình duyệt khá hiện đại - IE9+ thông qua một số polyfill. Bạn nên sử dụng trình duyệt hiện đại như Firefox, Microsoft Edge, Safari hoặc Chrome khi thực hiện các hướng dẫn này

Ngoài ra, hãy xem phần sau để biết thêm thông tin

• "Npm là gì" trên nodejs. tổ chức
• "Giới thiệu npx" trên blog npm
• Tài liệu tạo-phản ứng-ứng dụng

Đang khởi tạo ứng dụng của bạn

ứng dụng tạo phản ứng có một đối số. tên bạn muốn đặt cho ứng dụng của mình. ứng dụng tạo phản ứng sử dụng tên này để tạo một thư mục mới, sau đó tạo các tệp cần thiết bên trong nó. Đảm bảo rằng bạn

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Điều này tạo ra một thư mục

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

• Cài đặt một số gói npm cần thiết cho chức năng của ứng dụng
• Viết kịch bản để bắt đầu và phục vụ ứng dụng
• Tạo cấu trúc tệp và thư mục xác định kiến ​​trúc ứng dụng cơ bản
• Khởi tạo thư mục dưới dạng kho lưu trữ git, nếu bạn đã cài đặt git trên máy tính của mình

Ghi chú. nếu bạn đã cài đặt trình quản lý gói Sợi, ứng dụng tạo phản ứng sẽ mặc định sử dụng nó thay vì npm. Nếu bạn đã cài đặt cả hai trình quản lý gói và rõ ràng muốn sử dụng npm, bạn có thể thêm cờ

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

ứng dụng tạo phản ứng sẽ hiển thị một số thông báo trong thiết bị đầu cuối của bạn khi nó hoạt động; . Quá trình này có thể mất vài phút, vì vậy bây giờ có thể là thời điểm tốt để đi pha một tách trà

Khi quá trình hoàn tất, hãy đưa

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);

cấu trúc ứng dụng

ứng dụng tạo phản ứng cung cấp cho chúng tôi mọi thứ chúng tôi cần để phát triển ứng dụng React. Cấu trúc tệp ban đầu của nó trông như thế này

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Thư mục

const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);

Thư mục

const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);

const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);

Thư mục

const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);

Tệp

const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);

const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);

Exploring our first React component —

Trong React, một thành phần là một mô-đun có thể tái sử dụng để hiển thị một phần ứng dụng của chúng tôi. Những phần này có thể lớn hoặc nhỏ, nhưng chúng thường được xác định rõ ràng. họ phục vụ một mục đích duy nhất, rõ ràng

Hãy mở

const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Tệp

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Báo cáo nhập khẩu

Các câu lệnh

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Câu lệnh đầu tiên nhập logo từ

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Câu lệnh thứ hai nhập CSS liên quan đến thành phần Ứng dụng của chúng tôi. Lưu ý rằng không có tên biến và không có chỉ thị

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Các bản phát hành React trước bản phát hành React 17 vào năm 2020 cũng yêu cầu nhập chính thư viện React, như trong -

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Thành phần ứng dụng

Sau khi nhập, chúng ta có một hàm tên là

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Hãy xem xét kỹ hơn về

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Hàm

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Một số phần tử trong biểu thức có các thuộc tính, được viết giống như trong HTML, theo mẫu của

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Hãy dành một chút thời gian để thay đổi thẻ

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Thành phần

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Báo cáo xuất khẩu

Ở dưới cùng của tệp

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Đặt câu hỏi về chỉ số

Hãy mở

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Như với

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Hai câu lệnh đầu tiên nhập các thư viện

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Dòng 7 gọi hàm

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Dòng 8 gọi

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Tất cả những điều này cho React biết rằng chúng tôi muốn kết xuất ứng dụng React của mình với thành phần

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Ghi chú. Trong JSX, các thành phần React và các phần tử HTML phải có dấu gạch chéo. Viết chỉ

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Tệp

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Biến và đạo cụ

Tiếp theo, chúng ta sẽ sử dụng một số kỹ năng JavaScript của mình để chỉnh sửa các thành phần và làm việc với dữ liệu trong React thoải mái hơn một chút. Chúng ta sẽ nói về cách các biến được sử dụng bên trong JSX và giới thiệu các đạo cụ, là cách truyền dữ liệu vào một thành phần (sau đó có thể được truy cập bằng các biến)

Các biến trong JSX

Trở lại

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Ở đây, giá trị thuộc tính

const header = React.createElement("header", null,
  React.createElement("h1", null, "Mozilla Developer Network")
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Hãy thử tạo một biến của riêng chúng ta. Trước câu lệnh return của

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Thay đổi dòng 8 để sử dụng biến

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Khi bạn lưu, trình duyệt của bạn sẽ hiển thị "Xin chào, React. " thay vì "Xin chào, Thế giới. "

Các biến rất tiện lợi, nhưng biến mà chúng ta vừa thiết lập không sử dụng hiệu quả các tính năng của React. Đó là nơi đạo cụ đến

đạo cụ thành phần

Prop là bất kỳ dữ liệu nào được truyền vào thành phần React. Đạo cụ phản ứng có thể so sánh với thuộc tính HTML. Trong đó các phần tử HTML có các thuộc tính, các thành phần React có các đạo cụ. Đạo cụ được viết bên trong lệnh gọi thành phần và sử dụng cú pháp giống như thuộc tính HTML —

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Hãy mở

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Thêm một chỗ dựa của

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Trở lại

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Thay đổi chữ ký của hàm

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Với thay đổi này, {subject} trở thành không xác định, vì vậy hãy bình luận dòng

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Thuộc tính đối tượng

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Giờ đây,

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

Khi bạn lưu, ứng dụng sẽ chào bạn bằng "Xin chào, Clarice. ". Nếu bạn quay lại

const header = <header>
    <h1>Mozilla Developer Networkh1>
header>

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

const header = (
  <header>
    <h1>Mozilla Developer Networkh1>
  header>
);

Bản tóm tắt

Điều này đưa chúng ta đến phần cuối của cái nhìn ban đầu về React, bao gồm cách cài đặt nó cục bộ, tạo ứng dụng khởi động và cách hoạt động của những điều cơ bản. Trong bài viết tiếp theo, chúng ta sẽ bắt đầu xây dựng ứng dụng phù hợp đầu tiên của mình — danh sách việc cần làm. Tuy nhiên, trước khi chúng ta làm điều đó, hãy tóm tắt lại một số điều chúng ta đã học được

HTML CSS có cần thiết cho React JS không?

Cần bao nhiêu HTML CSS cho React JS?

Bạn có thể sử dụng React mà không cần HTML không?