功能、畫面和操作方式和客戶確定後，終於要進入開發階段了！聽說現在 React 正夯，這個線上相簿的功能不會太複雜，客戶也沒有限制使用的技術，我們就拿 React 來小試一下牛刀。

在這之前，我們先學學 JavaScript ES6 的新語法。ES6 是 JavaScript 的新規範，更新了一些語法，寫起來更順利。在這個線上相簿裡我們會用到幾種，在這裡介紹一下。

const & let

二者和 var 一樣是用來宣告變數。

const 宣告後變數則不可改變，但如果是 array 或 object 的話，可以改變裡面的子元素。

let 的用法和 var 差不多。

這二個宣告和var最大的差別在，var是 function-level，如果變數宣告是在迴圈裡的話，由於不是在function內，會溢出到全域變數，或是被全域變數影響。為了不要溢出，工程師會使用到IIFE。
const & let 則是 block-level，只要被curly braces {} 包圍住，就不會溢出到外面。

// var 的用法
var foo = false;
var fat = true;

if (fat) {
	var foo = true;
}
console.log(foo);
// output: true;
// 因為 if 不是 function-level，所以第二個foo會改變第一個foo的值
---
// let 的用法
let foo = false;
let fat = true;

if (fat) {
	let foo = true;
}
console.log(foo);
// output: false;
// 在這裡二個foo其實是不同變數，第二個foo被限制在 if 的block-level裡面。所以全域變數的foo仍然保持原始的值。

Arrow function

const names = ['John', 'Jane', 'Mary'];
// 下列1~4寫法反回的值都一樣

// 一般寫法
const fullNames = names.map(function(name) {
	return name + ' Doe';
});

// 省略 function，改用 fat arrow
const fullNames2 = names.map((name) => {
	return name + ' Doe';
});

// 如果只有一個argument，可以省略括號
const fullNames3 = names.map(name => {
	return name + ' Doe';
});

// 如果function只有一行，可以省略大括號和return字眼
// 但是假如要回傳object的話，可以在引號外用括號包起來
const fullNames4 = names.map(name => name + ' Doe');

// 如果沒有argument，直接用空括號
const fullNames5 = names.map(() => 'noname Doe');