[JavaScript] 維持 JavaScipt 代碼品質的神器 ESLint (基本使用)
代碼的品質
的好壞,是會嚴重影響到 後續開發 維護成本
的
而 JavaScript 又是一個十分靈活的語言,但因為其 靈活 的特性,也偷偷埋下了不少的地雷
所以我們往往在撰寫 JavaScrip 代碼的同時,會去定義一些關於 JavaScript 代碼的規範,以維持代碼的 可讀性
和減少一些 非預期 的錯誤
尤其是一整個團隊在進行開發的時候,更需要大家共同維持 代碼的規範
[React] JSX 的語法介紹
在前一篇文章 [React Js] JSX 與 Babel 簡介 中我們有提到關於 JSX
的作用,與使用 Babel
來編譯 JSX
的語法
這篇文章將對 JSX
的語法進行紀錄和說明:
建議在閱讀此篇文章之前,要先有些
React
的觀念,並有初步對JSX
有認識
[React Js] JSX 與 Babel 簡介
JSX
主要使用於 簡化
React 的 React.createElement()
的方法,實際範例如下:
React.createElement() 寫法:
React.createComponent('h1',null,'我是標題');
JSX 寫法:
<h1>我是標題</h1>
但是在每個 主流 瀏覽器中,是 不支援
JSX
的寫法的,讓我們繼續往下看:
組件(component) 的 狀態(state)
,為 React 組件(component) 中可以自己自訂的一個物件。
當 state
這個物件有變化時,React 就會自動 重新
渲染,當前的
React Element
簡單來說當 React 偵測 到 state 的這個物件的資料有變化時,就會自動在前端上,重新
繪製
當前的物件,達到更新
畫面的效果
下面我們實際使用編碼來進行說明:
[React Js] React 的組件 (Component) 的生命週期
[React Js] React 入門 :組件 ( Component ) 的 屬性 ( props )
在之前的文章,[React Js] React 入門 :建立 組件 ( Component ) 中有學到了如何建立一個 React 的 組件 (Component) 了,接著我們繼續來看組件中的 屬性 (props)
:
[React Js] React 入門 :組件 ( Component ) 的 巢狀結構
在前一篇的文章,[React Js] React 入門 :建立 組件 ( Component ) 中,我們建立了一個自己的 React 組件 (Component) , 接下來我們更進階一點,使用 巢狀結構
來使用 React 的 組件 (Component)
[React Js] React 入門 :建立 組件 ( Component )
在 前一篇 的 React 的入門教學 裡有提到的 React Element
,而 React Element
其實就是 React
組成的元件中的 最小單位
上面的
React Element
為最小單位
的概念,必須要先有個認知
接著將以 組件 ( Component )
的方式來建立 React Element
的部分進行說明: