2018-12-28

Learn React

• Why react
  • Virtual DOM
  • Reusable(and clearer) Web Components
  • Maintained by Facebook
    • Hirable
• jsx是甚麼?
  • 可以用來把html轉換為javascript語法
  • 所以在jsx裡面的class不能只寫class,要寫成className
    • 通常一個html的元素會有很多class,叫做classList感覺比較符合使用的情境
    • 一般的javascript是使用document DOM api進行元素的讀取與解析
  • import React from 'react’來解析jsx
    • ReactDOM專門負責render
  • virtual DOM
    • component tree
      • 只能定義一個元素,但互相嵌入的方式合併數個不同的元素
      • 最後都會被jsx解析成一般的元素(html tag)
• 常用寫法
  • 命名camelcase
  • 命名的時候function的名稱和檔案名稱大小寫相同,方便之後維護
  • 使用function直接return元素
  • 不加路徑位置es6會找已經安裝的module
• 不同的寫法
  • 單行寫法
    • 可以使用arrow function、匿名函式
  • 不加上分號(;)
    • for loop要用分號,為了區別不同的statement
  • 大括號用來解析Javascript

{`${variable}  ${variable2}`}
{variable}

• 在設定style的時候需要傳入object進去
  • 用大括號刮起來的地方jsx會去解析

{{color:#ccc, paddingTop:'10px'}}

- 設定元件的屬性可以透過props參數來取得

• Anki React
  • ReactDOMServer.renderToNodeStream(element)
  • ReactDOMServer.renderToStaticNodeStream(element)
    • simple static page
  • React.createElemnt(type, [props], […children])
  • React.cloneElement(element, [props], […children])
    • 複製指定的元素,本身有的屬性會進行合併
  • React.isValidElement(object)
• Props and Styling Practice
• 彻底理解React 之React SSR、React服务端渲染，教你从零搭建配置

scrimba