Bạn có nên thêm phản ứng vào các dự án hoặc trang web hiện có không?

React là khung JavaScript phổ biến nhất trên hành tinh. Bạn có thể sử dụng nó để nhanh chóng tạo các ứng dụng web giàu tính năng. Ngoài ra, nó cho phép bạn dễ dàng thêm các tính năng mới vào dự án hiện có của mình, chẳng hạn như trình tải lên hình ảnh React mà chúng tôi đã tạo trên trang web của mình.

Bạn chỉ cần gõ một vài dòng mã. Nó có thể làm cho cuộc sống của bạn dễ dàng hơn rất nhiều. Nhưng làm thế nào bạn có thể thêm React vào dự án hiện có? Các bước là gì? Trong bài đăng này, bạn sẽ tìm thấy tất cả các chi tiết.

Việc thêm React vào một dự án hiện có có thực sự dễ dàng không?

Có, bạn có thể dễ dàng thêm React vào ứng dụng hiện tại của mình. Quá trình này rất đơn giản. Trong bài đăng này, bạn sẽ tìm cách thêm thành phần React vào trang HTML hiện có. Bạn có thể làm theo phương pháp tương tự để thêm nó vào trang web của riêng bạn. Ngoài ra, bạn có thể tạo một tệp HTML trống để thực hành.

Thêm phản ứng vào dự án hiện tại: Cần có thiết bị

• Trước tiên, bạn cần cài đặt Node trên PC. Bạn có thể lấy nó từ nodejs.org . Bạn cần có ít nhất Node phiên bản 10.
• Tiếp theo, bạn cần có trình quản lý gói nút (npm). Nó được cài đặt tự động trên PC của bạn với Node. Phiên bản npm cần phải từ 5.2 trở lên.
• Cuối cùng, bạn cần có một trình soạn thảo mã tốt. Có rất nhiều giải pháp có sẵn trên thị trường. Ví dụ, Visual Studio Code là một trình soạn thảo trực quan. Nó rất phổ biến trong số các nhà phát triển. Bạn có thể tải xuống từ đây .

Thêm phản ứng vào dự án hoặc trang web hiện có

Trong phần này, bạn sẽ thêm một thành phần React để sửa đổi trang HTML hiện có trên trang web của mình. Dưới đây là các bước:

Bước 1: Thêm DOM Container vào HTML

Đầu tiên, mở trang HTML mà bạn muốn thay đổi. Tạo một phần tử div trống. Đây là khu vực mà bạn sẽ sử dụng React để hiển thị các thay đổi.

<div id="medium_blog_container">

<!-- Here we will mount our component -->

</div>

Bước 2: Thêm thẻ Script hoặc thẻ React

Tiếp theo, bạn phải thêm ba thẻ <script> vào trang HTML ngay trước thẻ đóng </body>.

Hai thẻ đầu tiên tải React. Cái thứ ba tải mã thành phần của bạn.

Bước 3: Tạo một thành phần phản ứng

Bây giờ, bạn phải tạo một tệp JS, được gọi là medium_post_component.js, bên cạnh trang HTML của bạn.

Bạn có thể viết React với JSX hoặc không có JSX. Ví dụ hiển thị ở trên không có JSX. Nó có thể trực tiếp chạy trên trình duyệt.

Hãy nhìn vào hai dòng này:

Với hai dòng này, bạn đang tìm <div> mà bạn đã thêm ở bước đầu tiên. Sau đó, bạn hiển thị nút “Like” React component bên trong nó.

Thêm phản ứng vào dự án hiện có – Thêm JSX vào dự án

Bạn không cần sử dụng các công cụ phức tạp, chẳng hạn như trình đóng gói hoặc máy chủ phát triển, để thêm JSX vào dự án. Trên thực tế, nó khá giống với việc thêm bộ tiền xử lý CSS. Tuy nhiên, bạn phải cài đặt Node.js trên PC của mình. Đó là yêu cầu duy nhất. Quá trình thêm JSX rất đơn giản. Bạn chỉ cần làm theo các bước sau:

1. Đầu tiên, Chuyển đến thư mục dự án của bạn trong thiết bị đầu cuối.

   
   

2. Bây giờ, hãy chạy lệnh sau

   npm init -y

   
   

3. Nếu lệnh trên không thành công, hãy chạy lệnh này:

   npm install babel-cli@6 babel-preset-react-app@3

   Đó là nó! Bạn đã thêm thành công thiết lập JSX sẵn sàng sản xuất vào dự án của mình.

   
   

Thêm phản ứng vào dự án hiện có – Chạy bộ tiền xử lý JSX

