react提出一種Refs概念，使用這個方法，我們就可以抓取到react裡面的DOM元素，那hooks該如何使用Refs呢？ ## useRef 語法 const refContainer = useRef(initialValue); ` useRef返回一個可變的ref對象，其.current屬性被初始化為傳遞的參數（initialValue）。返回的對象將存留在整個組件的生命週期中。 從本質上講，useRef就像一個“盒子”，可以在其.current財產中保持一個可變的價值。...
【教學】如何開始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根據功能拆分出來的，包含三種情況：...
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...
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...
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,...