tag react

標籤
貢獻252
326
05:50 PM · Oct 25 ,2025
tuzixiansen_63d4d65909d62 頭像 sysu_xuejia 頭像 refanbanzhang 頭像 data_ai 頭像 changlina 頭像 ruochuan12 頭像 zzd41 頭像 jackysummer 頭像 tosmile 頭像 icecreamlj 頭像 shuirongshui 頭像 assassin 頭像

@react / 博客 RSS 訂閱

ntksol 頭像

歐雷 - 前端鏟💩日記 #1：項目目錄結構調整

最近哥們兒我接手了一個官網的前端項目，雖説是官網，但它是個 Web 應用而非營銷網站，所以還是有一定複雜度在的。 這幾天是邊往死裏摁🐞邊熟悉代碼邏輯，沒想到這是個燙手🍠，前人留了一堆坑給我——令我覺得他撐死了也就中級水平，不能再高了……🙁☹️🙂‍↔️ 是不以為我看到這💩山會苦惱不堪，心中如那呼倫貝爾大草原般萬🐎奔騰？ 不！你想錯了！！我興奮得很呢！！！ 別誤會，別誤會！我不是那個什麼「

react , 前端架構 , 前端優化 , next.js , 重構

收藏 評論

ntksol 頭像

歐雷 - 前端鏟💩日記 #2：易被忽略的「domain」

若看了上篇筆記，眼尖的鐵汁們應該發現，最終的重構成果並未出現目錄結構調整方案提到的 domain 文件夾。 這是因為領域建模是個相對較難且需要長期去做的事情，所以我們不急，慢慢來，要用心地思考與處理——從本篇筆記開始就會涉及到相關內容啦！ 在進行實際的鏟💩演練之前，這篇筆記先來講解下 domain 文件夾的重要性，請各位鐵汁搬來小板凳坐坐好，用小拇指清理下👂🏼聽我説—— 在我所設計的「模塊化

react , 前端架構 , 前端優化 , next.js , 重構

收藏 評論

shenyongweiwudemaozi 頭像

sAkuraOfficial - 記錄react+electron開發單頁應用SPA遇到的路由問題

遇到的問題 在electron-vite提供的開發服務器中，electron能正常顯示頁面中的路由並能正常跳轉. 而在build打包後，雙擊運行electron應用，路由失效，顯示空白頁面 排查BUG 閲讀了腳手架為我生成的主函數代碼： // HMR for renderer base on electron-vite cli. // Load the remote URL for

react , vite , electron , router

收藏 評論

zxl20070701 頭像

zxl20070701 - React 相關插件之 Redux 基本使用入門

引入和定義 首先，你需要創建Store實例並暴露出來： // stores/login.store.js const loginInstance = (preState, action) = { switch (action.type) { // 修改狀態 case "changeLoginState": preState.isLo

react , redux , 前端

收藏 評論

ntksol 頭像

歐雷 - 前端鏟💩日記 #3：重構「個人主頁」

鐵汁們聽好了哈——從本篇筆記開始，將進入實際的鏟💩演練啦！ 這首先要被剷除的💩，是分佈在我接手官網項目後最先接觸的用户個人主頁裏。 在這系統中，用户分個人與項目方兩種，它們的個人主頁雖看起來一樣，但視覺細節和數據結構等還是有些差異的，佈局結構大致如圖所示： 個人主頁原先代碼中，其他部分還算有點封裝意識，但最重要的課程、活動等列表部分的代碼看起來就是初級水平，將它們全部糅合在一個 React

react , 前端架構 , 前端優化 , next.js , 重構

收藏 評論

shaogongbra 頭像

ShaoGongBra - duxapp：基於Taro使用模塊化開發，提升開發效率

duxapp是基於Taro二次開發的模塊化框架 使用這個框架，結合框架提供的UI庫和工具庫，能幫助你快速且高質量的完成項目，且能實現同時開發小程序、H5、APP（React Native），並且保證各個端的一致性 duxapp還針對APP開發（React Native）做了大量優化，大大降低了APP發開的難度，你可以閲讀React Native教程，瞭解詳情 下面讓我來詳細介紹如何使用duxapp

react , react-native , 模塊化 , taro , 前端

收藏 評論

chongdongdedaxiongmao_kxfei 頭像

chongdongdedaxiongmao_kxfei - 深入 JavaScript：前端開發的核心語言

JavaScript 是一種廣泛應用於前端開發的編程語言，最早由 Netscape 公司在 1995 年推出。作為一種輕量、解釋性和多範式的編程語言，JavaScript 支持事件驅動、面向對象和函數式編程。它不僅是網頁交互的核心技術之一，還隨着 Node.js 的出現，逐漸滲透到了後端開發。本文將帶你瞭解 JavaScript 的核心概念、特點及常見應用場景，幫助你掌握這門現代化的編程語言。 一

react , ecmascript-6 , typescript , 前端 , Javascript

收藏 評論

shaogongbra 頭像

ShaoGongBra - duxapp放棄了redux，在duxapp中局部、全局狀態的實現方案

全局狀態 全局狀態是一個很實用的功能，例如管理用户信息，組件間狀態共享等功能都需要用到全局狀態，react有很多成熟的全局狀態管理工具，但是很多寫起來太過麻煩，duxapp提供了幾種應對不同場景的全局狀態的方案，當然如果你需要其他全局狀態，可以自行集成 局部全局狀態 這種全局狀態方案的使用場景，在於父子組件之間的狀態共享 import { contextState } from '@/duxapp

react , react-native , redux , taro

收藏 評論

zhangfisher 頭像

zhangfisher - 深入解析：React中的信號組件與細粒度更新

引言 在主流的前端開發框架中，無論是React、Vue還是Svelte，核心都是圍繞着更高效地進行UI渲染展開的。 為了實現高性能，基於DOM總是比較慢這個假設前提，其最核心的要解決的問題有兩個： 響應式更新 細粒度更新 為了將響應式更新、細粒度更新優化到極致，各種框架是八仙過海，各顯神通。以最流行的React和Vue為例， 首先兩者均引入了Virtual DOM的概念。 Vue的靜

react , redux , store , signal , 前端

收藏 評論

refanbanzhang 頭像

熱飯班長 - 最好的svg使用方案（個人覺得）

方案1：img 將svg作為img的src import icon from './xxx.svg' img :src="icon" 無法很好的自定義尺寸，圖片會模糊（使用了img後，會喪失svg的特性） 無法指定顏色 方案2：插件 添加vite-svg-loader插件 找了好幾個常見的插件，比如vite-plugin-svg-icons、vite-plugin-svg-loader、u

react , vue.js , vite , HTML , svg

收藏 評論

changlina 頭像

長林啊 - 掌握 React Hooks：現代 React 開發的必備技能

大家好，我是長林啊！一個愛好 JavaScript、Go、Rust 的全棧開發者；致力於終身學習和技術分享。 本文首發在我的微信公眾號【長林啊】，歡迎大家關注、分享、點贊！ Hooks 是 React 官方團隊在 React 16.8 版本中正式引入的概念。通俗的講，Hooks 只是一些函數，Hooks 可以用於在函數組件中引入狀態管理和生命週期方法；如果希望讓 React 函數組件擁有狀態管理和

react , hooks , typescript , 前端 , Web

收藏 評論

infinilabs 頭像

極限實驗室 - 如何讓 localStorage 數據實現實時響應

重大事項 📣 ：重大事項提前通知！快來圍觀，不容錯過！ 極限科技 一直致力於為開發者和企業提供優質的開源工具，提升整個技術生態的活力。除了維護國內最流行的分詞器 analysis-ik 和 analysis-pinyin，也在不斷推動更多高質量開源產品的誕生。 在極限科技成立三週年之際，公司宣佈以下產品和工具已全面開源： INFINI Framework INFINI Gateway I

react , localstorage , Web

收藏 評論

infinilabs 頭像

極限實驗室 - 如何實現一個充滿科技感的官網（一）

背景 前段時間完成一個公司官網項目，個人第一感覺是整體風格簡潔但充滿科技感。所以想着抽時間寫篇文章出來分享一下（其實想着拿出來炫一下，得瑟一下，滿足一下自身虛榮心，請大家包容一下我的虛榮心，莫噴。） 抽空寫下這篇文章，既是分享，也希望能夠聽到更多反饋。 官網地址是：https://infinilabs.com/， 大家可以先去看看。對了，也歡迎直接在評論區告訴我：“這樣的官網設計，你覺得怎麼樣？”

react , three.js , next.js , Web

收藏 評論

infinilabs 頭像

極限實驗室 - 如何實現一個充滿科技感的官網（二）

背景 在上一篇文章 《如何實現一個充滿科技感的官網（一）》 中，我們初步瞭解了該官網的整體設計，並與大家探討了它的視覺呈現和用户體驗。 我們前期的內部設計偏向簡潔，所以開始思考如何提升網站的整體設計感。這些嘗試便由此展開。 網站地址：https://infinilabs.com/ 如果你對動態背景的實現感興趣，這篇文章將帶你深入探索，揭秘如何從零打造一個兼具美感與功能性的企業官網！ 技術選型

react , three.js , next.js

收藏 評論

lanyiyun666 頭像

藍易雲 - https證書獲取的方法及好處