Để chạy bộ tiền xử lý JSX, bạn phải tạo một thư mục có tên là “src”. Sau đó chạy lệnh này trong terminal:

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

Mẹo: Bạn có thấy thông báo lỗi cho biết “Bạn đã cài đặt nhầm gói babel” không? Bạn có thể đã bỏ lỡ bước trước đó. Hãy thử thực hiện nó trong cùng một thư mục. Nó sẽ khắc phục vấn đề.

Bạn không cần phải đợi quá trình kết thúc. Lệnh nói trên khởi tạo trình theo dõi tự động cho JSX.

Nếu bạn tạo một tệp, có tên là like_button.js trong thư mục src, trình theo dõi sẽ tạo một tệp like_button.js đã được xử lý trước. Nó sẽ có mã JavaScript đơn giản phù hợp với trình duyệt.

Ngoài ra, nó cho phép bạn sử dụng các tính năng cú pháp JavaScript hiện đại. Ví dụ: bạn có thể sử dụng 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.

Hãy nhớ rằng npx không phải là một lỗi đánh máy. Đó là một công cụ chạy gói đi kèm với npm 5.2+.

Thêm phản ứng vào dự án hiện tại – AJAX và API gọi phản ứng trong thành phần

Có rất nhiều thư viện để thực hiện lệnh gọi API. Tuy nhiên, đây là những cái phổ biến nhất là:

• Tìm về
• trục
• React-Axios
• Sử dụng-Http React-request và hơn thế nữa

Thêm React vào dự án hiện có – Sử dụng Fetch để thực hiện các cuộc gọi HTTP trong React

Fetch() là API dựa trên trình duyệt. Bạn có thể sử dụng nó để thực hiện cuộc gọi HTTP. Hãy xem cú pháp tiêu chuẩn của Fetch API.

let response = fetch(

API_URL,

.... (some more options)

);

Ở đây, bạn đang gọi một hàm có tên là getNames. Nó lấy dữ liệu. Ngoài ra, nó tìm nạp các tham số khác. Thích:

• Phương pháp: Nó giúp bạn xác định loại cuộc gọi HTTP nào ở đó
• Tiêu đề: Nó cho phép bạn xác định tiêu đề yêu cầu cho ủy quyền hoặc nội dung
• Chế độ: Chế độ xác định loại chế độ, cors hoặc no-cors
• Nội dung: Bạn có thể sử dụng nó để gửi dữ liệu bổ sung đến máy chủ dưới dạng nội dung yêu cầu

Đây là một ví dụ về việc sử dụng Fetch trong React:

async getName(){

//With .then and .catch section

let response = await fetch("https://jsonplaceholders.com/users") .then(resposne => { return response.json(); this.setState({ names:response })}) .catch(error => { console.log(error); }); }

Mẹo để thêm phản ứng vào dự án hiện có

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

Bạn có thể muốn hiển thị các thành phần React ở nhiều nơi trên trang HTML. Để làm điều đó, bạn phải làm theo các bước sau:

Chuyển đến tệp HTML của bạn. Sau đó thêm những dòng này:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Add React in One Minute</title> </head> <body> <h2>Add React in One Minute</h2> <p>This page demonstrates using React with no build tooling.</p> <p>React is loaded as a script tag.</p> <p> This is the first comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="1"></div> </p> <p> This is the second comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="2"></div> </p> <p> This is the third comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="3"></div> </p> <!-- Load React. --> <!-- Note: when deploying, replace "development.js" with "production.min.js". --> <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> <!-- Load our React component. --> <script src="like_button.js"></script> </body> </html>

Chuyển đến tệp JavaScript của bạn. Chèn mã này:

'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked comment number ' + this.props.commentID; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } // Find all DOM containers, and render Like buttons into them. document.querySelectorAll('.like_button_container') .forEach(domContainer => { // Read the comment ID from a data-* attribute. const commentID = parseInt(domContainer.dataset.commentid, 10); const root = ReactDOM.createRoot(domContainer); root.render( e(LikeButton, { commentID: commentID }) ); });

Hãy nhớ rằng phương pháp này hữu ích khi các phần của trang được tách biệt với nhau. Nhưng bên trong mã React, bạn nên sử dụng thành phần thành phần. Bởi vì nó dễ sử dụng hơn.

Giảm thiểu JavaScript cho sản xuất

JavaScript chưa được rút gọn có thể ảnh hưởng đáng kể đến tốc độ trang. Nó sẽ làm người dùng thất vọng. Đó là lý do tại sao bạn cần thu nhỏ JavaScript trước khi triển khai ứng dụng React. Nó sẽ tăng tốc độ tải và trải nghiệm người dùng.

