WinForm 設計師的 Web 開發秘訣：DevExtreme 教學

 

作者：吳祐賓

 

許多 WinForm 設計者都被傳統開發方式所制約，要在短時間內寫出符合桌面、平板、手機通用的畫面實在是非常困難。坊間有許多解決方案，以後端 (Back-End) 設計為主的有：ASP.NET 的 Web Form；Delphi 的 IntraWeb、UniGUI 等他們都是以傳統 WinForm 設計概念所發展的框架，佈局和 UI 元件都已經配置好，設計者只要會操作即可。

 

後端設計很好，但前端仍然要碰

 

後端玩過一陣後，還是覺得以後端為主的 Web 應用程式很沉重，不論是設計還是操作上都是。除此之外，前後端混雜交錯的網頁 (MVC 裡的 V 最明顯) 複雜的程度很高，能接手的大多已是專家級，能交付任務的人選並不多。WinForm 轉 Web 的設計師往往是蠟燭兩頭燒，有沒有更好的作法？

 

前端框架學完才發現只有骨架

 

WinForm 設計者已經習慣邏輯設計，全心學習前端後，我的情況是發現：三大框架 Angular、VUE、React 都只有設計框架，佈局、元件還得另學 HTML、CSS。後台要的格式就那樣，每次都要手刻也太辛苦。而且前端 CSS 佈局難度其實比邏輯更加困難，如果有人可以把 UI 調整一致就能讓我專注在邏輯上了。

 

入門？就從 DevExtreme 開始

 

Bootstrap、EasyUI 都有推 Augular, VUE, React 元件，佈局也沒問題，然而 DevExtreme 還提供了命令列工具，新增頁面、調整配色都可以使用 DevExtreme-CLI 命令列工具完成，這種感覺和操作 Visual Studio Code 的 File > New File 快沒什麼兩樣了。但在這之前請先安裝好 DevExtreme-CLI，如果還沒安裝，請先參閱：【翻譯】建立 DevExtreme React 應用程式 

 

以 DevExtreme + React 為例，建立 Web 應用程式專案

 

使用如下的 DevExtreme-CLI 指令建立 my-hello-world 專案，並以預設值：TypeScript、Outer toolbar Layout 作為開始。建立完成後進入該目錄。

 

devextreme new react-app my-hello-world
cd my-hello-world

建立 HelloWorld 分頁

專案剛建立會有幾張頁面，以方便我們參考。在使用 Visual Studio Code 開啟目錄之前，我們先使用 DevExtreme-CLI 建立一張新頁面，使用指令：

 

devextreme add view HelloWorld

 

接下來啟動 Visual Studio Code， 開啟 my-hello-world 目錄，可以在 Pages 路徑看到剛才建立的 HelloWorld 資料夾，裡面有 HelloWorld.css 和 HelloWorld.tsx 檔案，副檔名 tsx 表示為 支援 TypeScript 的設計檔案。畫面應如下顯示：

 

主菜 -- 建立 Button

 

接在 import 區的最末句，輸入：

import { Button } from 'devextreme-react';

 

把 "Put your content here" 內容置換為 Button 標籤，並設定按下後會跳出 Hello World 的提示訊息：

 

<Button text='Eden Button' onClick={()=>alert("Hello World!")}></Button>

 

此時程式畫面應如下所示：

 

啟動 Hello World 服務，來看成果吧！

 

開啟 Visual Studio Code 的終端機頁面，輸入：

 

npm run start

 

啟動網站後等它一段時間，系統會自動開啟瀏覽器，並開啟我們的 my-hello-world 網站。接下來點擊選單中的 HelloWorld 項目就會看到剛剛我們所建立的頁面，裡面會看到一個按鈕，按下後就會看到 Hello World 的提示訊息。此時畫面效果應該如下所示：

總結

 

習慣 WinForm 體貼的 IDE 工具開發者在切換到指令模式可能剛開始還不習慣。把上述的指令多敲幾次後就會習慣使用 DevExtreme-CLI 的開發模式。

和完全從無到有的鍵盤輸入，DevExtreme-CLI 縮短了很多重複建立環境的時間。下一回我會介紹選單內容和標題的修改的教學。

 

