將 React 與 JSX 的現有應用程序結合使用

Question

我們計划為我開發了 10 年的 CMS 項目轉換新技術，例如 react。

到目前為止，前端的一切都很簡單明了。

首先包含 jquery.js，然后在必要時包含組件和第三方腳本，然后編碼並與 DOM 共舞。

但是現在在嘗試跳入更高水平的技術和不同的方法時，事情對我來說很容易變得非常復雜。

在花了 10 多個小時閱讀 React 文檔和教程之后，我對它是什么以及它是如何工作的有了很好的理解。

但是我意識到我對一些流行的概念非常陌生。 我從來沒有用過 node.js，從來沒有用過 npm、babel、webpack，還有很多我在任何地方都見過的“新”的東西。 因為 React，我與這些工具面對面，我相信這些是現代前端開發的必然。

現在的問題

我們的 CMS 在 PHP 上運行，並且在前端嚴重依賴 MooTools。 我只是想在某些情況下部分嘗試新技術，而不是完全重寫 10 年前的 CMS。 決定從 React 開始。

對於這種情況，我也想將ag-Grid集成到 React。

我不明白的是如何將所有這些工具組合在一起。

由於 ag-Grid，我將無法使用簡單的包含 js 的反應方式。

在示例中編寫的代碼有一些 JSX。 這意味着我們編寫 JSX 並運行它為瀏覽器翻譯以測試它是否正常。

• 每次測試前我都需要翻譯這些文件嗎？
• 如果文件被翻譯，調試會變得非常復雜嗎？
• babel 可以在運行時完成嗎？ 如果是，這是一個好習慣。
• node_modules 文件夾中有很多文件。 我應該包括哪些用於生產？

網絡上的所有來源都是非常理論化的，並假設有知識。 需要一些最佳實踐指導。

有很多問題，而且沒有一個從開始到生產的分步指南。

Answer 1

JSX 是對符合規范的 JavaScript 的擴展。 它是React.createElement(...)語法糖，在 React 開發中是可選的。

React 可以用普通的 ES5 編寫：

React.createElement("div", { foo: "foo" });

代替 JSX：

<div foo="foo" />

或者使用像h這樣的輔助函數來實現相同的目標，例如react-hyperscript 。

有 PHP后端應用程序的事實並不能阻止使用 JSX 開發 React前端應用程序。 這可能需要將 React 項目配置為不使用內置 Express Web 服務器並將客戶端應用程序構建到自定義位置，即現有應用程序的公共文件夾。 如果使用create-react-app ，這可能需要彈出項目）。

每次測試前我都需要翻譯這些文件嗎？

它們應該被轉換為純 JavaScript（如果它針對舊瀏覽器，則為 ES5）。 當客戶端項目以監視模式（通常是npm start ）運行時，它們可以在源文件的每次更改時進行轉換。

如果文件被翻譯，調試會變得非常復雜嗎？

這就是源映射的用途。

babel 可以在運行時完成嗎？ 如果是，這是一個好習慣。

可以在運行時使用 Babel，這不是一個好習慣，即使在開發環境中也是如此。

node_modules 文件夾中有很多文件。 我應該包括哪些用於生產？

node_modules 的內容無關緊要。 幾乎所有這些都是構建客戶端應用程序所需的開發依賴項。 這是打包create-react-app的任務，它是create-react-app模板中的 Webpack。 它在dist文件夾中構建對普通 JS 的項目依賴項。