React 一

JSX 就是出現在 .js檔案裏頭的HTML語法。

JSX expressions 一行不用小括號圍起來，但基本上都超過一行。

    小括號內又要用 <div></div>或是其他的區塊元素圍起來。

Javacript的函數庫(library) 就是 官方提供的 module(通常是object)，裏頭包覆的函數就叫做"方法"。

Render(渲染) 就是將效果呈現在螢幕上。

    JSX expressions 要render，要透過 

DOM setAttribute

Why no if-else in React

React.createElement

 

Piano_Keys

 <div></div> 是區塊元素 ( style.default_display = 'block')

<section></section>也是區塊元素

div只用來做CSS花樣， section 除了花樣之外，兼有文章、論文以上具備小標題的段落。

div section 參考資料

block inline inline-block

MDN

Event reference    https://developer.mozilla.org/en-US/docs/Web/Events

Chore Door!

gameOver('win') 

const gameOver = (status) => {

    if (status === 'win' ){

        startButton.inner = 'Good luck!' ;

    }

}

以上無法 hoisting，跑不出結果。

但是  gameOver('win') 是包覆在其他 "函數體內"是OKay的。

_________________________________________________

const numClosedDoors = 3;    <------改成 let numClosedDoors = 3;

const playDoor = ( ) => {

    numClosedDoors --;    <--------------- const numClosedDoors 常數無法 --

    if (numClosedDoors === 0) {

        gameOver('win')

    }

}

學習 CSS 版面配置 一

https://zh-tw.learnlayout.com/display.html

block 區塊元素、 inline 行內元素: a-tag 、 span-tag

margin(外邊距): 元素外框和周圍元素的距離

An element's margin controls the amount of space between an element's border and surrounding elements. <freecodecamp>

一次給值 margin: 上下 左右 

分開給值 margin-

• left  
• right
• top
• bottom
  

margin: 0 auto >> auto 代表水平置中

padding(內邊距):假若元素內部有文字，則文字與元素外框距離就是內邊距。

進度

[ CodeCademy ]

<div class=""> 很常用
<p></p> 裏頭特別凸顯的文字，用<span></span>配上 .css來修飾。

.css_font-family，用得是Windows 字體，系統字體全都在 C:\Windows\Fonts 裏頭。
若是遇到系統沒有得字體，font-family就沒有用，得先去 下載 字體回來放進Fonts這個資料夾裏頭。例如: 系統沒有 'Work Sans'這種字體，就google搜尋_Work Sans ttf(副檔名ttf的檔案就是字體檔)，下載並安裝。

[記概 OCW]

第一週完

[Create a Front-End App with React]

線上資源

我還不知道它的功用

https://repl.it/

Atom 安裝說明

https://www.codecademy.com/paths/web-development/tracks/styling-a-website/modules/local-website-development/articles/f1-text-editors