和你分享

 

See also

 

• 【翻譯】建立 DevExtreme React 應用程式
• 文首圖片來源：Pexels 上由 Maria Tyutina 拍攝的相片: https://www.pexels.com/zh-tw/photo/hello-hello-moulding-clay-954599/

如何在 React 18 使用 React Router v6.4 建立路由，超簡單

作者：吳祐賓

React Router 目的在實現"客戶端路由" (Client Site Routing)。官方文件是這麼介紹的：

在傳統網站(Server Site)，瀏覽器從網站服務端下載文件，解析 CSS 和 JavaScript 資源，之後呈現服務端所要顯示的 HTML 內容。當使用者點擊網頁內的超連結時，它會在頁面(同一個或新頁面)上重新啟動此流程。

客戶端路由可以實現在您的頁面透過點擊超連結更新 URL 時，不需要再從網站服務端再次下載另一個文件。您的頁面可以立即顯示一些新的 UI，並使用 fetch 實現 AJAX，以新資訊來刷新頁面。來讓使用者有更好的操作體驗

React Router 和 React Redux 幾乎是 React 開發者必須會學會的函式庫，本篇文章會逐步帶你邊做邊學如何在 React 18 使用 React Router v6 建立路由，超簡單

 

前置作業：安裝 pnpm 管理 npm 套件

因為 pnpm 官方是這麼說的：

使用 npm 時，若您有 100 件專案都使用了同個依附套件，磁碟中就會有 100 份該套件的副本。 反之，有了 pnpm，該依附套件會被儲存在一個由內容定址的儲存區，因此：

    如果您同時需要該依附套件的不同版本，只有存在差異的檔案才會被加入儲存區。 例如，如果此依賴套件有 100 個檔案，而新的 版本僅變更其中一個檔案，則 pnpm update 將只會新增一個 新的檔案到儲存庫中，而不會為了單一檔案的變更而複製整個依賴套件。
    所有依賴套件的檔案將被儲存在磁碟中的單一位置。 當依賴套件被 安裝時，依賴套件的檔案會被硬鏈結至該位置，不會消耗 額外的磁碟空間。 這將允許您在不同專案之間共享相同版本的依賴套件。

由於上述原因，您將節省大量的磁碟空間，這將與您的 專案和依賴套件的數量成正比，並且將大幅提升安裝的速度！

所以我現在也改用 pnpm 來管理 npm 套件：

npm install -g pnpm

Step 1. 建立新的 React 應用程式

使用 pnpm 建立 React 應用程式：

pnpm create vite my-react-router --template react

移動到建立的目錄中

cd my-react-router

安裝專案所需套件

pnpm install

Step 2. 建立呈現的頁面

在資料夾 src 中建立 pages 資料夾

接著在資料夾 src/pages 建立 Home.jsx

const Home = () => <div>Home</div>

export default Home

接著在資料夾 src/pages 建立 Content.jsx

const Content = () => <div>Content</div>

export default Content

接著在資料夾 src/pages 建立 About.jsx

const About = () => <div>About Me</div>

export default About

Step 3. 安裝本次主角： React Router npm 套件

使用官方教學的安裝指令進行安裝：

pnpm install react-router-dom localforage match-sorter sort-by

 

Step 4. 註冊 Router

這裡註冊 Router 的意思是指建立一個路由分配器，建立時也一併新建路徑及對應頁面，打開 src/main.jsx，修改後文件應該會如下表所示。

src/main.jsx

import React from 'react'

import ReactDOM from 'react-dom/client'

import App from './App.jsx'

import './index.css'

import {

  createBrowserRouter,

  RouterProvider,

} from "react-router-dom";

import Home from "./pages/Home"

import Content from "./pages/Content"

import About from "./pages/About"

const router = createBrowserRouter([

  {

    path: "/",

    element: <App />,

    children: [

      {

        path: "Home",

        element: <Home />,

      },

      {

        path: "content",

        element: <Content />,

      },

      {

        path: "about",

        element: <About />,

      },

    ],

  },

]);

