React 是地球上最流行的 JavaScript 框架。您可以使用它来快速创建功能丰富的 Web 应用程序。此外，它使您能够轻松地向现有项目添加新功能，例如我们在网站上构建的 器。 React 图片上传 您只需要输入几行代码。它可以让你的生活更轻松。但是如何将 React 添加到现有项目中呢？步骤是什么？在这篇文章中，您将找到所有详细信息。 将 React 添加到现有项目真的很容易吗？ 是的，您可以轻松地将 React 添加到您现有的应用程序中。这个过程非常简单。在这篇文章中，您将找到将 React 组件添加到现有 HTML 页面的方法。您可以按照相同的方法将其添加到您自己的网站。或者，您可以创建一个空的 HTML 文件进行练习。 将 React 添加到现有项目：所需设备 首先，您需要在您的 PC 上安装 Node。您可以从 获取它。您至少需要 Node 版本 10。 nodejs.org 接下来，您需要有节点包管理器 (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 中轻松启用文件上传。您可以在此处找到详细信息。 结论 在本文中，您学习了将 React 添加到现有项目中。此外，您还了解了一些有用的技巧，例如重用组件和缩小生产中的 JavaScript。现在，您可以开始利用 React 并轻松地为现有项目添加惊人的功能。 将 React 添加到现有项目 – 常见问题解答 什么是 React 组件？ 这些组件是 React 的核心构建块之一。它们是独立且可重用的代码位。它们使您能够轻松地为您的应用程序构建 UI。 如何使用 npx 创建 React 应用程序？ 您可以使用以下命令使用 npx 创建 React 应用程序：“npx create react app”。 编码中的 React 是什么？  React 是一个高效灵活的 JavaScript 库。它使您能够通过使用称为“组件”的小而独立的代码片段轻松构建复杂的用户界面。 使用 Filestack 免费注册并体验适用于您的 Web 应用程序的最佳文件上传解决方案。

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

成功云迁移的完整指南：策略和最佳实践

从论坛到信息流：社交媒体算法如何塑造数字互动

Telegram：加密岛通往大陆的桥梁

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

成功云迁移的完整指南：策略和最佳实践

从论坛到信息流：社交媒体算法如何塑造数字互动

Telegram：加密岛通往大陆的桥梁

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps