https://res.cloudinary.com/citiar/image/upload/v1611373461/ucamc/common/react_icon.png

如何在hooks的元素使用useRef()數組多個multiple refs?

react提出一種Refs概念,使用這個方法,我們就可以抓取到react裡面的DOM元素,那hooks該如何使用Refs呢? ## useRef 語法 const refContainer = useRef(initialValue); ` useRef返回一個可變的ref對象,其.current屬性被初始化為傳遞的參數(initialValue)。返回的對象將存留在整個組件的生命週期中。 從本質上講,useRef就像一個“盒子”,可以在其.current財產中保持一個可變的價值。...

https://res.cloudinary.com/citiar/image/upload/v1611373461/ucamc/common/react_icon.png

【教學】如何開始React網頁最簡單的方式

A JavaScript library for building user interfaces 用於構建用戶界面的 JavaScript 庫。 React 是 facebook 官方所維護的開放原始碼 JavaScript 函式庫,可以降低互動式網頁應用程式開發難度,自動處理各種複雜 UI 組件與資料間的連動關係,改善應用程式執行效能。 使用React這套 JavaScript 函式庫,可以很有效率的開發前端互動式網頁應用,且是許多開源來自世界的社群開發者都在使用,並發展了許多好的 plugins...

Laravel 5 使用 ReactJS 開發設定

在這篇文章中,我想與大家分享如何在 PHP Laravel 框架中使用 react js 建置開發環境。在這個例子中,您可以學習如何為 laravel reactjs 應用程序構建設置。 安裝 Laravel 我們從頭開始,所以我們需要使用命令獲取新的 Laravel 版本應用程序,所以打開你的終端 OR 命令提示符並運行命令: composer create-project --prefer-dist laravel/laravel blog 數據庫配置 在第二步中,我們應該為 laravel...

Javascript如何動態載入模組Dynamic import()

動態import()引入了一種新的類似功能的形式,import與靜態相比,可以解鎖新功能import。本文對這兩者進行了比較,並概述了新的內容。 靜態import(概述) 模塊./utils.mjs // Default export export default () => { console.log('Hi from the default export!'); }; // Named export `doStuff` export const doStuff = () => {...

webpack如何Code Splitting拆分代碼splitChunks

webpack中的三個概念module、chunk和bundle 研究splitChunks之前,我們必須先弄明白這三個名詞是什麼意思,主要是chunk的含義,要不然你就不知道splitChunks是在什麼的基礎上進行拆分。《what are module,chunk and bundle in webpack》 module:就是js的模塊化webpack支持commonJS、ES6等模塊化規範,簡單來說就是你通過import語句引入的代碼。 chunk: chunk是webpack根據功能拆分出來的,包含三種情況:...

https://res.cloudinary.com/citiar/image/upload/v1611373461/ucamc/common/react_icon.png

React上傳文件使用react-input-files讀取Excel js-xlsx

介紹 SheetJS js-xlsx 是一款能夠讀寫Excel的.xls、.xlsx格式表格的插件,瀏覽器支持良好,並且能在多個平台上使用,目前在github上有12602個star,在這邊的範例主要使用React,再加上SheetJS js-xlsx及react-input-files,讓你一個按鈕,簡單的實現直接選檔上傳。 使用 安裝依賴 進入項目文件夾,安裝xlsx與react-input-files npm install xlsx npm install react-input-files 在專案中引入 import...

https://res.cloudinary.com/citiar/image/upload/v1611373461/ucamc/common/react_icon.png

react-router 4 index路由始終處於active狀態

react-router 4中NavLink可加入activeClassName=\'active\'屬性,使得選單在切換時class加入active,可對這個active class寫css style樣式,達到選單切換的效果。 設定成以下,to="/"表示index首頁,但是他都會一只處於active狀態,並不會因為像切換其他的選單而改變。 <navlink activeclassname="'active'" to="/"> Home...

https://res.cloudinary.com/citiar/image/upload/v1611373461/ucamc/common/react_icon.png

React Router 4子路由使用Layout設定

再過去版本中可使用IndexRoute作為設定首頁進入點,但在React Router 4設定上有所改變,全都使用Route,而需要設定為首頁加入exact屬性。在Layout方面本來使用Route帶入元件,在React Router 4直接使用react元件,如下在Layout元件中使用this.props.children顯示子路由。 import React, { Component } from react; import ReactDOM from react-dom; import { Router, Route,...