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"> <!-- Here we will mount our component --> </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. <!-- 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> 转到您的 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> <!-- 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> 介绍 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 应用程序的最佳文件上传解决方案。