加藤  七夏

加藤 七夏

1661755885

為什麼選擇 Preact 作為 ReactJS 的替代品?

React 的替代品是一系列關於不同 JavaScript 前端框架的文章。所有被檢查的框架在語法和操作上都類似於 React,但它們可能具有 React 沒有提供的好處。該系列的前兩篇文章是React 的替代品:Solid JSReact 的替代品:Inferno JS,以後還會有更多。

介紹

Preact 是一個用於構建用戶界面 (UI) 的前端庫,就像React一樣。根據官方文檔網站,Preact 是“具有相同現代 API 的 React 的快速 3kb 替代方案”。

1 Preact 的主頁

快速瀏覽一下 Preact 的特性會發現它與 React 幾乎相同,考慮到它使用虛擬 DOM、上下文、鉤子等。

在本文中,我們將深入了解 Preact 的世界。我們將了解為什麼創建這個庫,它是如何工作的,以及它與 React 的比較。我們還將討論是否應該使用 Preact。

在繼續之前,請注意本文不是關於啟動 Preact 的教程。Preact在他們的網站上提供了一個很好的教程。相反,本文比較了 React 和 Preact,以幫助您在為項目選擇框架時做出明智的決定。

關於這一點,讓我們開始吧。

Preact 的由來

加拿大軟件開發人員Jason Miller是 Preact 的作者。在題為“Putting the P in Preact”的演講中,Jason 表示他已經為 Web 構建了許多 UI 框架/模板引擎。

Jason 永遠無法構建一個完美的框架來支持他想要的一切。他一直遇到與文檔對像模型 (DOM) 相關的問題。然後他發現 JSX 和 React 滿足了他的需求和他想要的框架。

當 Jason 找到這個解決方案時,他的下一步就是學習 React。為了學習 React,他需要創建一個項目來實現 React 的工作方式。他在建造時學得更好。

Preact 最初是一個Codepen文件,它可以像 React 一樣呈現數百個 DOM 元素。Jason 不斷優化程序並添加功能。有一天,他在台式機和移動設備上為他的程序進行了速度測試。他得到的結果非常好,而且比 React 快得多。速度非常接近純 JavaScript。

根據“Putting the P in Preact”的演講,Jason 繼續進行該項目。他將它變成了一個庫,供那些無法承受 React 高昂性能成本的開發人員使用。Preact 具有與 React 幾乎相同的功能,只是更輕、更快。Github 上庫的第一個版本(v2.0.0)可追溯到 2015 年 11 月 13 日。

從那時起,Preact 社區一直在與用戶、貢獻者和維護者一起成長。

Preact 是如何工作的?

Preact 的工作方式與 React 非常相似,但它仍然對 React 的許多功能進行了單獨的實現。在本文的這一部分中,我們將研究 Preact 的核心功能,將其分為三類。這些類別是:

  • 虛擬 DOM
  • 沒有構建工具
  • 可嵌入性

虛擬 DOM

文檔對像模型 (DOM)表示任何 HTML 文檔中元素的層次結構。網頁上的每個元素也可以位於 DOM 上。另一方面,虛擬 DOM 是真實 DOM 的生成克隆。

大多數框架使用虛擬 DOM,因為使用 JavaScript 更新真實 DOM 時渲染速度較慢。這對於動態應用程序來說是一個大問題,因為它們需要不斷更新其元素。

根據Codecademy的說法,React 中啟用虛擬 DOM 的渲染經歷了以下階段:

  1. 整個虛擬 DOM 都會更新。
  2. 將 Virtual DOM 與更新前的樣子進行比較。React 計算出變化的元素(這個過程也稱為Diffing)。
  3. React 僅更新真實 DOM 上已更改的元素(此過程也稱為協調)。
  4. 用戶在頁面上看到更新的更改。

Preact 沒有像 React 那樣實現它的虛擬 DOM。在文檔網站上,它指出:

