Php tạo tệp html

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

// .. the starter code you pasted ...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

mà chúng tôi đã thêm vào HTML của mình trong bước đầu tiên, tạo ứng dụng React với ứng dụng đó, sau đó hiển thị thành phần React nút “Thích” bên trong ứng dụng đó

Đó là nó

Không có bước bốn. Bạn vừa thêm thành phần React đầu tiên vào trang web của mình

Hãy xem các phần tiếp theo để biết thêm các mẹo tích hợp React

Xem mã nguồn ví dụ đầy đủ

Tải xuống toàn bộ ví dụ (đã nén 2KB)

Mẹo. Tái sử dụng một thành phần

Thông thường, bạn có thể muốn hiển thị các thành phần React ở nhiều nơi trên trang HTML. Dưới đây là một ví dụ hiển thị nút “Thích” ba lần và chuyển một số dữ liệu tới nút này

Xem mã nguồn ví dụ đầy đủ

Tải xuống toàn bộ ví dụ (đã nén 2KB)

Ghi chú

Chiến lược này chủ yếu hữu ích khi các phần được hỗ trợ bởi React của trang bị cô lập với nhau. Bên trong mã React, thay vào đó dễ sử dụng hơn

Mẹo. Giảm thiểu JavaScript cho sản xuất

Trước khi triển khai trang web của bạn vào sản xuất, hãy lưu ý rằng JavaScript chưa được rút gọn có thể làm chậm đáng kể trang đối với người dùng của bạn

Nếu bạn đã thu nhỏ tập lệnh ứng dụng, trang web của bạn sẽ sẵn sàng sản xuất nếu bạn đảm bảo rằng HTML đã triển khai tải các phiên bản React kết thúc bằng

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

9

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin>script>

Nếu bạn không có bước thu nhỏ cho tập lệnh của mình, đây là một cách để thiết lập

Không bắt buộc. Thử React với JSX

Trong các ví dụ trên, chúng tôi chỉ dựa vào các tính năng được trình duyệt hỗ trợ. Đây là lý do tại sao chúng tôi sử dụng lệnh gọi hàm JavaScript để cho React biết nội dung sẽ hiển thị

const e = React.createElement;

// Display a "Like" 
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

Tuy nhiên, React cũng cung cấp tùy chọn sử dụng JSX thay thế

// Display a "Like" 
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  button>
);

Hai đoạn mã này là tương đương. Mặc dù JSX hoàn toàn là tùy chọn, nhưng nhiều người thấy nó hữu ích khi viết mã giao diện người dùng — cả với React và với các thư viện khác

Bạn có thể chơi với JSX bằng cách sử dụng

Nhanh chóng thử JSX

Cách nhanh nhất để thử JSX trong dự án của bạn là thêm thẻ

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

3 này vào trang của bạn

<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>

Bây giờ bạn có thể sử dụng JSX trong bất kỳ thẻ

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

3 nào bằng cách thêm thuộc tính

// .. the starter code you pasted ...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

2 vào thẻ đó. Đây là một tệp HTML ví dụ với JSX mà bạn có thể tải xuống và sử dụng

Cách tiếp cận này phù hợp để học và tạo các bản trình diễn đơn giản. Tuy nhiên, nó làm cho trang web của bạn chậm và không phù hợp để sản xuất. Khi bạn đã sẵn sàng tiếp tục, hãy xóa thẻ

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

3 mới này và thuộc tính

// .. the starter code you pasted ...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

2 mà bạn đã thêm. Thay vào đó, trong phần tiếp theo, bạn sẽ thiết lập bộ tiền xử lý JSX để tự động chuyển đổi tất cả các thẻ

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

3 của mình

Thêm JSX vào Dự án

Việc thêm JSX vào một dự án không yêu cầu các công cụ phức tạp như trình đóng gói hoặc máy chủ phát triển. Về cơ bản, việc thêm JSX rất giống với việc thêm bộ tiền xử lý CSS. Yêu cầu duy nhất là phải có Node. js được cài đặt trên máy tính của bạn

Chuyển đến thư mục dự án của bạn trong thiết bị đầu cuối và dán hai lệnh này

1. Bước 1. Chạy

   // .. the starter code you pasted ...
   
   const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

   6 (nếu không thành công, đây là cách khắc phục)
2. Bước 2. Chạy

   // .. the starter code you pasted ...
   
   const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

   7

Mẹo

Ở đây chúng tôi chỉ sử dụng npm để cài đặt bộ tiền xử lý JSX; . Cả React và mã ứng dụng đều có thể giữ nguyên dưới dạng thẻ

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

3 mà không có thay đổi nào

Xin chúc mừng. Bạn vừa thêm một thiết lập JSX sẵn sàng sản xuất vào dự án của mình

Chạy bộ tiền xử lý JSX

Tạo một thư mục có tên

// .. the starter code you pasted ...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

9 và chạy lệnh đầu cuối này

npx babel --watch src --out-dir . --presets react-app/prod

Ghi chú

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin>script>

0 không phải lỗi đánh máy — đó là công cụ chạy gói đi kèm với npm 5. 2+

Nếu bạn thấy thông báo lỗi cho biết "Bạn đã cài đặt nhầm gói

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin>script>

1", bạn có thể đã bỏ lỡ. Thực hiện nó trong cùng một thư mục, rồi thử lại

Đừng đợi nó kết thúc - lệnh này sẽ bắt đầu trình theo dõi tự động cho JSX

Nếu bây giờ bạn tạo một tệp có tên là

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin>script>

2 với mã khởi động JSX này, trình theo dõi sẽ tạo một tệp

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

5 đã được xử lý trước với mã JavaScript đơn giản phù hợp với trình duyệt. Khi bạn chỉnh sửa tệp nguồn bằng JSX, quá trình chuyển đổi sẽ tự động chạy lại

Như một phần thưởng, điều này cũng cho phép bạn sử dụng các tính năng cú pháp JavaScript hiện đại như các lớp mà không phải lo lắng về việc phá vỡ các trình duyệt cũ hơn. Công cụ chúng tôi vừa sử dụng có tên là Babel và bạn có thể tìm hiểu thêm về công cụ này từ tài liệu của nó

Nếu bạn nhận thấy rằng bạn đang cảm thấy thoải mái với các công cụ xây dựng và muốn chúng làm được nhiều việc hơn cho bạn, thì phần tiếp theo sẽ mô tả một số chuỗi công cụ phổ biến và dễ tiếp cận nhất. Nếu không — những thẻ tập lệnh đó sẽ hoạt động tốt