」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 學習如何:useEFFECT 和 useSTATE,一個 REACT 應用程式。

學習如何:useEFFECT 和 useSTATE,一個 REACT 應用程式。

發佈於2024-09-18
瀏覽:692

LEARNING HOW TO: useEFFECT and useSTATE, A REACT APP.

我一直在開發一個名為“Heat”的網絡應用程序,該應用程序的唯一目的是幫助我學習和應用JavaScript 並改進我的CSS,還有很多後端。該計劃是創建一個具有視覺吸引力的網路應用程序,並具有一些有趣的功能。

在這個過程中我學到了什麼:

前端是使用react js構建的,我選擇react只是出於好奇並了解熱門話題,我的目標之一是將一些Google API整合到專案中,我選擇的是Google Maps API,我將其用於搜尋欄的自動完成。由於 Reacts 的 -> @react-google-maps/api 庫有助於將 Google 地圖功能整合到 React 應用程式中,因此實作並不太困難。搜尋組件將與添加餐廳部分整合。

前端託管在 netlify 上,它連結到我的 github,每次推送到遠端儲存庫時它都會自動更新應用程序,這非常簡單。

Heat 是一個單頁應用程式 (SPA),其實作是透過 React Router DOM 進行管理的,它透過將 URL 對應到元件來啟用客戶端導航。這意味著用戶可以透過不同的 URL 存取應用程式的不同部分,即使整個應用程式作為單一 HTML 頁面加載也是如此。

我目前正在做的事情:

我目前正在研究由 Flask/Python 支援的應用程式的註冊、登入和登出元素。 Flask 還有一些有助於開發過程的函式庫,例如 SQLAlchemy 和 Login Manager。與前端相比,後端的學習曲線比較溫和。我仍在努力解決 useState 和 useEffect 問題,它們是 React 中管理狀態的關鍵鉤子。

完成應用程式的身份驗證元素後,我正在考慮將後端遷移到 Java。想法?

大量學習。 #React #JavaScript #Flask #WebDevelopment

版本聲明 本文轉載於:https://dev.to/boitumelo_ngwenya_de/learning-how-to-useeffect-and-usestate-a-react-app-1kap?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 增強您的 Web 動畫:像專業人士一樣最佳化 requestAnimationFrame
    增強您的 Web 動畫:像專業人士一樣最佳化 requestAnimationFrame
    流畅且高性能的动画在现代 Web 应用程序中至关重要。然而,管理不当可能会使浏览器的主线程过载,导致性能不佳和动画卡顿。 requestAnimationFrame (rAF) 是一种浏览器 API,旨在将动画与显示器的刷新率同步,从而确保与 setTimeout 等替代方案相比更流畅的运动。但有效...
    程式設計 發佈於2024-11-06
  • 為什麼MySQL伺服器在60秒內就消失了?
    為什麼MySQL伺服器在60秒內就消失了?
    MySQL 伺服器已消失- 恰好在60 秒內在此場景中,之前成功運行的MySQL 查詢現在遇到了60 秒後逾時,顯示錯誤「MySQL 伺服器已消失」。即使調整了 wait_timeout 變量,問題仍然存在。 分析:超時正好發生在 60 秒,這表明是設置而不是資源限制是原因。直接從 MySQL 客戶...
    程式設計 發佈於2024-11-06
  • 為什麼帶有“display: block”和“width: auto”的按鈕無法拉伸以填充其容器?
    為什麼帶有“display: block”和“width: auto”的按鈕無法拉伸以填充其容器?
    了解具有“display: block”和“width: auto”的按鈕的行為當您設定“display: block”時一個按鈕,它會調整其佈局以佔據可用的整個寬度。但是,如果將其與“width: auto”結合使用,則按鈕會出現意外行為,並且無法拉伸以填充其容器。此行為源自於按鈕作為替換元素的基...
    程式設計 發佈於2024-11-06
  • 為 Bluesky Social 創作機器人
    為 Bluesky Social 創作機器人
    How the bot will work We will develop a bot for the social network Bluesky, we will use Golang for this, this bot will monitor some hashtags ...
    程式設計 發佈於2024-11-06
  • 為什麼 PHP 的浮點運算會產生意外的結果?
    為什麼 PHP 的浮點運算會產生意外的結果?
    PHP 中的浮點數計算精度:為什麼它很棘手以及如何克服它在PHP 中處理浮點數時,這一點至關重要了解其固有的準確性限制。如程式片段所示:echo("success");} else {echo("error");} 您可能會驚訝地發現,儘管值之間的差異小於0....
    程式設計 發佈於2024-11-06
  • Python中可以透過變數ID逆向取得物件嗎?
    Python中可以透過變數ID逆向取得物件嗎?
    從 Python 中的變數 ID 擷取物件參考Python 中的 id() 函數傳回物件的唯一識別。人們很容易想知道是否可以反轉此過程並從其 ID 取得物件。 具體來說,我們想要檢查取消引用變數的ID 是否會擷取原始物件:dereference(id(a)) == a瞭解引用的概念及其在Python...
    程式設計 發佈於2024-11-06
  • Go 的 Defer 關鍵字如何在函數執行順序中發揮作用?
    Go 的 Defer 關鍵字如何在函數執行順序中發揮作用?
    了解 Go 的 Defer 關鍵字的功能使用 Go 時,了解 defer 關鍵字的行為至關重要。此關鍵字允許開發人員推遲函數的執行,直到周圍的函數返回。但是,需要注意的是,函數的值和參數在執行 defer 語句時進行評估。 範例:評估 Defer Order為了說明這一點,請考慮以下內容代碼:pac...
    程式設計 發佈於2024-11-06
  • WordPress Gutenberg 全域狀態管理初學者指南
    WordPress Gutenberg 全域狀態管理初學者指南
    构建复杂的 WordPress 块编辑器 (Gutenberg) 应用程序时,有效管理状态变得至关重要。这就是 @wordpress/data 发挥作用的地方。它允许您跨 WordPress 应用程序中的不同块和组件管理和共享全局状态。 如果您不熟悉管理全局状态或使用@wordpress/data,...
    程式設計 發佈於2024-11-06
  • 亞馬遜解析簡單且完全由您自己完成
    亞馬遜解析簡單且完全由您自己完成
    I came across a script on the Internet that allows you to parse product cards from Amazon. And I just needed a solution to a problem like that. I wrac...
    程式設計 發佈於2024-11-06
  • React JSX 如何在幕後轉換為 JavaScript
    React JSX 如何在幕後轉換為 JavaScript
    當您編寫 React 時,您會經常看到 JSX – 在 JavaScript 程式碼中看起來像 HTML 的語法。但你有沒有想過這段程式碼在瀏覽器中是如何運作的呢? 神奇之處在於:JSX 不是有效的 JavaScript!瀏覽器無法直接理解它。在幕後,像 Babel 這樣的工具介入將 JSX 轉換...
    程式設計 發佈於2024-11-06
  • 如何透過 CSS 變換實現傾斜:兩側傾斜
    如何透過 CSS 變換實現傾斜:兩側傾斜
    使用CSS 變換實現傾斜:傾斜兩側提供的圖像展示了一種有趣的傾斜效果,該效果使元素的兩個角都形成角度。若要使用 CSS 轉換重新建立此效果,請按照下列步驟操作:應用透視傾斜:若要新增透視,請使用下列 CSS屬性:transform: perspective(distance) rotateY(ang...
    程式設計 發佈於2024-11-06
  • Express.js 基礎:初學者指南 - Node.js 教學系列 - 第 10 部分
    Express.js 基礎:初學者指南 - Node.js 教學系列 - 第 10 部分
    介紹: 嘿!如果您是 Node.js 新手,您可能聽說過 Express.js——一個用於建立 Web 伺服器和 API 的輕量級、快速且靈活的框架。在本指南中,我將引導您了解 Express 的基礎知識,並向您展示入門是多麼容易。 準備好?讓我們開始吧! 1....
    程式設計 發佈於2024-11-06
  • Python:未來的語言
    Python:未來的語言
    在不断发展的技术领域,某些编程语言已经占据主导地位,并塑造了我们构建软件和与软件交互的方式。其中,Python 脱颖而出,它不仅获得了巨大的普及,而且还将自己定位为未来技术的关键工具。其简单性、多功能性和强大的库使 Python 成为从 Web 开发到数据科学、人工智能、自动化等各种应用程序的首选语...
    程式設計 發佈於2024-11-06
  • 如何在 PHP 中將 PDF 檔案儲存為 MySQL BLOB(帶有程式碼範例)?
    如何在 PHP 中將 PDF 檔案儲存為 MySQL BLOB(帶有程式碼範例)?
    使用PHP 將PDF 檔案儲存為MySQL BLOB使用PHP 在MySQL 中將PDF 檔案儲存為BLOB(二進位大物件)時,建議考慮在資料庫中儲存二進位資料的潛在缺點。但是,如果您選擇這樣做,可以採用以下方法:首先,定義一個包含整數 ID 欄位和名為 DATA 的 BLOB 欄位的資料表。 用於...
    程式設計 發佈於2024-11-06
  • 使用 React Router v6 在 React 中實作麵包屑
    使用 React Router v6 在 React 中實作麵包屑
    面包屑在网页开发中非常重要,因为它们为用户提供了一种方法来跟踪他们在我们网页中的当前位置,并帮助我们的网页导航。 在本指南中,我们将使用 React-router v6 和 Bootstrap 在 React 中实现面包屑。 React-router v6 是 React 和 React Nati...
    程式設計 發佈於2024-11-06

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3