ReactDOM.createRoot(document.getElementById('root')).render(

  <React.StrictMode>

    <RouterProvider router={router} />

  </React.StrictMode>,

)

因為我計畫在 Root Layout 裡切換分頁，所以在 root 裡加入 children 內容。

Step 5. 製作導覽功能

開啟 src/App.jsx ，並加入導覽介面，將以下程式碼置換原模板內容

 

src/App.jsx

import './App.css'

import { Routes, Route, NavLink, Outlet } from "react-router-dom";

import Home from './pages/Home'

import Content from './pages/Content';

import About from './pages/About';

function Layout() {

  return (

    <>

      <header>

        <h1>My Super Cool App</h1>

        <NavLink to="/">首頁</NavLink>

        <NavLink to="/content">內容</NavLink>

        <NavLink to="/about">關於</NavLink>

      </header>

      <main>

        <Outlet />

      </main>

      <footer>©️ Eden 2024</footer>

    </>

  );

}

function App() {

  return (

    <>

      <Routes>

        <Route element={<Layout />}>

          <Route path="/" element={<Home />} />

          <Route path="/content" element={<Content />} />

          <Route path="/about" element={<About />} />

        </Route>

      </Routes>

    </>

  )

}

export default App

在同一頁進行切換頁面的場合下，會需要在 App 裡增加 Layout 層級，並使用  Router Outlet  來顯示  Route  內容。

Step 6. 啟動瀏覽器執行 React 應用程式

使用以下指令啟動 Web 服務：

pnpm run dev

 

按照預設值，您可以透過以下網址進入 React 應用程式

http://localhost:5173/

 

畫面應該長成這樣：

總結

本篇介紹 pnpm 套件管理器的好處，以及 Vite 建立 React 應用程式的方法，和 React Router v6.4 的使用。在 Router v6.4 中，由於添加  Remix Data APIs，所以原作者開始推薦使用 RouterProvider 來替代舊版 <BrowserRouter> 的使用，所以這篇文章的寫法可能會和你之前所學過的不太一樣。目前 BrowserRouter 仍然可以相容使用，不過身為前端工程師的我們，還是得接受前端技術會不斷進化的現實。學吧！一起加油！

和你分享

See also

• pnpm 使用 npm 安裝
  
• React 18 で React Router v6 を使用してルートを作成する方法
• React Router

 

建立一款問卷調查系統的 React 應用程式

在學習 React 時，最快樂的莫過遇到淺白易吸收的好文章。

Joe Morgan 所寫的【How To Add Login Authentication to React Applications】就是一例。

參考它的流程，讓我想到可以利用它來設計一款問卷調整系統，App 架構和路由經整理後如下圖所示：

React Router 從 v4, v5 升級 v6 的異動

Router v6 的改版所變動之處非常大，許多舊語法、屬性被【移除】，可以說是新產品也不為過，雖然作者有提出未來可能會提供向下相容的語法，但目前為止仍舊沒有出現，我想再回去的機率很低，還是接受現實改為新版語法吧！

withReouter 已移除

withReouter 已移除，改用 Router Hooks 取代，這意味著以前使用 class 所開發的元件將無法繼續使用，改為函式元件似乎是條不得不為的道路。

<Route /> path 移除多路徑陣列寫法

 <Route path=["/list", "/list/:id"] /> 寫法在 v6 已不可用，作者說 Router v6 引擎有針對多路由做最佳化，使用多次宣告 Route 很直覺，效能更好。

<Route /> exact、componet、render 屬性移除

exact 屬性移除，前面提到作者有對 Router v6 引擎最佳化，故不再需要 exact 絕對路徑屬性。

Route 的 Component、Render 屬性移除，改以 element 取代，傳參數的方式改為 useParams 等 Hooks 後就不再需要以前的 Component、Render 屬性，寫法可以一致化。

Link, NavLink 移除部份屬性

activeClassName、activeStyle 被移除，改以 Style 屬性取代，這裡官方手冊有個地方範例程式碼寫錯：

而在說明整合的文件中有寫出正確的內容：

範例使用 className 說明，這裡也提到 style 寫法相同，但就僅止於此，一不小心會花很多時間在找問題上。

還是可以寫得出範列所要傳達的效果，請放心。

