3,148 讀數

您应该将 React 添加到现有项目或网站吗？

经过 Filestack8 分钟 read2023/01/03

太長; 讀書

React 是地球上最流行的 JavaScript 框架。您可以使用它来快速创建功能丰富的 Web 应用程序。它使您能够轻松地向现有项目添加新功能。在这篇文章中，您将找到将 React 组件添加到现有 HTML 页面的方法。

featured image - 您应该将 React 添加到现有项目或网站吗？

React 是地球上最流行的 JavaScript 框架。您可以使用它来快速创建功能丰富的 Web 应用程序。此外，它使您能够轻松地向现有项目添加新功能，例如我们在网站上构建的React 图片上传器。

您只需要输入几行代码。它可以让你的生活更轻松。但是如何将 React 添加到现有项目中呢？步骤是什么？在这篇文章中，您将找到所有详细信息。

将 React 添加到现有项目真的很容易吗？

是的，您可以轻松地将 React 添加到您现有的应用程序中。这个过程非常简单。在这篇文章中，您将找到将 React 组件添加到现有 HTML 页面的方法。您可以按照相同的方法将其添加到您自己的网站。或者，您可以创建一个空的 HTML 文件进行练习。

将 React 添加到现有项目：所需设备

首先，您需要在您的 PC 上安装 Node。您可以从nodejs.org获取它。您至少需要 Node 版本 10。
接下来，您需要有节点包管理器 (npm)。它会通过 Node.js 自动安装在您的 PC 上。 npm 版本需要为 5.2 或更高版本。
最后，你需要有一个好的代码编辑器。市场上有很多可用的解决方案。例如，Visual Studio Code 是一个直观的编辑器。它在开发人员中广受欢迎。您可以从这里下载。

将 React 添加到现有项目或网站

在本节中，您将添加一个 React 组件来修改您网站的现有 HTML 页面。以下是步骤：

第 1 步：将 DOM 容器添加到 HTML

首先，打开您要更改的 HTML 页面。创建一个空的 div 元素。这是您将使用 React 显示更改的区域。

<div id="medium_blog_container">

</div>

第 2 步：添加脚本标签或 React 标签

接下来，您必须在结束 </body> 标记之前向 HTML 页面添加三个 <script> 标记。

前两个标签加载 React。第三个加载您的组件代码。

第 3 步：创建 React 组件

现在，您必须在 HTML 页面旁边创建一个名为 medium_post_component.js 的 JS 文件。

您可以使用 JSX 或不使用 JSX 来编写 React。上面显示的示例没有 JSX。它可以直接在浏览器上运行。

看看这两行：

通过这两行，您正在寻找您在第一步中添加的 <div>。然后在其中显示“喜欢”按钮 React 组件。

将 React 添加到现有项目 – 将 JSX 添加到项目

您无需使用复杂的工具（如捆绑器或开发服务器）来将 JSX 添加到项目中。事实上，它与添加 CSS 预处理器非常相似。但是，您的 PC 上必须安装 Node.js。这是唯一的要求。添加 JSX 的过程非常简单。您只需要按照以下步骤操作：

首先，转到终端中的项目文件夹。
现在，运行以下命令
npm init -y
如果上述命令失败，请运行此命令：
npm install babel-cli@6 babel-preset-react-app@3
而已！你已经成功地为你的项目添加了一个生产就绪的 JSX 设置。

将 React 添加到现有项目——运行 JSX 预处理器

要运行 JSX 预处理器，您必须创建一个名为“src”的文件夹。然后在终端中运行这个命令：

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

提示：您是否看到一条错误消息“您错误地安装了 babel 包”？您可能错过了上一步。尝试在同一文件夹中执行它。它应该解决这个问题。

您不必等待该过程完成。上述命令为 JSX 启动了一个自动观察器。

如果您在 src 文件夹中创建一个名为 like_button.js 的文件，观察程序将创建一个预处理的 like_button.js 文件。它将具有适合浏览器的纯 JavaScript 代码。

