細看 App component 接下來，進到 src 資料夾內的 App.js根據先前提到 component 的種類，可以知道 App 是一個 functi...
React 專案的資料夾結構 當執行 create react app 後，資料夾內也會自動產生一些內容 node_modules 所有經由 npm 安裝的 n...
為了讓開發 react 專案的過程更加輕鬆可以安裝 react developer tool 這個專屬react的開發小工具react developer to...
開啟 terminal 首先開啟 編輯器範例中使用的是 vs code可以在這裡下載跟安裝開啟 terminal 快捷鍵為 ctrl + ~或直接點擊編輯器下方...
本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。...
在沒有用過框架的chrome的除錯工具前，我其實不知道類似這樣的工具在開發上能夠有什麼幫助？不過經過實際使用一陣子之後， 才發現dev tools真的太好用了(...
終於進入正題，首先到 React 的官網 侵門踏戶 官方的介紹只有短短一句話A JavaScript library for building user int...
剛開始工作的時候是jQuery的時代 ，用$.ajax來接api得心應手，偶爾接觸到不能用jQuery的專案，就用原生的XMLHttpRequest來處理，隨著...
說到計算 render 次數，大家可能一開始想到的便是下面這段扣 const RenderCounter = () => { const render...
經過幾天的 轟炸 複習，今天要談的是 es6的懶人神兵—箭頭函示(arrow function) 跟 常常搞不清楚究竟誰是誰的 this(撐過去就可以開始 re...
本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 雖...
在寫 React 時，常需要把 prop 或 state 印出來嗎？直接 console.log 寫在 component 內，又會因為 re-render 一...
既然要自己寫SPA，我們先來談談前端框架，本文分成上下篇，這邊重點不在教會你使用，而是想告訴你框架做了些什麼，以下用React來當例子: 傑森是一名網頁設計師，...
在練習表單處理這塊，如果在不依賴套件的狀況下，可以有兩種方式來控制表單欄位，那麼今天就來介紹一下controlled component 和uncontroll...
時間來到 2020... 去年這個時間太忙碌，壓根忘記有鐵人賽這回事QQ今年好不容易想起來，就趕在報名截止日最後一天壓線參加啦選擇鐵人賽題目時，在 js 或 r...
本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 R...
以前我們要抓一個DOM的時候很習慣用document.getElementById、document.getElementsByClassName等等的語法來取...
本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 在...
想必我們都曾經遇過一種情境，兩個component功能幾乎一模一樣，只是差在輸入的資料不同而已，那麼這時候就是HOC登場的時候了，HOC為一個可以傳入compo...
React的event都是camelCase駝峰式命名， 跟以往的HTML小寫命名不同，並且事件一定要用大括號括起來 這是傳統的HTML寫法 <butto...
說到css in js，也就是用js來寫css 就不得不提到style components，被稱之為是React樣式處理的最佳方案！ 首先安裝 style c...
今天要來介紹在React裡面有哪幾種撰寫css的方式 方法1:inline-style： 這是我最不習慣的寫法，畢竟要用駝峰式的格式寫，就沒有樣式語法自動提示了...
State state 為自身component 存放資料的地方，管理內部狀態，格式為一個物件，以class component來說，在建立自身的compone...
什麼是生命週期？就像人有生老病死，component也有類似這樣的概念，了解生命週期可以讓我們知道如何在「對」的時間做「對」的事。 從官方提供的這張圖表，可以...
原本以為只有Class Component的寫法，但在看技術文章的時候發現還有一種寫法是Function component，有了React Hook之後，好像...
React利用JSX語法來開發，類似XML的寫法，可以將UI介面跟程式邏輯跟緊密的結合（在html中使用JavaScript語法），一般的瀏覽器是看不懂JSX的...
會特別寫這篇的原因是以前學習框架的時候只學語法而不懂原理，如果被問到使用框架有什麼好處可能也回答不太出來，由於React是透過Virtual DOM來提升網頁渲...
成功用npx create-react-app指令建構出來的資料夾目錄會如下圖 那麼接下來就一一介紹每個檔案的用途吧！ package.json記錄專案用的套件...
React可以手動建立環境，或是自己寫webpack設定，安裝相關的套件，身為初學者的我為了比較快速上手(懶)，決定採用官方提供的create-react-ap...
打開求職網站發現不少公司都是要求會前端三大框架，不知不覺已經成為前端工程師的標準配備了，好多公司都用React開發 ，不愧是前端框架市佔率最高的！假設學會了Re...
dc88
Jasper
Lieutenant
maxam
river_huang
iThome鐵人賽
看影片追技術