如何在現有網站上添加 React Js？

Question

所以reactjs.org有一個很好的教程，介紹如何通過將 react js 代碼添加為腳本來將 react js 添加到現有網站。 這對我來說效果很好。 我的疑問是，我們將如何使用從 npm 下載的組件？（例如：react-router、react-bootstrap 等）通常當我們處理完整的 react 項目時，我們只需使用 ZBB30E85411B56DF41296726AB445 安裝它們並導入它們但是我們如何安裝這些組件或獲取它們的腳本文件，就像我們得到反應腳本文件一樣？

Answer 1

該過程將類似於 React 站點上描述的過程。 在他們的示例中，他們實現了一個簡單的單組件 ( <LikeButton /> ) 應用程序，沒有外部依賴項。 要使用外部組件/模塊，您需要將它們捆綁到您的應用程序中，或者將它們作為腳本加載。

首選方法

首選方法是使用諸如 webpack、parcel 或類似的打包器將您的代碼和模塊打包到單個腳本中。

1. 創建app.js文件，使用import加載外部組件

   import React from 'react'; import Button from '@material-ui/core/Button'; const LittleApp = () => ( <Button variant="contained" color="primary"> Hello World </Button> ); ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));

2. 使用 webpack、parcel 或類似工具將app.js捆綁到單個bundled.js文件中

3. 將bundled.js文件加載到您的頁面中

替代方法

還可以使用<script>標簽中的通用模塊定義 (UMD) 文件加載某些組件。 這可能適用於簡單的附加應用程序，但在大多數情況下可能不推薦。 我傾向於僅在原型設計想法或在 Stack Overflow 上演示解決方案時使用這些。

像這樣的東西：

 const LittleApp = () => { return ( <div> <MaterialUI.Button variant="contained" color="primary"> Hello World </MaterialUI.Button> </div> ) } ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script> <div id="littleApp"></div>

Answer 2

我認為您也可以使用<script>添加這些庫。 反應路由器： <script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>

反應引導： <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin />

檢查相應庫的文檔。

Answer 3

https://cdnjs.com/擁有許多 FOSS（免費和開源軟件）網絡庫。 搜索react-router產生可以在應用程序中使用的開發和縮小版本的鏈接。 但就像klugjo 的回答一樣，我強烈建議不要這樣做，並盡可能使用 npm 管理您的項目模塊。

Answer 4

我強烈建議不要這樣做並走標准路線：

• 使用create-react-app創建一個完整的 React 應用程序
• 使用 npm 安裝模塊
• 編寫您的應用程序
• 構建應用程序並部署生成的包（create-react-app 提供了您需要的所有工具）

像您提供的鏈接一樣從 CDN 獲取反應適用於快速概念驗證，但不適用於生產應用程序

Answer 5

一分鍾內添加 React 在本節中，我們將展示如何將 React 組件添加到現有的 HTML 頁面。 您可以跟隨您自己的網站，或創建一個空的 HTML 文件來練習。

沒有復雜的工具或安裝要求——要完成本部分，您只需要互聯網連接和一分鍾的時間。

詳細教程 - 點擊這里

快速官方文檔 - 點擊這里