獲取 HTTPS 證書的多種方法及其優勢 🔒✨ 在現代互聯網環境中，HTTPS 已成為保障網站安全的基本標準。獲取 HTTPS 證書 不僅能提升網站的安全性，還能增強用户信任度和提升搜索引擎排名。本文將詳細介紹獲取 HTTPS 證書 的幾種常見方法及其各自的優勢，並通過圖表和流程圖幫助理解其工作原理。 獲取 HTTPS 證書的方法 🛠️ 1. 購買商業證書 💼 購買商業證書 是獲取 HTTP

react , visual-studio-code , intellij-idea , visual-studio , sublime-text

收藏 評論

tgshell 頭像

tgshell - react + eslint + prettier 配置

1. 配置 1.1. 安裝依賴 npm i eslint eslint-plugin-react eslint-plugin-react-hooks prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

react , eslint , prettier , 前端

收藏 評論

changlina 頭像

長林啊 - React 調試不求人：VS Code 與 Chrome 的終極指南

大家好，我是長林啊！一個 Go、Rust 愛好者，同時也是一名全棧開發者；致力於終生學習和技術分享。 本文首發於微信公眾號《全棧修煉之旅》，歡迎大家關注！ 在開發過程中，調試無疑是我們解決疑難雜症的手段之一，但調試不僅僅是在解決 Bug 的時候才能應用的技能，當拿到一個新的項目時，我們也可以通過調試的方法，去快速瞭解代碼、熟悉業務。 本文工具及代碼環境： Visual Studio

框架學習 , react , next.js , 前端 , Web

收藏 評論

gqkmiss 頭像

月恆 - React Vite 項目增加 eslint 和 prettier

React Vite 項目增加 eslint 和 prettier Eslint 版本為 8.X 1. 安裝 8.X 版本的 eslint pnpm i eslint@^8.57.0 -D 2. 安裝其他包 pnpm add -D eslint-plugin-import prettier eslint-plugin-react eslint-plugin-react-hooks esli

react , eslint , prettier , 前端

收藏 評論

dawanzi_6278b06ec111c 頭像

大丸子 - 用JavaScript在React中實現Word文檔和Markdown互轉

在現代Web開發的世界裏，React作為構建用户界面的領先庫，經常需要處理各種類型的數據轉換和展示任務。將Word文檔與Markdown文件相互轉換的能力不僅能夠增強用户體驗，還能極大地提高內容管理的效率。這種互轉功能對於那些需要頻繁更新內容或協作編輯的平台尤為重要，比如博客、技術文檔網站或是在線教育平台。通過直接在React應用中實現這一功能，開發者可以為用户提供更加無縫的編輯體驗，使得無論是習

react , word , 轉換 , Javascript , Markdown

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 原生electron起步-從零到一完成構建和打包

官網：https://www.electronjs.org/zh/ 安裝依賴 初始化package.json pnpm init 安裝依賴 pnpm add -D electron 安裝報錯解決方案：https://blog.csdn.net/qq_38463737/article/details/140277803 1、打開npm的配置文件 # cmd 運行打開配置文件 npm confi

react , vue.js , electron , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - electron-builder打包配置説明

我們一般使用electron-builder對electron項目進行打包，在package.json中配置打包的詳細操作 pnpm install electron-builder -D package.json中的詳細字段解釋： "build": { "appId": "your.id", // 應用的唯一ID "productName": "YourProductName"

react , vue.js , electron , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - vue項目打包electron-將已有web項目打包為桌面端

當你需要將一個vue項目打包成electron時，只需要正常的安裝electron依賴、electron-builder依賴，正常的配置好主進程、預加載腳本、渲染進程即可。 依賴安裝 這裏默認你已經寫好了一個vue項目，腳手架為vite，然後需要打包成electron。 安裝electron pnpm add -D electron 安裝electron打包依賴 pnpm install e

react , vue.js , electron , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - electron打包報錯-image格式問題(.ico報錯)

這種報錯是ico資源文件出錯導致的，可以看看gitHub對此問題的解釋：https://github.com/electron-userland/electron-builder/issues/3889 上圖中打包的logo.ico資源文件格式不對，看起來資源文件後綴是.ico實際上是png格式，你有可能是在一些網站將png轉換為ico，它沒有被正常的轉換為ico，只是將資源文件的後

react , vue.js , electron , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - electron打包報錯errorOut=ERROR: Cannot create symbolic link

這種打包報錯實際上是缺少對應文件，由於electron在打包時會下載資源，有些資源需要科學上網，所以正常打包網速過慢會導致資源丟失。 像上圖報錯，很明顯是丟失winCodeSign-2.6.0資源，所以我們需要去下載對應資源 資源下載鏈接：https://github.com/electron-userland/electron-builder-binaries/release

react , vue.js , electron , 前端 , Javascript

收藏 評論