說明
支持我們

範例與示範

此頁面列出許多範例與示範,供您學習 Preact。

:information_desk_person: 建置您自己的範例? 新增它!

完整應用程式

Preact 網站 (preactjs.com)
當然,此網站是使用 Preact 建置的。
Github 專案

ESBench :alarm_clock
使用 Preact 和 Material Design Lite 建置。

GuriVR :eyeglasses: 基於自然語言的 Web VR 故事建立器。
Github 專案

BigWebQuiz :game_die
來自 Chrome Dev Summit 2016 的觀眾參與式漸進式網路應用程式! Github 專案

Nectarine.rocks :peach
開放原始碼的 peach.cool 應用程式。
Github 專案

Web Maker :zap: 超快速且離線的前端遊樂場。 Github 專案

BitMidi :musical_keyboard: 免費 MIDI 檔案的時光機 Github 專案

BBC 烤肉計算器 :turkey: 計算不同肉類的烹飪時間。

Dropfox :wolf
使用 Preact、Electron 和 Photon 建置的 Dropbox 桌面應用程式。

嵌入 Hacker News :kissing_closed_eyes: 在部落格文章下方嵌入 Hacker News 留言串。

連線性指標 :iphone
一個網站,讓你可以搜尋 Akamai 網際網路連線性報告 中依國家分類的資料。

拖放檔案上傳(webpack 2) :rocket: 桌面應用程式,用於將素材上傳至 Contentful(基於 API 的 CMS)Github 專案

匯率小工具 :currency_exchange: 匯率小工具,靈感來自一個熱門的手機應用程式,使用 Preact、Meiosis、HTML 標記範本和原生 ES 模組實作。Github 專案

Blaze :zap
現代的點對點檔案分享漸進式網路應用程式。
Github 專案

1tuner :radio
收聽廣播和 Podcast。
Github 專案

完整的示範與範例

文件檢視器
線上檢視 documentation.js 輸出。
Github 專案

TodoMVC
非官方最快的 TodoMVC 實作。
Github 專案

TodoMVC+PouchDB :floppy_disk
使用 PouchDB 進行 TodoMVC 離線同步。Github 專案

Hacker News Minimal :newspaper
極小的 Hacker News 應用程式。
Github 專案

Preact Boilerplate :zap
2 個指令的入門專案。Preact + Webpack + LESS + CSS 模組。
Github 專案

Preact 離線入門 :100:
簡化的 Webpack2 起始器,適用於漸進式網路應用程式,並支援離線模式。
Github 專案

Preact Redux 範例 :repeat
Preact + Redux 範例專案,實作一個簡單的待辦事項清單。
Github 專案

沒有 Babel 的 Preact :horse
如何在完全沒有 Babel、ES2015 或 JSX 的情況下使用 Preact。

preact-minimal :rocket
最小的 Preact 結構,具備所有必要的工具,可立即啟動專案。

preact-typescript-webpack4-less 另一個最小的集合,包含 Preact、Typescript 和 Webpack 4。

Preact 首頁產生器 :globe_with_meridians
只需修改 JSON 資料,即可快速建立新的個人網頁。Github 專案

Parcel + Preact + Unistore 起始器 適用於極速原型製作和中小型專案結構的入門套件

buildless-preact-starter :rocket: 在沒有建置環境中使用 Preact 的入門套件/範本

Codepens

範本

:zap: JSFiddle 範本

:zap: CodePen 範本