Bạn đã thu nhỏ tập lệnh ứng dụng của mình chưa? Bạn đã đảm bảo rằng HTML đã triển khai tải các phiên bản React kết thúc trong tệp production.min.js chưa? Nếu nó được thực hiện, trang web của bạn đã sẵn sàng sản xuất.

<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, bạn có thể thiết lập nó bằng cách thực hiện theo các bước sau:

Trước tiên, bạn phải cài đặt Node.js

Sau đó chạy lệnh sau trong thư mục dự án của bạn:

npm init -y

Tiếp theo, chạy lệnh này:

npm install terser

Cuối cùng, đã đến lúc thu nhỏ tệp. Nếu bạn muốn thu nhỏ một tệp có tên like_button.js, chỉ cần chạy lệnh này trong terminal:

npx terser -c -m -o like_button.min.js -- like_button.js

Bạn sẽ thấy việc tạo một tệp mới, được gọi là like_button.min.js. Nó sẽ chứa tất cả các mã rút gọn.

Nhanh chóng thử JSX

Bạn có thể nhanh chóng thử JSX trong dự án của mình bằng cách thêm thẻ <script> sau 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ể bắt đầu sử dụng JSX trong bất kỳ thẻ <script> nào. Bạn chỉ cần thêm thuộc tính type=”text/babel” vào nó.

Đây là một ví dụ về tệp HTML với JSX:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!-- Don't use this in production: --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> function MyApp() { return <h1>Hello, world!</h1>; } const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render(<MyApp />); </script> <!-- Note: this page is a great way to try React but it's not suitable for production. It slowly compiles JSX with Babel in the browser and uses a large development build of React. Read this section for a production-ready setup with JSX: https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project In a larger project, you can use an integrated toolchain that includes JSX instead: https://reactjs.org/docs/create-a-new-react-app.html You can also use React without JSX, in which case you can remove Babel: https://reactjs.org/docs/react-without-jsx.html --> </body> </html>

Giới thiệu React SDK của Filestack

filestack-react là một trình bao bọc trên filestack-js sdk. Nó cho phép bạn tích hợp với dịch vụ Filestack chỉ trong một vài dòng mã. Bạn có thể sử dụng nó để cải thiện đáng kể giao diện và hiệu suất của trình tải tệp lên của mình.

Làm cách nào tôi có thể sử dụng React SDK của Filestack trong ứng dụng của mình?

Trước tiên, bạn phải cài đặt React SDK của Filestack bằng lệnh này:

npm install filestack-react

Tiếp theo, bạn có thể chèn filestack-reac vào ứng dụng của mình.

import { PickerOverlay } from 'filestack-react'; <PickerOverlay apikey={YOUR_API_KEY} onSuccess={(res) => console.log(res)} onUploadDone={(res) => console.log(res)} />

Bạn có thể sử dụng nó để dễ dàng thêm các chức năng khác nhau. Chẳng hạn, bạn có thể hiển thị bộ chọn khung thả cơ bản bằng cách sử dụng dòng này:

<PickerDropPane apikey='YOUR_APIKEY'/>

Bạn có thể sử dụng Filestack để dễ dàng kích hoạt tính năng tải tệp lên trong React. Bạn có thể tìm thấy các chi tiết ngay tại đây.

Phần kết luận

Trong bài viết này, bạn đã học cách thêm React vào dự án hiện có. Ngoài ra, bạn đã biết các mẹo hữu ích, chẳng hạn như sử dụng lại các thành phần và rút gọn JavaScript để sản xuất. Giờ đây, bạn có thể bắt đầu tận dụng React và dễ dàng thêm các tính năng tuyệt vời vào các dự án hiện tại của mình.

Thêm phản ứng vào dự án hiện tại – Câu hỏi thường gặp

Thành phần React là gì?

Các thành phần là một trong những khối xây dựng cốt lõi của React. Chúng là các bit mã độc lập và có thể tái sử dụng. Chúng cho phép bạn dễ dàng xây dựng giao diện người dùng cho ứng dụng của mình.

Làm cách nào tôi có thể tạo ứng dụng phản ứng với npx?

Bạn có thể tạo ứng dụng phản ứng với npx bằng cách sử dụng lệnh sau: “npx tạo ứng dụng phản ứng”.

React trong mã hóa là gì?

React là một thư viện JavaScript hiệu quả và linh hoạt. Nó cho phép bạn dễ dàng xây dựng các giao diện người dùng phức tạp bằng cách sử dụng các đoạn mã nhỏ và biệt lập, được gọi là “các thành phần”.

Đăng ký miễn phí và trải nghiệm các giải pháp tải tệp lên tốt nhất cho các ứng dụng web của bạn ngay hôm nay với Filestack.