總結

Router v6 改動的地方非常多，現在書和網路上許多資料還停留在 v4、v5 上，在使用 v6 時常會用到已移除的功能，寫起來倍感艱辛。

改版的過程中會發現其實 v6 改動方向是把路由工作劃分得很清楚，Route 歸 Route；Link 歸 Link，Element 歸 Element，寫作上比較不會有串來串去的情形。

整體來說 v6 的改動是利大於弊，只要你能熬過那升級陣痛期的話。

和你分享 😉

See also

• How to upgrade React Router v5 to v6
• Migrating from Reach Router to React Router v6
  
• NavLink.style: object | func
• React Router 6 - What Changed & Upgrading Guide
  

還在 React 從入門到放棄？告訴你選擇比努力還重要的事

看了許多 React 的入門資料，大多會是從 create-react-app 專案起始，用久了覺得很不舒服，原因如下：

NPM 編譯經常無預期出錯

NPM 編譯經常無預期出錯，學習 React 免不了會經過一連串試錯的過程，但往往會不經意的出現許多編譯錯誤，大多是 Webpack 出現問題，在無法排除錯誤的情形下，最常做的就是重建 node_modules 內容，次數一多，是在學習 React 還是背誦 NPM i 指令，我已經搞不清楚了。

在設計時期，前端和後端 API 網域位置不一致時

只要不是靜態網頁，在前端的開發過程一定會和後端 API 傳遞訊息，尤其是開發網頁應用程式更是必須。在設計時期，只要前端和後端的 Web 服務網域不同，就一定會遇上【跨來源資源共用（Cross-Origin Resource Sharing (CORS)）】這個大魔王，後端就必須進行 CORS 設定，但實際上線又會是在同一網域，只有開發時期才會遇到的 CORS 顯得是非常詭異的歷程。

你以為要從 JavaScript ES6 開始學習，事實上

逐步使用 React 時，元件如何和外部 DOM 連結？

已知 React 會渲染指定的 div，學習資料中似乎沒有和外部 DOM 連結的方法？

React 元件渲染的條件是 props 或 state 變更時觸發，所以把 DOM 元素放入到 React 元件的 Props，就能夠滿足此條件，範例程式碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

const e = React.createElement; class MyComponent extends React.Component { constructor(props) { super(props); this.props.textBox.onchange = () => this.calcCallback(); this.state = { text: "" }; } calcCallback() { this.setState((state, props) => ({ text: this.props.textBox.value })); } render() { return e(React.Fragment, null, e("div", null, this.state.text)); } } ReactDOM.render( e(MyComponent, { textBox: document.querySelector("#textBox1") }, null), document.querySelector("#app2") );

HTML

1 2	<input id="textBox1" value="Hello Vanilla"></input> <div id="app2"></div>

 

成果圖

 

 

 

 

愛用 jQuery 又想擁抱 React 的逐步採用練習，以 DevExtreme 為例

React 逐步採用

不知道你是否和我一樣，斷斷續續學幾年的 React，總是無法順利把 React 加入到現有的 jQuery 網站中，學 jQuery 時很快樂，需要什麼功能時只需要在 script 標籤裡信手捻來 js 檔案就能快速使用，怎麼到了 React 就完全走鐘？非得使用 NodeJS 編譯才可以？React 起手式就是 create-react-app？這其中一定有什麼誤會，帶你來看看官方說法：

React 在剛推出的時候就容許被逐步採用，你可以按自己所需可多可少的採用 React。 或許你只想在現存的網頁上增加少量的互動性。採用 React component 會是個非常好的選擇。 -- React 官方手冊

按照官網裡的步驟練習結束，就如上面所說一樣，可以很順利的把 React 加入不需 NodeJS 編譯的傳統網站裡。

造成網頁變慢的元兇

會學習到可選的 JSX，JSX 很有意思，可以在 JS 裡安插類 HTML 標籤，從【逐步採用】學習到【可選：嘗試 React 與 JSX】的最後一段結論：

這種方式最適合用來學習和建立簡單的示範。然而，它會令你的網頁變慢，而且並不適合發佈到線上環境。 -- React 官方手冊：快速嘗試 JSX 章節

