前言

React.js 是一套 JavaScript 函式庫，而其寫法也的確如同其字面上意思，寫起來最有 JavaScript 味道。
因此在開始介紹 React.js 之前，就必須先來認識一下常用 JavaScript ES6 語法，如此一來開發才會更加順利。

Template literal

組字串重點在於起手式，兩個反斜線。 變數必須使用${}，將變數填入，如下範例：

<ul class="list"> </ul>
const list = document.querySelector('.list');
const picture = 'http://';
const title = "疫苗"
list.innerHTML = `<li>
    <p>${title}</p> <img src="${picture}">
</li>`

補充：${ } 不只可以填入變數也可以加入JS原始碼 如下範例

搭配JS函式寫法

// 搭配陣列方法map，會回傳一個新的陣列

let jsUrl = `<ul>  
   ${people.map( (person) => {
    `<li>我叫做${ person.name }</li>`
}).join('')}
</ul>`
console.log(jsUrl,teacher);

撰寫小技巧

1.建議一定要使用emmet功能，加速開發效率 若遇到在html檔案中，想要撰寫javascript時無法用emmet快速產出，則可以參考這篇文章教學。調整emmet.includeLanguages 文章連結

箭頭函式

箭頭函式就是把一般的函式寫法更精簡。只是箭頭函式在使用上有些特性，例如 this、沒有 arguments 等問題都是在撰寫箭頭函式需要注意的地方。但這不是今天討論重點，今天主要介紹箭頭函式如何撰寫而已。其餘注意事項可以再自行搜尋摟～

// #1 改寫傳統函式
var callSomeone = function(someone) {
  return someone + '吃飯了'
}
console.log(callSomeone('小明')) //小明吃飯了

// 將以下改寫成 Arrow Function，並嘗試縮寫形式
// 寫法1：目前最常使用的箭頭函式形式
var callSomeone = (someone) => {
  return someone + '吃飯了'
}
console.log(callSomeone('小明')) //小明吃飯了

// 寫法2：若程式碼為表達式則可以省略return和 {}
// 表達式簡單來說就會是回傳值
var callSomeone = someone => someone + '吃飯了';
console.log(callSomeone('小明')) //小明吃飯了

// 寫法3：單行情況會自動return，若沒有傳入參數則可以使用下面寫法
var callSomeone = () => '小明' + '吃飯了'
console.log(callSomeone()) //小明吃飯了

// 寫法4：若傳入參數數量為複數則不可以省略（）
var callSomeone = (a,b) => a+b
console.log(callSomeone(1,2)) //3

物件縮寫

重點：如果物件屬性跟物件相同則可以簡寫如下

const Demo = 'Demo';

// 原本寫法
const data = {
  Demo: Demo
}

// 簡寫
const Temp = {
  Demo
}

物件函式縮寫

如果 function 詞彙是在物件內，則可以省略 :function

// 原本寫法
const object ={
  function: function(){
    console.log('方程式')
  }
}

// 簡寫
const object ={
  function(){
    console.log('方程式')
  }
}

小結

今天就簡單介紹幾種常用語法，我們明天再繼續吧！