這篇文章旨在通過我的80/20方法，幫助你開始使用 Remix。跳過冗餘的部分，學習核心內容。

Remix是一個基於React的新框架，已經達到了1.0版本，並以MIT許可證公開發布，這是我們都喜愛的許可證。

注意：昨天它還是贊助軟件，現在它是公開的和免費的

你知道Next.js嗎？或者 SvelteKit？嗯，Remix有點像它們，但是具有一些獨特的功能，使它成為一個有趣的選擇。但是它不支持靜態網站，因此它始終需要一個服務器。這使它對於一些用例很合適，對於另一些用例可能不太合適。

它適用於具有數據庫、動態數據、具有私有數據的用戶帳戶等用例，例如Rails、Django或Laravel應用程序。

在JavaScript世界中，它更像是RedwoodJS或Blitz.js的替代品，也就是它更多地用於構建應用程序，而不僅僅是網站。

是的，這看起來是一個很好的定位。

我們可以使用npx創建一個新的Remix項目，這樣我們就不需要先安裝任何東西或創建文件夾。

只需進入包含您的項目的文件夾（對我來說通常是dev或www），然後輸入以下命令：

npx remix init

選擇要安裝的文件夾：

选择“Remix App Server”（內置服務器）選項：

选择JavaScript，或者如果您喜歡的話可以選擇TypeScript：

確保告訴安裝程序運行npm install以便為您設置一切：

然後運行cd <文件夾名>，然後運行npm run dev。

看到默認安裝的結果總是令人愉悅的：

生成此結果的代碼如下：

但是，我們實際上只對app文件夾感興趣，其他部分只是樣板/配置：

讓我們來分析一下。

src文件夾中有3個文件：

  • entry.client.jsx
  • entry.server.jsx
  • root.jsx

這些文件用於設置整個網站的功能，包括所有頁面的HTML輸出。如果您觸摸它們，整個應用程序都會受到影響。這也是錯誤處理的地方，在Remix中，錯誤處理是一個一級方面，這很酷。

然後，我們有一個routes文件夾，其中有一個index.jsx文件，以及一個demos文件夾，其中包含一些示例應用程序。

讓我們從routes/index.jsx開始。

這是一個很長的React組件：

現在，此文件可以簡化成以下簡單的React組件：

如果您這樣做並保存文件，您將在應用程序中看到以下內容：

但是，此文件不僅僅輸出一些JSX，它還加載了服務器端的數據，通過loader()函數：

json()是一個特殊的實用工具，可以輕鬆創建一個JSON端點，Remix在頁面加載時將調用它，以填充所需的數據。

在渲染組件的JSX時，我們必須導入並調用useLoaderData()：

文件還導出了一個meta()函數，用於設置頁面HTML頭部的元數據。

在Remix中，路由是發生“核心”功能的地方。這是可以理解的，因為Remix是由創建React Router的人創建的，所以路由器是應用程序的核心部分。

官方教程已經講解了如何創建自定義路由和處理表單，所以我現在不再進一步詳細介紹。

我建議您瀏覽一下教程，尤其是關於表單的部分。

為什麼呢？因為在React中，表單是一個很大的痛點，所以能夠看到這種非常簡單的方法來創建表單，而無需編寫大量的樣板代碼，這是很好的。

Remix最好的部分是子路由以及在前React時代Ember的outlets如何基本上複製了我們之前所做的事情，這是合理的，因為我記得Ryan Florence曾經活躍於Ember社區。

看到一個領域取得進展很棒，畢竟這個領域沒有出現任何大的老牌競爭者，Next.js基本上是樹上的大象，到目前為止，當我要編寫應用程序時，我一直首選它。

在適當的時候，我仍然會選擇它。我喜歡新技術，但是它也需要很長的時間才能成熟，有人編寫庫、教程等等。

但是競爭能夠促進創新，所以擁有一個不同於現有選擇的特殊選項總是很好。