之所以會令你的網頁變慢，是因為它是載入 babel.js 後在網頁執行時才編譯 JS 裡的 JSX 標籤內容，每次都要花時間編譯，網頁自然快不了。

原來網頁變慢是因為動態編譯 JSX，而不是 React 慢。

JSX 最佳用法就是預先編譯，但

官方的教學在此之後就是利用 NodeJS 把 babel 安裝到現有的 WebPack 專案中，再編譯 JSX 內容成為標準 JS 內容，最後才把編譯後的成品上傳到網站執行。

等等，這樣就不是逐步採用 React 了，要加入 WebPack 就等於是大改現有網站啦！

小結：要逐步採用 React 就不能使用 JSX

原有網站在沒有 WebPack 加持下，要逐步採用 React 勢必不能使用 JSX，因使用 Babel 動態轉換 JSX 的效率不佳。

結論就是：逐步採用 React 下又不要使用 NodeJS 編譯網站，React.createElement 你只能用它了。 😁

逐步採用 React 下的難題：外掛元件

逐步採用 React 雖然可以限縮自己要學習的內容，比如我只要學 ES6 + React.State + React.Props 等，只要會 CSS，要刻什麼都很簡單。

但外掛元件呢？

我的現有網站使用了大量的 EasyUI 和 DevExtreme 元件，這些元件僅提供 NodeJS 下載安裝，並沒有發佈編譯後可使用的 JS 檔案。

解決方案就只好在 React class 裡使用 jQuery 操作外掛元件？

 

這叫 React 入門到放棄。

所幸的是，在 DevExpress 官網裡有個叫【DevExtreme Tickets】的技術小本本，它記錄許多過往使用者所提出的技術問題和解決方案，其中一個主題是：Have demo about devextreme-react without npm?

DevExtreme 官方提出【提取+橋接】的概念。撇開現有網站，另開【Webpack-React-DevExtreme】專案，使用 WebPack 提取所需的元件，如 dxButton 等，再利用 NodeJS 編譯，把提取並編譯過的 JS 檔放入現有網站，如此就能在逐步採用 React 的場合下又能享受外掛元件的開發便利性。

而外掛元件則是存放到 DOM 的 window 裡，範例程式碼如下：

