曾經想為 React 特調寫系列文,這是第一篇也是最後一篇

前端雜談


什麼是網頁(webpage)、瀏覽器(browser)、為什麼看得到網頁?
瀏覽器是一隻程式,瀏覽器實作 W3C 規範(HTML/CSS/JavaScript),能解析(畫)出前端看到的畫面,網頁就是「看到的畫面」。


HTML 是什麼?
HTML/CSS/Markdown 都是靜態標籤檔案,只要有對應的軟體就能讀,就像 .doc 可以用 MicroSoftWord 讀取


為什麼上網可以看到網頁、瀏覽器怎麼透過跟伺服器拿 HTML?
瀏覽器會透過 protocol (常見的如 HTTP) 去跟伺服器要檔案。
瀏覽器當然也可以讀本地的檔案,這時會用 protocol file 讀取 .html 檔


什麼是靜態網頁、動態網頁?
靜態網頁 -> 把 HTML 靜態檔案放在伺服器上
動態網頁 -> HTML 是用程式(NodeJS、PHP、Python...)產生出來的


HTML 是什麼?
HTML/CSS/Markdown 都是靜態標籤檔案,只要有對應的軟體就能讀,就像 .doc 可以用 MicroSoftWord 讀取


為什麼上網可以看到網頁、瀏覽器怎麼透過跟伺服器拿 HTML?
瀏覽器會透過 protocol (常見的如 HTTP) 去跟伺服器要檔案。
瀏覽器當然也可以讀本地的檔案,這時會用 protocol file 讀取 .html 檔


什麼是靜態網頁、動態網頁?
靜態網頁 -> 把 HTML 靜態檔案放在伺服器上
動態網頁 -> HTML 是用程式(NodeJS、PHP、Python...)產生出來的


為什麼要命名?我不能 div 到底嗎?
你當然可以,但是...

  • 命名在 React 是很重要的,一個專案隨便都有一百個 Component
  • 你可以更快的完成一個案子
  • 以及 SEO (請愛用語意化標籤QQ)

命名的例子
一、導覽列

NavBar/NavItem

nav 到底是 NavBar 還是 NavItem

二、main

        section
        conainer 外壁通常 container 做在中間,設計可能會發生某一個區塊不想做內容置中
        內壁
        row
        col

row, col 應該就單一職責的做流動排版,避免莫名的被擠爆

三、BEM CSS


加速你的網站 -> 減少 first rendering 時間

  • minify -> 刪除空格
  • uglify -> rename variable
  • bundle -> 減少 request、blocking, ajax 堵塞
  • 通常會依照功能分 bundle,一支超巨大bundle .js 也不好
  • 前端的打包工具 -> webpack, gulp

結構化資料

  • JSON-LD
  • 語意化標籤
#來杯 React 特調







Related Posts

筆記、GIT 超新手入門- GitHub

筆記、GIT 超新手入門- GitHub

另一個與 styled-components 相關的 debug 紀錄

另一個與 styled-components 相關的 debug 紀錄

React Form: Redux Form vs React Final Form vs Formik and Yup

React Form: Redux Form vs React Final Form vs Formik and Yup






Comments