iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
0
自我挑戰組

請你當我的好朋友吧!ReactJS!系列 第 2

【DAY 02】蝦咪?ES6、Babel、JSX要先來鑑定?

【前言】
  我們昨天跟React說想跟他當好朋友,而且雙方也做了自我介紹了,如果按照少女漫畫的情節應該就可以直接牽手抱抱親親
  BUT,人生就是有那個BUT。
  React的好友們就跑出來攪局啦(暈,說如果沒有搞懂他們是React的誰是不會那麼輕易放過我們.....

【正文】
  所以今天就來簡單介紹一下ES6、Babel、JSX這三個東西囉。

  1. ES6

  我們都知道ES6是泛指由ECMAScript在2015年所釋出的標準(ECMAScript 2015),而React的基礎就是建構在ES6上,因此在學習React的時候,我們也要先把ES6先練熟悉(我也還在熟悉中)。那最主要多了一些特點:

  • let & const
    使用let跟const最大的好處就是宣告的變數的作用範圍僅限於所屬的區塊中。這樣對於在撰寫程式時可以將變數變得更加獨立。
    const myLetFun = () => {
      let myLet = 2;
      console.log('myLet: ', myLet); // myLet: 2
    }
    const myConst = 3; // myConst是一常數
    console.log('myConst: ', myConst); // myConst: 3
    myLetFun();
    
  • 解構(destructuring)
     可以將陣列或物件中的資料取出成獨立變數。
    const arr = [1, 2, 3, 4, 5];
    const [a, b, ...rest] = arr;
    
    console.log('a: ', a); // a: 1
    console.log('b: ', b); // b: 2
    console.log('rest: ', ...rest); // rest: 3 4 5
    
  • 字串模板(string template)
    我們可以利用這個字串模板定義一個複雜的字串甚至是html標籤字串,使用反引號(`)符號前後夾起,有變數時則用${ 變數名稱 }代表。
    const name = 'Hyora';
    const stringTemplate = `
      Hello, ${name}!
    `;
    console.log('stringTemplate', stringTemplate);  // stringTemplate: Hello, Hyora!
    
  • Arrow Function
     以前利用function(){ }宣告的function,現在大多都可以利用arrow function來代替,不僅看起來更加簡潔,還可以綁定this值。
    function test () {
      console.log('Hello');
    }
    
    const test_2 = () => {
     console.log('Hello_2');
    };
    
    test(); // Hello
    test_2(); // Hello_2
    
  • class
     ES6提供了類似class(類別)的實作方法,但追根究柢,Javascript畢竟沒有物件導向的概念,所以他是模擬一個類似物件導向中類別的概念。當然這對我們在宣告物件時,也帶來很多的方便。
    class People {
      constructor(name) {
        this.name = name;
      }
      whoAmI() {
        console.log(`Hello, ${this.name}`); // Hello, Hyora
      }
    }
    
    let person = new People('Hyora');
    person.whoAmI();
    
  1. Babel

Babel is a JavaScript compiler

  簡單來說,Babel就是一個幫忙我們編譯我們寫的Javascript,由於我們瀏覽器並不看得懂ES6、JSX所寫的程式碼,所以他會幫我們編譯成瀏覽器看得懂的程式碼。

```
// ES6
const name = 'Hyora';
const stringTemplate = `
  Hello, ${name}!
`;
console.log('stringTemplate', stringTemplate);  // stringTemplate: Hello, Hyora!

// Babel編譯後
'use strict';
var name = 'Hyora';
var stringTemplate = '\n      Hello, ' + name + '!\n    ';
console.log('stringTemplate', stringTemplate); // stringTemplate: Hello, Hyora!
```
  1. JSX
      其實JSX也不是什麼新的程式語言,他更像是Javascript的語法糖(Syntactic sugar),他可以幫助我們在撰寫React Component來的更加簡便,React允許這樣作是因為它在讀到JSX語法時,會自動幫你用React.createElement方法來建立虛擬的DOM元素,也就是說JSX語法實際上就是使用React.createElement方法的簡寫語法。
     但瀏覽器也看不懂這樣的寫法,所以也必須透過Babel先編譯才可以讓瀏覽器執行。

    // JSX
    const Element = () => (
     <h1>Hello, Hyora</h1>
    );
    
    ReactDOM.render(
     <Element />,
      document.getElementById('app')
    );
    
    // Babel編譯後
    'use strict';
    var Element = function Element() {
      return React.createElement(
        'h1',
        null,
        'Hello, Hyora'
      );
    };
    
    ReactDOM.render(React.createElement(Element, null), document.getElementById('app'));
    

  今天很簡(ㄙㄨㄟˊ)略(ㄅㄧㄢˋ)的介紹ES6、Babel、JSX,希望有所幫助啦。明天希望可以來撰寫第一個React Component囉!如果想更了解上面三個東西的話可以點下面的連結繼續閱讀囉:)

ECMAScript 6 入門
Babel
Introducing JSX


上一篇
【DAY 01】你好React,我可以當你好朋友嗎?
下一篇
【DAY 03】Hello, React! 我終於印出你了!
系列文
請你當我的好朋友吧!ReactJS!30

尚未有邦友留言

立即登入留言