DevExtreme 提取 JS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import * as React from "react"; import { Button } from "devextreme-react/button"; export class ButtonExample extends React.Component { // <Button icon="plus" text="Click me"/> constructor(props) { super(props); } render() { return ( <Button {...this.props} /> ); } } const MyLib = { ButtonExample } export default MyLib

逐步採用 React 專案呼叫編譯後的 DevExtreme 元件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<!doctype html> <html> <head> <meta charset="utf-8"> <link rel='stylesheet' type='text/css' href='https://cdn3.devexpress.com/jslib/18.1.3/css/dx.common.css' /> <link rel='stylesheet' type='text/css' href='https://cdn3.devexpress.com/jslib/18.1.3/css/dx.material.blue.light.css' /> <title>DevExtreme with webpack and React example</title> </head> <body> <div class="container"> <h1>DevExtreme with webpack and React example</h1> <div id="app"></div> <div id="app2"></div> </div> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="js/app/bundle.js"></script> <script> const e = React.createElement ReactDOM.render(e(window.MyLib.ButtonExample, { icon:"plus",text:"Click me"}, null), document.getElementById("app2")) </script> </body> </html>

至於 Webpack-React-DevExtreme 原始碼，你可以在上述的票證裡找到。

結論時間

愛用 jQuery 是我個人的選擇，你也可以使用單純的 Vanilla JS，端看你的場合和上手程度來使用。

初學 React 最怕的就是在環境上的摸索上花很多時間，在不使用 npm、webpack 甚至是 Babel，現在我可以專注在學習 React 的設計上，並且和現有 HTML / JavaScript 專案進行互動，做中學所得到的回饋是最直接的。

官方不建議採用【逐步使用 React】？官方是建議使用 NPM Bundler，官方有說明建議原因，和相關資源也比較多，但有關於官方不建議【逐步使用 React】？我官方網站翻了翻，沒找到，有找到的期待你分享這類的相關資料。

React 裡要不要用 jQuery 是另一個問題，React 元件裡我是盡量用相容性比較高的 ES5/6 標準，至於 IE，我的環境不會遇到它，忽略也無仿。

在逐步採用 React 又要使用外掛元件，不再是魚和熊掌的問題，使用一個簡單 WebPack 專案 + 一次編譯，就能把所需的外掛元件放到 window 中，完全滿足「我全都要」的需求，實在是太棒啦！

如果有其它的外掛元件，我想也可以參照此方法把外掛元件產出。

底下是使用 Vanilla JS + React 使用 DevExtreme 小部件的範例。

和你分享 😉

SEE ALSO

• https://codesandbox.io/s/hello-react-vanilla-wycme
• 將 React 加入到網頁
• Have demo about devextreme-react without npm?
• React without npm, Babel, or webpack 
  

HOWTO UPDATE NPM PACKAGE

 

在開發專案時或多或少會採用 3rd party 套件進行開發，當套件出現問題時我們會有以下選擇：

1. 裝作沒看到它，忽視。
2. 自行開啟原始碼修復。
   
3. 等待廠商更新來修復這些問題。

1 和 2 選項都很好，但我個人偏好採用第 3 項， 專業分工是我的中心思想，但問題來了，該如何自行更新，又或是如何檢查專案，按步驟說明如下：

[React]Functional Component 製作上下層共用元件方法

 

源自：【學習筆記】React 边做边学（从零开始，包含Hooks）【25, 26. 彈出組件】一節。

課程中使用 Class 元件設計，CodeSandbox Demo1

看著 Panel 開開關關，心想使用 Functional 元件重新設計應該不是件難事，沒想到在做完之後跳出錯誤訊息：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null.

為什麼會得到這樣的錯誤訊息？【Class Instance】

訊息內大致上是說：在應該有值、元件的位置卻得到 null。原因是 ES6 在建立 Class 時會帶有 Instance，典型語法就是【this】應用，this 在 Functional 元件是不受支援的。

題外話，Classes 在 MDN 中對物件導向迷思的解釋：

ECMAScript 6 中引入了類別 (class) 作為 JavaScript 現有原型程式(prototype-based)繼承的語法糖。類別語法並不是要引入新的物件導向繼承模型到 JavaScript 中，而是提供一個更簡潔的語法來建立物件和處理繼承。

實在是看不出 React 中用 Classes 來寫有簡潔的趨勢，不知你是否也和我有一樣想法？

【學習筆記】React 边做边学（从零开始，包含Hooks）

重温 REACT Functional Component，本篇沒有完整結構，純筆記用途。

課程使用套件

• BULMA 樣式元件
• React Transition Group 動畫元件庫

 

容器排版

課程的主畫面排版由小到大依序由綠、黃、橙、紅高亮，配置如下：

綠色：Product 元件，在 Products 下，顯示產品圖片、金額和加入購物車等功能。

黃色：同位階有 ToolBar 和 Products 元件，在 ProductList 下，分別處理產品搜尋和產品清單的顯示。

橙色：同位階有 Header 和 ProductList 元件，在 APP 下，分別處理產品搜尋和產品清單的顯示。

紅色：APP，最大容器，主畫面是也！

理解 React useEffect 02

前情提要

在【理解 React useEffect 01】一文了解到 useEffect 的功能是：

useEffect 主要在呈現 (Render) 後觸發此 Hook 事件，並將取得的資料後再呈現到元件上。

也知道我們要怎麼在 useEffect 裡面拉 WebAPI 的資料；且已知 useEffect 再觸發的條件是：第二個參數【依賴 dependency】發生變化時，就會再觸發 useEffect 掛勾。

這一篇將會告訴各位，如何手動觸發 useEffect，達成程式碼重用的目標。

理解 React useEffect 01

React 中，取得資料並呈現到畫面上一直是個難題，useEffect 就是讓元件呈現【副作用 (Side Effects) 效果】一樣，對我們造成了很大的【副作用】的【效果】。

useEffect 要解決什麼樣的問題？

useEffect 主要在呈現 (Render) 後觸發此 Hook 事件，並將取得的資料後再呈現到元件上。

在【How to fetch data with React Hook?】一文中卻提到：

Note: In the future, React Hooks are not be intended for data fetching in React. Instead, a feature called Suspense will be in charge for it.

這句話中文大概的意思是：

未來 React Hooks 不會用在資料取得的場合，會改由 Suspense 取代。

可是 Suspense 也說明它不會取代 fetch、axios 等取得資料的 API，在目前有限的資料只知道未來還會變化，所以現階段學習 useEffect 是必須的，待情勢明朗後再來調整也來得及。

【React 開發】用 DevExtreme 打造高效能的 Web 應用程式

 

作者：吳祐賓

 

 

DevExtreme 學習心智圖

 

DevExtreme 是個很適合做後台的函式庫，官方的說明文件寫得很齊但也很零碎，整理文件後再繪製成心智圖方便學習。

 

 

本文內容參考來源：Create a DevExtreme Application

 

如果你使用 DevExtreme 模板從頭建立專案。它是個帶有導覽列和數個支援響應式佈局的展示視圖之簡單應用程式。

Destructuring assignment at REACT Function Component

 

React 學習時一定要記得一個概念，它就是 JavaScript，不管看到什麼，或是沒看到什麼，它就是 JavaScript，而且是支援最新標準的 JavaScript。

為什麼會這樣說？是因為要有 ES6 的概念，看 React 程式碼才有機會看懂！例如，今天要說的主題：【解構賦值（Destructuring Assignment）】。

用 REACT 思考 -- 使用 Function Component

 

React 的核心概念是【物件】，學了它好一陣子，一直感受到 React 的 Class Component 受制於 JavaScript 語法糖框框是一種半吊子的解決方案。

在 REACT 16.8.0 開始支援 HOOKS 後，Function Component 這種貼近 JavaScript 設計概念的正規作法終於獲得改善，HOOKS 也是源自 Class Component 的提取，也有更多的改善之處，除此之外，有沒有更加地好學、好上手，我想才是支援 HOOKS 後所需要關心的地方。

【前端】實戰 ASP.NET C# 移轉到 REACT 03

上回提到Main的作法之後，就要把前端做個完整的Prototype，讓前端歸前端，後端歸後端。

完整範例在此：eden-first-todo-list-app

【前端】實戰 ASP.NET C# 移轉到 REACT 02

上一回提到登入頁面製作後，這次要帶實作主畫面。

原本主畫面長這樣：

 修改時會另開視窗進行編輯：

當時是利用後端進行 HTML 繪製，也就是 Server side 的處理方式，現在使用 REACT 會擦出什麼火花呢？

當時不會排版，不會CSS，連HTML標籤都知道的很少， 所以排版方式使用 Table 處理，就如同上圖的畫面。

REACT + Bootstrap 對 Table 不是太友善，我在 Caption 屬性就卡關了。

故用 Tabs 和 ListGroup 進行排版，畫面如下：

【前端】實戰 ASP.NET C# 移轉到 REACT 01

緣起

之前使用 ASP.NET C# WebForm 寫一套公司內部的報修系統，如下圖所示。
但維護上：

• 遇到 JavaScript Callback hell
• 在後端上想整合為一套語言，把 Server side 轉到 Client side (後台不需要考慮 SEO 問題)
• 前端以JavaScript為核心，CSS 就依賴 3rd party 輔助開發。 
• 這個專案非常小，很適合拿來練手。

在 React 使用 Font Awesome

在【[Day 09 - 網速換算器] 網速傻傻分不清楚 Mbps? Mb/s? 來寫個單位換算器吧 】
這篇看到 REACT 搭配 Font Awesome 的畫面後，想試試看是否能在REACT專案中也套入它的效果。

因為REACT網站不能夠像範例那樣直接使用HTML引入的手法，所以就用正規的import方式來使用。

React 綜合應用 (2)：載入 JavaScript library

React 核心觀念就是物件導向，可是在實務上並不能排除需要 3rd party 的 JavaScript library / framework 的場合，本次使用到的即是 JavaScript DataSnap framework。