<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>React on BenzHub</title><link>https://benzhub.github.io/tags/react/</link><description>Recent content in React on BenzHub</description><generator>Hugo</generator><language>zh-TW</language><lastBuildDate>Sun, 18 Feb 2024 00:00:00 +0000</lastBuildDate><atom:link href="https://benzhub.github.io/tags/react/index.xml" rel="self" type="application/rss+xml"/><item><title>定義React組件的屬性類型 | React</title><link>https://benzhub.github.io/post/react/009-defining-component-props-types/</link><pubDate>Sun, 18 Feb 2024 00:00:00 +0000</pubDate><guid>https://benzhub.github.io/post/react/009-defining-component-props-types/</guid><description>&lt;blockquote&gt;
&lt;p&gt;在開發React應用程序時，使用TypeScript可以大大提高代碼的可讀性和可維護性。其中一個關鍵部分是定義組件的屬性類型，這樣可以在開發過程中即時發現錯誤，並且在多人協作中更嚴謹。&lt;/p&gt;
&lt;/blockquote&gt;</description></item><item><title>如何在 ESLint 中忽略 React 組件未使用的警告 | React</title><link>https://benzhub.github.io/post/react/008-eslint-react-disable-rules/</link><pubDate>Wed, 14 Feb 2024 00:00:00 +0000</pubDate><guid>https://benzhub.github.io/post/react/008-eslint-react-disable-rules/</guid><description>&lt;blockquote&gt;
&lt;p&gt;在開發 JavaScript 時，我們經常會使用 ESLint 來檢查我們的代碼，以確保代碼風格的一致性和檢測潛在的錯誤。然而，有時候我們可能會遇到一些警告，尤其是當我們使用 React 框架時。&lt;/p&gt;
&lt;/blockquote&gt;</description></item><item><title>了解 React JSX 的規則 | React</title><link>https://benzhub.github.io/post/react/007-the-rules-of-jsx/</link><pubDate>Tue, 13 Feb 2024 00:00:00 +0000</pubDate><guid>https://benzhub.github.io/post/react/007-the-rules-of-jsx/</guid><description>&lt;blockquote&gt;
&lt;p&gt;在 React 中，JSX（JavaScript XML）是一種語法擴展，它允許我們在 JavaScript 中編寫類似 HTML 的語法。雖然 JSX 看起來很像 HTML，但它實際上是 JavaScript。&lt;/p&gt;
&lt;/blockquote&gt;</description></item><item><title>深入了解 React 的單向數據流（One-Way Data Flow） | React</title><link>https://benzhub.github.io/post/react/006-one-way-data-flow/</link><pubDate>Mon, 12 Feb 2024 00:00:00 +0000</pubDate><guid>https://benzhub.github.io/post/react/006-one-way-data-flow/</guid><description>&lt;blockquote&gt;
&lt;p&gt;React 是當今最受歡迎的 JavaScript 前端框架之一，其提供了一種簡潔而強大的方式來構建用戶界面。其中，React 的單向數據流（One-Way Data Flow）是其核心概念之一，它確保了應用程序中數據的流動方向清晰明確，從而使得應用程序的狀態管理變得更加簡單和可控。&lt;/p&gt;
&lt;/blockquote&gt;</description></item><item><title>React中的Props：父子組件間的溝通方式 | React</title><link>https://benzhub.github.io/post/react/005-passing-and-receiving-props/</link><pubDate>Sat, 10 Feb 2024 00:00:00 +0000</pubDate><guid>https://benzhub.github.io/post/react/005-passing-and-receiving-props/</guid><description>&lt;blockquote&gt;
&lt;p&gt;在React應用程式中，組件之間的溝通是至關重要的。一種常見的方式是通過Props（屬性）來傳遞和接收參數。Props是從父組件傳遞給子組件的參數，這讓組件可以根據不同的情況動態地呈現資料。&lt;/p&gt;
&lt;/blockquote&gt;</description></item><item><title>如何在 React 中進行樣式設計(CSS in React) | React</title><link>https://benzhub.github.io/post/react/004-styling-react-applications/</link><pubDate>Fri, 09 Feb 2024 00:00:00 +0000</pubDate><guid>https://benzhub.github.io/post/react/004-styling-react-applications/</guid><description>&lt;blockquote&gt;
&lt;p&gt;在建立 React 應用程式時，有效的樣式設計是至關重要的一環。React 提供了許多不同的方式來管理樣式，從傳統的 CSS 檔案到各種 CSS-in-JS 解決方案。本篇文章將介紹一些常見的方法，並提供簡單的程式碼範例。&lt;/p&gt;
&lt;/blockquote&gt;</description></item><item><title>React 與 Vanilla JavaScript 分離關注點的不同 | React</title><link>https://benzhub.github.io/post/react/003-separation-of-concerns/</link><pubDate>Thu, 08 Feb 2024 00:00:00 +0000</pubDate><guid>https://benzhub.github.io/post/react/003-separation-of-concerns/</guid><description>&lt;blockquote&gt;
&lt;p&gt;在軟體開發中，分離關注點（Separation of Concerns）是一個重要的設計原則，它有助於保持程式碼的清晰、易於維護和擴展。React 和 Vanilla JavaScript 是兩種常見的前端開發方式，它們在處理分離關注點上有著不同的方法。本文將探討 React 和 Vanilla JavaScript 中分離關注點的不同之處，並附上簡易範例來說明。&lt;/p&gt;
&lt;/blockquote&gt;</description></item><item><title>Components 在React 中的重要性 | React</title><link>https://benzhub.github.io/post/react/002-components-in-react/</link><pubDate>Wed, 07 Feb 2024 00:00:00 +0000</pubDate><guid>https://benzhub.github.io/post/react/002-components-in-react/</guid><description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;React&lt;/strong&gt; 它的核心概念之一就是 &lt;strong&gt;Component（組件）&lt;/strong&gt;。在這篇文章中，我們將深入探討 &lt;strong&gt;React&lt;/strong&gt; 中的 &lt;strong&gt;Component&lt;/strong&gt; 是什麼，以及它們如何幫助我們構建交互式的Web應用程序。&lt;/p&gt;
&lt;/blockquote&gt;</description></item><item><title>淺談React中的JSX：一個革命性的網頁開發工具 | React</title><link>https://benzhub.github.io/post/react/001-what-is-jsx-in-react/</link><pubDate>Tue, 06 Feb 2024 00:00:00 +0000</pubDate><guid>https://benzhub.github.io/post/react/001-what-is-jsx-in-react/</guid><description>&lt;blockquote&gt;
&lt;p&gt;在當今的網頁開發世界中， &lt;strong&gt;React&lt;/strong&gt; 已經成為了一個極為受歡迎的 &lt;strong&gt;JavaScript&lt;/strong&gt; 函式庫，它能夠幫助開發者建構出具有良好組織結構和高度互動性的使用者介面。而要談到 &lt;strong&gt;React&lt;/strong&gt; ，就必須提及一個重要的概念： &lt;strong&gt;JSX&lt;/strong&gt; 。&lt;/p&gt;
&lt;/blockquote&gt;</description></item></channel></rss>