“Preact 在 DOM 之上提供了最薄的虛擬 DOM 抽象。它建立在穩定的平台特性之上,註冊了真實的事件處理程序,並與其他庫很好地配合。” (來源:Preact

簡單來說,這意味著 Preact 的虛擬 DOM 只處理真實 DOM 會發現耗時的進程。Preact 有效地使用虛擬 DOM,不像 React,它將每個任務交給虛擬 DOM。

Preact 也不使用合成事件,它是普通DOM 事件對象的抽象。相反,Preact 使用元素的真實事件處理程序及其對應的事件對象。這使得 Preact 的虛擬 DOM 更小,性能更高。

沒有構建工具

構建工具是為開發人員執行重複任務並節省時間的庫。這些類型的任務包括CSS 預處理代碼 linting、反編譯文件、捆綁文件、壓縮圖像等等。構建工具的一些示例是ParcelWebpackBrowserify。與其他前端框架一樣,React JS 依賴於底層的構建工具來在開發後創建最佳的生產輸出。

儘管構建工具在開發過程中有所幫助,但它們可能會增加項目的複雜性。開發人員可能不得不處理配置文件,或者只是花時間學習如何使用新工具。

Preact 是作為一個已經工作的解決方案交付的,不需要構建工具即可正常運行。

preact可以通過將庫導入 HTML 頁面來構建一個簡單的 Preact 應用程序。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Simple Preact App</title>
    </head>
    <body>
        <!-- PREACT APP -->
        <script type="module">
            import { h, Component, render } from 'https://unpkg.com/preact?module';

            // Create your app
            function App() {
                return h('h1', null, 'Hello World!');
            }

            render(App(), document.body);
        </script>
    </body>
</html>

(從Preact 網站修改的片段)

從上圖可以看出,因為App是一個返回h1元素的javascript函數,所以需要將該函數作為render函數的參數調用。

app聲明為變量,這也有效。

<script type="module">
    import { h, Component, render } from 'https://unpkg.com/preact?module';

    // Create your app
    const app = h('h1', null, 'Hello World!');

    render(app, document.body);
</script>

但是,在 Preact 中將 JSX 用於 DOM 元素需要一個構建步驟。Preact 提供了一個替代 JSX 的替代方法,它htm具有類似的功能和語法,但不需要構建步驟。我們將在htm本文後面討論。Preact 不需要構建工具來充分利用它。

可嵌入性

HTML 有一個iframe標籤,可以讓特定網站在另一個網站上顯示(嵌入)。將網站嵌入其他網站的重要性很高。它的主要用途是顯示主機網站最初不支持的數據(視頻、遊戲、音樂、地圖等)。具有功能的嵌入式 Web 應用程序稱為小部件。

下面是一個使用 Preact 構建的 Todo Widget。

Preact 易於嵌入,這就是為什麼 Preact 應用程序可以適應任何網站並儘可能快地加載的原因。

Preact 與 React 相比如何?

在本文部分,我們將使用一些標準來比較這兩個框架。在為項目選擇框架/庫時,這些標準是必不可少的。他們是:

  • 句法
  • 尺寸
  • 速度
  • 人氣

句法

比較 Preact 和 React 的語法,下面是一些區別。

  • 將 State 和 Props 傳遞給 Render 方法:如前所述,render類組件的方法可以接受 props 和 states。下面找到了一個表示。在 React 中,該render方法不接受任何參數。
render(props, state) {
    // Return Component
}
  • 在組件中使用class代替:正如我們在下面看到的,我們可以在 Preact中使用代替(也被接受)。classNameclassClassNameclassName
function Hello(){
    return (
        <h1 class='hello-box'>Hello World!</h1>
    );
}

組件:在 Preact 中,開發人員可以通過三種不同的方式創建組件。他們是:

  • 使用JSX。JSX 是 Preact 中渲染組件的最常用方式。
function JsxComponent(props) {
    return (
        <h1>I am rendered with JSX</h1>
    )
}
- Using [`h` or `createElement`](https://preactjs.com/guide/v8/api-reference/#preacth--preactcreateelement). `CreateElement` and `h` are functions that return virtual DOM elements in Preact. React developers can use `createElement` in Preact as it is modeled after `React.createElement`.
import { h } from 'preact';

function HComponent(props) {
    return h('h1', null, 'I an rendered with h')
}
- Using [`htm`](https://preactjs.com/guide/v10/getting-started#alternatives-to-jsx). `htm` is the recommended way of creating components in Preact. This is because using `h` or `createElement` can be tedious. Also, JSX needs to compile to standard JavaScript before it works. `htm` combines the power of `h` and the ease of JSX.
import { h, render } from 'preact';

import { htm } from 'htm';

// Initialize htm with Preact 
const html = htm.bind(h);

function HtmComponent(props) {
    return (
        html`<h1>I am rendered with HTM</h1>`
    )
}

React 開發人員只能通過兩種方式創建組件:使用 JSX 和使用React.createElement. 在這裡得出的一個結論是,創建 Preact 組件的靈活性稍高一些。

尺寸

正如 Preact 的網站上所說,它是一個只有 3kb 大小的庫。Bundlephobia報告說 Preact 的大小,經過壓縮和 gzip 壓縮後為 4kb。

2 Preact 在 Bundlephobia 上的大小

一個名為的 npm 包package-size也證實了這一點。

3 Preact 在 package-size npm 包上的大小

一個可能的原因是較新的更新增加了源代碼大小。但是,Preact 通過定期刪除不推薦使用的功能或將一些 API 專用於單獨的模塊來始終保持 4kb 以下的大小。

考慮到使用 React 需要超過 40kb 的內存,Preact 這麼小仍然令人印象深刻。一個 React 應用程序需要大小分別為 2.5kbreactreact-dom42kb(Minified + Gzipped)。

速度

速度是選擇框架時需要考慮的一個重要因素。我們將使用Stefan Krause 的 Javascript 框架基準將Preact 與 React 進行比較。該實驗測試了三個類別的框架。這些類別是:

持續時間:持續時間類別確定 javascript 框架在頁面上呈現或更新更改所需的毫秒數。這里分配給框架的任務包括創建表的 1,000 行、更新表的所有 1,000 行、將 1,000 行追加到 10,000 行的表中,等等。雖然在本文之前發布的最新實驗中 React 似乎很快,但Preact 在該類別中的平均表現優於 React。這意味著,平均而言,Preact 更新 DOM 的速度更快。

啟動指標:這些是使用Lighthouse獲取的,並在移動設備上模擬網站。它運行有關框架如何正確利用 CPU 的測試。此類別還衡量生產中框架資產的構建大小。這兩個框架在這裡都表現良好,但 Preact 仍然擊敗了 React。

內存分配:這測量了框架在瀏覽器會話中使用的內存量。此內存以兆字節 (MB) 為單位。在這個類別中,測量頁面加載後的內存使用量、添加 1000 行後的內存使用量、創建 1000 行五次後的內存使用量等。平均而言,Preact 在所有場景中使用較低內存的性能略好於 React。可以在此博客文章中找到深入解釋基準的文章。

人氣

我們要考慮的最後一個因素是受歡迎程度。這些框架之間的流行程度如何?受歡迎程度決定了開發人員在項目陷入困境時將獲得多少幫助。

在本文之前進行的最後一次State of JS 調查中,Preact 作為前端框架的認知度排名第六(80%)。大多數受訪者都聽說過這個框架,儘管 React 擊敗了 Preact。

4 Preact 的意識

在使用中,事實證明只有 14% 的受訪者使用 Preact。React 在這一類別中也擊敗了 Preact。

5 Preact 的使用

每年,Preact 的興趣和滿意度都在下降。

6 對 Preact 的興趣

7 Preact 的滿意度

像這樣的曲線對於框架來說並不是一個好的曲線,但對 React 的興趣和滿意度也在下降。儘管如此,今天仍有數百萬個網站由 React 提供支持。所以我認為這不是太擔心的事情。

結論

在本文中,我們將 Preact 視為 React 的替代品。我們首先了解了框架是如何形成的,然後我們研究了框架的特性。我們還在某些類別中將框架與 React 進行了比較。

Preact 的小尺寸和速度確實是相對於相對巨大的 React 和 React DOM 的優勢。這一優勢吸引了Dev.toEtsySmashing MagazineUber許多其他受歡迎的組織將 Preact 添加到他們的堆棧中。

如果你想讓一個新的單頁應用程序更輕量級或者你想為一個網頁構建一個動態小部件,你應該使用 Preact。如果應用程序已經存在並且您仍想遷移到 Preact,Preact 提供了一個調用preact-compat來執行此操作的功能。

鏈接:https ://blog.openreplay.com/alternatives-to-react-preact

#preact #react #reacjs

What is GEEK

Buddha Community

為什麼選擇 Preact 作為 ReactJS 的替代品?

Byte Cipher

1617110327

ReactJS Development Company USA | ReactJS Web Development Company

ByteCipher is one of the leading React JS app development Companies. We offer innovative, efficient and high performing app solutions. As a ReactJS web development company, ByteCipher is providing services for customized web app development, front end app development services, astonishing react to JS UI/UX development and designing solutions, reactJS app support and maintenance services, etc.

#reactjs development company usa #reactjs web development company #reactjs development company in india #reactjs development company india #reactjs development india

加藤  七夏

加藤 七夏

1661755885

為什麼選擇 Preact 作為 ReactJS 的替代品?

React 的替代品是一系列關於不同 JavaScript 前端框架的文章。所有被檢查的框架在語法和操作上都類似於 React,但它們可能具有 React 沒有提供的好處。該系列的前兩篇文章是React 的替代品:Solid JSReact 的替代品:Inferno JS,以後還會有更多。

介紹

Preact 是一個用於構建用戶界面 (UI) 的前端庫,就像React一樣。根據官方文檔網站,Preact 是“具有相同現代 API 的 React 的快速 3kb 替代方案”。

1 Preact 的主頁

快速瀏覽一下 Preact 的特性會發現它與 React 幾乎相同,考慮到它使用虛擬 DOM、上下文、鉤子等。

在本文中,我們將深入了解 Preact 的世界。我們將了解為什麼創建這個庫,它是如何工作的,以及它與 React 的比較。我們還將討論是否應該使用 Preact。

在繼續之前,請注意本文不是關於啟動 Preact 的教程。Preact在他們的網站上提供了一個很好的教程。相反,本文比較了 React 和 Preact,以幫助您在為項目選擇框架時做出明智的決定。

關於這一點,讓我們開始吧。

Preact 的由來

加拿大軟件開發人員Jason Miller是 Preact 的作者。在題為“Putting the P in Preact”的演講中,Jason 表示他已經為 Web 構建了許多 UI 框架/模板引擎。

Jason 永遠無法構建一個完美的框架來支持他想要的一切。他一直遇到與文檔對像模型 (DOM) 相關的問題。然後他發現 JSX 和 React 滿足了他的需求和他想要的框架。

當 Jason 找到這個解決方案時,他的下一步就是學習 React。為了學習 React,他需要創建一個項目來實現 React 的工作方式。他在建造時學得更好。

Preact 最初是一個Codepen文件,它可以像 React 一樣呈現數百個 DOM 元素。Jason 不斷優化程序並添加功能。有一天,他在台式機和移動設備上為他的程序進行了速度測試。他得到的結果非常好,而且比 React 快得多。速度非常接近純 JavaScript。

根據“Putting the P in Preact”的演講,Jason 繼續進行該項目。他將它變成了一個庫,供那些無法承受 React 高昂性能成本的開發人員使用。Preact 具有與 React 幾乎相同的功能,只是更輕、更快。Github 上庫的第一個版本(v2.0.0)可追溯到 2015 年 11 月 13 日。

從那時起,Preact 社區一直在與用戶、貢獻者和維護者一起成長。

Preact 是如何工作的?

Preact 的工作方式與 React 非常相似,但它仍然對 React 的許多功能進行了單獨的實現。在本文的這一部分中,我們將研究 Preact 的核心功能,將其分為三類。這些類別是:

  • 虛擬 DOM
  • 沒有構建工具
  • 可嵌入性

虛擬 DOM

文檔對像模型 (DOM)表示任何 HTML 文檔中元素的層次結構。網頁上的每個元素也可以位於 DOM 上。另一方面,虛擬 DOM 是真實 DOM 的生成克隆。

大多數框架使用虛擬 DOM,因為使用 JavaScript 更新真實 DOM 時渲染速度較慢。這對於動態應用程序來說是一個大問題,因為它們需要不斷更新其元素。

根據Codecademy的說法,React 中啟用虛擬 DOM 的渲染經歷了以下階段:

  1. 整個虛擬 DOM 都會更新。
  2. 將 Virtual DOM 與更新前的樣子進行比較。React 計算出變化的元素(這個過程也稱為Diffing)。
  3. React 僅更新真實 DOM 上已更改的元素(此過程也稱為協調)。
  4. 用戶在頁面上看到更新的更改。

Preact 沒有像 React 那樣實現它的虛擬 DOM。在文檔網站上,它指出:

“Preact 在 DOM 之上提供了最薄的虛擬 DOM 抽象。它建立在穩定的平台特性之上,註冊了真實的事件處理程序,並與其他庫很好地配合。” (來源:Preact

簡單來說,這意味著 Preact 的虛擬 DOM 只處理真實 DOM 會發現耗時的進程。Preact 有效地使用虛擬 DOM,不像 React,它將每個任務交給虛擬 DOM。

Preact 也不使用合成事件,它是普通DOM 事件對象的抽象。相反,Preact 使用元素的真實事件處理程序及其對應的事件對象。這使得 Preact 的虛擬 DOM 更小,性能更高。

沒有構建工具

構建工具是為開發人員執行重複任務並節省時間的庫。這些類型的任務包括CSS 預處理代碼 linting、反編譯文件、捆綁文件、壓縮圖像等等。構建工具的一些示例是ParcelWebpackBrowserify。與其他前端框架一樣,React JS 依賴於底層的構建工具來在開發後創建最佳的生產輸出。

儘管構建工具在開發過程中有所幫助,但它們可能會增加項目的複雜性。開發人員可能不得不處理配置文件,或者只是花時間學習如何使用新工具。

Preact 是作為一個已經工作的解決方案交付的,不需要構建工具即可正常運行。

preact可以通過將庫導入 HTML 頁面來構建一個簡單的 Preact 應用程序。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Simple Preact App</title>
    </head>
    <body>
        <!-- PREACT APP -->
        <script type="module">
            import { h, Component, render } from 'https://unpkg.com/preact?module';

            // Create your app
            function App() {
                return h('h1', null, 'Hello World!');
            }

            render(App(), document.body);
        </script>
    </body>
</html>

(從Preact 網站修改的片段)

從上圖可以看出,因為App是一個返回h1元素的javascript函數,所以需要將該函數作為render函數的參數調用。

app聲明為變量,這也有效。

<script type="module">
    import { h, Component, render } from 'https://unpkg.com/preact?module';

    // Create your app
    const app = h('h1', null, 'Hello World!');

    render(app, document.body);
</script>

但是,在 Preact 中將 JSX 用於 DOM 元素需要一個構建步驟。Preact 提供了一個替代 JSX 的替代方法,它htm具有類似的功能和語法,但不需要構建步驟。我們將在htm本文後面討論。Preact 不需要構建工具來充分利用它。

可嵌入性

HTML 有一個iframe標籤,可以讓特定網站在另一個網站上顯示(嵌入)。將網站嵌入其他網站的重要性很高。它的主要用途是顯示主機網站最初不支持的數據(視頻、遊戲、音樂、地圖等)。具有功能的嵌入式 Web 應用程序稱為小部件。

下面是一個使用 Preact 構建的 Todo Widget。

Preact 易於嵌入,這就是為什麼 Preact 應用程序可以適應任何網站並儘可能快地加載的原因。

Preact 與 React 相比如何?

在本文部分,我們將使用一些標準來比較這兩個框架。在為項目選擇框架/庫時,這些標準是必不可少的。他們是:

  • 句法
  • 尺寸
  • 速度
  • 人氣

句法

比較 Preact 和 React 的語法,下面是一些區別。

  • 將 State 和 Props 傳遞給 Render 方法:如前所述,render類組件的方法可以接受 props 和 states。下面找到了一個表示。在 React 中,該render方法不接受任何參數。
render(props, state) {
    // Return Component
}
  • 在組件中使用class代替:正如我們在下面看到的,我們可以在 Preact中使用代替(也被接受)。classNameclassClassNameclassName
function Hello(){
    return (
        <h1 class='hello-box'>Hello World!</h1>
    );
}

組件:在 Preact 中,開發人員可以通過三種不同的方式創建組件。他們是:

  • 使用JSX。JSX 是 Preact 中渲染組件的最常用方式。
function JsxComponent(props) {
    return (
        <h1>I am rendered with JSX</h1>
    )
}
- Using [`h` or `createElement`](https://preactjs.com/guide/v8/api-reference/#preacth--preactcreateelement). `CreateElement` and `h` are functions that return virtual DOM elements in Preact. React developers can use `createElement` in Preact as it is modeled after `React.createElement`.
import { h } from 'preact';

function HComponent(props) {
    return h('h1', null, 'I an rendered with h')
}
- Using [`htm`](https://preactjs.com/guide/v10/getting-started#alternatives-to-jsx). `htm` is the recommended way of creating components in Preact. This is because using `h` or `createElement` can be tedious. Also, JSX needs to compile to standard JavaScript before it works. `htm` combines the power of `h` and the ease of JSX.
import { h, render } from 'preact';

import { htm } from 'htm';

// Initialize htm with Preact 
const html = htm.bind(h);

function HtmComponent(props) {
    return (
        html`<h1>I am rendered with HTM</h1>`
    )
}

React 開發人員只能通過兩種方式創建組件:使用 JSX 和使用React.createElement. 在這裡得出的一個結論是,創建 Preact 組件的靈活性稍高一些。

尺寸

正如 Preact 的網站上所說,它是一個只有 3kb 大小的庫。Bundlephobia報告說 Preact 的大小,經過壓縮和 gzip 壓縮後為 4kb。

2 Preact 在 Bundlephobia 上的大小

一個名為的 npm 包package-size也證實了這一點。

3 Preact 在 package-size npm 包上的大小

一個可能的原因是較新的更新增加了源代碼大小。但是,Preact 通過定期刪除不推薦使用的功能或將一些 API 專用於單獨的模塊來始終保持 4kb 以下的大小。

考慮到使用 React 需要超過 40kb 的內存,Preact 這麼小仍然令人印象深刻。一個 React 應用程序需要大小分別為 2.5kbreactreact-dom42kb(Minified + Gzipped)。

速度

速度是選擇框架時需要考慮的一個重要因素。我們將使用Stefan Krause 的 Javascript 框架基準將Preact 與 React 進行比較。該實驗測試了三個類別的框架。這些類別是:

持續時間:持續時間類別確定 javascript 框架在頁面上呈現或更新更改所需的毫秒數。這里分配給框架的任務包括創建表的 1,000 行、更新表的所有 1,000 行、將 1,000 行追加到 10,000 行的表中,等等。雖然在本文之前發布的最新實驗中 React 似乎很快,但Preact 在該類別中的平均表現優於 React。這意味著,平均而言,Preact 更新 DOM 的速度更快。

啟動指標:這些是使用Lighthouse獲取的,並在移動設備上模擬網站。它運行有關框架如何正確利用 CPU 的測試。此類別還衡量生產中框架資產的構建大小。這兩個框架在這裡都表現良好,但 Preact 仍然擊敗了 React。

內存分配:這測量了框架在瀏覽器會話中使用的內存量。此內存以兆字節 (MB) 為單位。在這個類別中,測量頁面加載後的內存使用量、添加 1000 行後的內存使用量、創建 1000 行五次後的內存使用量等。平均而言,Preact 在所有場景中使用較低內存的性能略好於 React。可以在此博客文章中找到深入解釋基準的文章。

人氣

我們要考慮的最後一個因素是受歡迎程度。這些框架之間的流行程度如何?受歡迎程度決定了開發人員在項目陷入困境時將獲得多少幫助。

在本文之前進行的最後一次State of JS 調查中,Preact 作為前端框架的認知度排名第六(80%)。大多數受訪者都聽說過這個框架,儘管 React 擊敗了 Preact。

4 Preact 的意識

在使用中,事實證明只有 14% 的受訪者使用 Preact。React 在這一類別中也擊敗了 Preact。

5 Preact 的使用

每年,Preact 的興趣和滿意度都在下降。

6 對 Preact 的興趣

7 Preact 的滿意度

像這樣的曲線對於框架來說並不是一個好的曲線,但對 React 的興趣和滿意度也在下降。儘管如此,今天仍有數百萬個網站由 React 提供支持。所以我認為這不是太擔心的事情。

結論

在本文中,我們將 Preact 視為 React 的替代品。我們首先了解了框架是如何形成的,然後我們研究了框架的特性。我們還在某些類別中將框架與 React 進行了比較。

Preact 的小尺寸和速度確實是相對於相對巨大的 React 和 React DOM 的優勢。這一優勢吸引了Dev.toEtsySmashing MagazineUber許多其他受歡迎的組織將 Preact 添加到他們的堆棧中。

如果你想讓一個新的單頁應用程序更輕量級或者你想為一個網頁構建一個動態小部件,你應該使用 Preact。如果應用程序已經存在並且您仍想遷移到 Preact,Preact 提供了一個調用preact-compat來執行此操作的功能。

鏈接:https ://blog.openreplay.com/alternatives-to-react-preact

#preact #react #reacjs

Top React JS App Development Company in USA | React JS Services

Hire ReactJS app developers for end-to-end services starting from development to customization with AppClues Infotech.

Are you looking for the best company in USA that provides high-quality ReactJS app development services? Having expertise in building robust and real-time mobile apps using React Native Library.

We can fully support your specific business idea with outstanding tech skills and deliver a perfect mobile app on time.

Our ReactJS App Development Services
• Custom ReactJS Development
• ReactJS Consulting
• React UX/UI development and design
• App modernization using React
• React Native mobile development
• Dedicated React development team
• Application migration to React

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#top reactjs app development company in usa #hire best reactjs app developers #best reactjs app development services #custom reactjs app development agency #how to develop reactjs app #cost to build reactjs application

Why ReactJS is better for Web Application Development?

Web Application Development is essential for a business in today’s digital era. Finding the right platform for Web Application Development is important for building an effective Web Application that can enhance the overall customer engagement. Here’s what makes ReactJS a better option for building your next Web Application.

#Why ReactJS is better for Web Application Development #Benefits of ReactJS #What is ReactJS? #ReactJS vs AngularJS

Epic Games Store ReactJS UI -NextJS, MaterialUI, ReactJS, TypeScript -Login Form Design #5

Hi, in this series we will try to build fullstack application with NestJS, NextJS, ReactJS, PostgreSQL and TypeScript. My aim is to build something bigger and more interesting. Features like authorization or using database are always tricky so I think it’s good to implement on your own to understand how they work. We will build both API and web application. Our app is a funny little approach to mimic something like a game library and we will try to recreate Epic Games Store.

Have you ever wondered how are real app design and written? In this series I will try to reproduce at least some functionalities of Epic Games Store. In the fifth episode I am recreating the login form. We’ll use NextJS, MaterialUI, ReactJS and TypeScript.

You can find me here:

https://twitter.com/wojciech_bilick
https://medium.com/@wojciech.bilicki
https://github.com/wojciech-bilicki


ignore

nextjs
materialui
reactjs
typescript
web design
html
web development
css
html5
css3
es6
programming
basics
tutorial
javascript
how to make a website
responsive design tutorial
web development tutorial
media queries
website from scratch
html css
responsive website tutorial
responsive web development
web developer
how to make a responsive website
how to build a website from scratch
how to build a website
build a website
How to

#reactjs ui #reactjs #materialui #nextjs #typescript #reactjs