此外，它还允许您利用现代 JavaScript 语法功能。例如，您可以使用类而不用担心破坏旧的浏览器。

请记住，npx 不是拼写错误。它是 npm 5.2+ 附带的包运行器工具。

将 React 添加到现有项目 – AJAX 和 APIs Call-in React For Component

有大量用于调用 API 的库。然而，这些是最受欢迎的是：

拿来
公理
反应-Axios
使用-Http React-request 等

将 React 添加到现有项目——使用 Fetch 在 React 中进行 HTTP 调用

Fetch() 是一个基于浏览器的 API。您可以使用它进行 HTTP 调用。让我们看一下 Fetch API 的标准语法。

let response = fetch(

API_URL,

.... (some more options)

);

在这里，您正在调用一个名为 getNames 的函数。它获取数据。此外，它还获取其他参数。像：

方法：它可以帮助您确定那里有什么类型的 HTTP 调用
标头：它使您能够定义授权或内容的请求标头
Mode：Mode定义了模式的类型，cors或no-cors
正文：您可以使用它作为请求正文向服务器发送附加数据

下面是一个在 React 中使用 Fetch 的例子：

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); }); }

将 React 添加到现有项目的技巧

重用组件

您可能希望在 HTML 页面的多个位置显示 React 组件。为此，您必须执行以下步骤：

转到您的 HTML 文件。然后添加这些行：

<!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.  <div class="like_button_container" data-commentid="1"></div> </p> <p> This is the second comment.  <div class="like_button_container" data-commentid="2"></div> </p> <p> This is the third comment.  <div class="like_button_container" data-commentid="3"></div> </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> </html>

转到您的 JavaScript 文件。插入此代码：

'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 }) ); });

请记住，当页面的各个部分彼此隔离时，该方法很有用。但是在 React 代码中，你应该使用组件组合。因为它更容易使用。

为生产压缩 JavaScript

未压缩的 JavaScript 会显着影响页面速度。它会让用户感到沮丧。这就是为什么您需要在部署 React 应用程序之前压缩 JavaScript。它将提高加载速度和用户体验。

您是否已经缩小了您的应用程序脚本？您是否确保部署的 HTML 加载了以 production.min.js 文件结尾的 React 版本？如果完成，您的站点就可以投入生产了。

<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>

如果您的脚本没有缩小步骤，您可以按照以下步骤进行设置：

首先，你必须安装 Node.js

然后在你的项目文件夹中运行以下命令：

npm init -y

接下来，运行此命令：

npm install terser

最后，是时候缩小文件了。如果你想缩小一个名为 like_button.js 的文件，只需在终端中运行此命令：

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

您将看到一个名为 like_button.min.js 的新文件的创建。它将包含所有缩小的代码。

快速试用 JSX

您可以通过将以下 <script> 标记添加到您的页面来在您的项目中快速试用 JSX：

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

现在，您可以开始在任何 <script> 标签中使用 JSX。你只需要给它添加 type=”text/babel” 属性。

下面是一个带有 JSX 的 HTML 文件的例子：

<!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>  <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>  </body> </html>

介绍 Filestack 的 React SDK

filestack-react 是 filestack-js sdk 的包装器。它使您只需几行代码即可与 Filestack 服务集成。您可以利用它来显着改善文件上传器的外观和性能。

如何在我的应用程序中使用 Filestack 的 React SDK？

首先，您必须使用以下命令安装 Filestack 的 React SDK：

npm install filestack-react

接下来，您可以将 filestack-react 插入到您的应用程序中。

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

您可以使用它毫不费力地添加各种功能。例如，您可以使用以下行呈现基本的下拉窗格选择器：

<PickerDropPane apikey='YOUR_APIKEY'/>

您可以使用 Filestack 在 React 中轻松启用文件上传。您可以在此处找到详细信息。