鐵人檔案
以技術開發為主的前端工程師，如何在開發流程中，加入使用者經驗設計的工作項目，然後以 React 開發一個線上相簿。希望透過這個分享，讓工程師有基本的 UX 能力，能在開發前就介入產品設計，避免在過程中亡羊補牢，導致產品最終像是個拼湊起來的結果，增加開發的成功率。並且以一個 ES6 新手記錄 React 心得。
Spread 最後來介紹 spread，以往我們要列出陣列或者物件裡的值，需要使用 map() 或 loop 一個一個挑出來然後印出來，實在是很麻煩。在ES6裡...
今天終於進入重頭戲，我們來講講已經紅了一陣子的 React。 我自己是第一次接觸到 React，在這之前和大家一樣，都是使用 jQuery, Sass 在做網頁...
官網教學簡單清楚，可以實做如何打包CSS，圖片，字型，data。Asset Management 首先電腦要有最新版的 Node 和 Yarn. Install...
React is all about components React 元件能重複使用 小元件組成大元件 React 元件是 JavaScript 函式 f...
就像我們不太會做設計，有 Bootstrap 這樣的工具能讓我們直接套用，就能做出好看的頁面。在 React 也有類似的工具，在試用過後我是覺得 React-T...
Props React components 基本上是 JavaScript functions, 所以它們也可以代入 arguments，在 React 叫做...
在了解 React 的原理後，要開始設計網站結構。從我們的 mockup 來看，主要有二個頁面，一個是相簿，一個是照片瀏覽。於是我們將結構設計成下面這樣: &l...
有了架構之後，可以開始寫程式了。 首先當然要有 index.html, 拷貝 HTML5 網頁的結構，在 <body> 裡面增加一個 div，id...
我們需要一個免費的照片來源，Unsplash 這個圖庫網站有提供，只要去 Unslpash 註冊一個帳號，然後到他們的開發者頁面，選擇 new applicat...
今天來做照片的grid // app.js import React from 'react'; import { AppBar, Layout } from...
