如何在 JSX 中加入 CSS 樣式?
在 React 中,什麼東西都可以直接寫在 JavaScript 裡面,就連 CSS 樣式也可以,雖然有點奇怪,不過我在 Vue 也是會這樣寫 inline-style 的,只是 Vue 還會寫在 template 中,而 React 則是寫在 JSX 裡面。
把 CSS 樣式變成物件寫法?目前的理解是,感覺什麼都可以寫成變數來操作,就連 CSS 樣式也可以。我寫了一個點擊器範例:
See the Pen React count demo by Bucky Chu
(@bucky0112) on CodePen.
接著試著把 CSS 樣式寫成物件,寫法是這樣:
123456// 定義一個 style變數const numStyle = { margin: '0 50px 0 50px', // 如果不是純數字,就要用字串格式 color: '#EE6464', fontSize: 60, // 加 px 就要使用字串,這裡 px 可用可不用}
要注意的地方:
由於這裡是物件,不是 CSS,所以每一 ...
JSX 變數與表達式使用
經過上一回的 JSX 超入門,這一次一樣入門,不過從變數以及表達式開始。
變數怎麼使用?先定義一個變數出來,例如 const word = 'PS5' ,接著在 ReactDOM 的第一個參數中使用,只要在變數名稱的外面包上一個大括號就可以使用了,例如:
See the Pen React variable by Bucky Chu
(@bucky0112) on CodePen.
表達式使用而在大括號中,除了可以放入變數以外,也可以放入表達式(關於表達式與陳述式這個話題,以後會專門開一個文章來說明)。
12345const num = 100;ReactDOM.render( <p>PS5 今天賣 {num * 100} 台了</p>, document.querySelector("#root")); // 在畫面上就會呈現 PS5 今天賣 10000 台了
JSX 的變數大致上就是這樣使用了,使用起來跟 Vue 的感覺有點像,雖然目前還不太習慣,總之就繼續練習下去吧!
City Weather App 開發筆記
這次單純使用 JavaScript 來串接 API 開發一個天氣小程式,也練習一下我的 SCSS,寫了一下英文文件發在 GitHub 上可以練習我的英文,這篇就稍微介紹一下我的開發過程吧~
天氣資料首先要找天氣資料來源,發現 Open Weather 有提供 API,不過要先去註冊申請拿到 API key 才能開始,註冊方面我就不多加解釋了。它有很多 API 可以玩,不過目前只需要拿到當前天氣狀況的資料,就選擇 Current Weather Data。
這邊就直接跳到拿到 key 之後可以透過 API call 去拿資料:
預設API call:https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}
API call 的網址也可以試著加入想要的資料,例如:測量單位可以選:預設是 standard,選擇 metric ,溫度為攝氏,所以加上 &units=metric
語系也可以選擇:http://api.openweat ...
學會 Mixin,讓你 SCSS 開發更快速
以往自己在寫 CSS 時,多少會遇到想要寫某一個效果卻忘記怎麼開始,然後就需要上網找怎麼解決問題。當下雖然問題解決了,不過可能過沒多久,當遇到同樣問題時,又需要再去找解法,這時候 Mixin 就派上用場了。
如何開始用 Mixin基本用法Mixin 的用法我覺得有點像變數,只是差在變數只能給一個值,而 Mixin 則是把一個物件定義成一個變數,然後要用的時候再呼叫變數名稱就可以使用裡面的方法,就像下面的 CodePen:
See the Pen mixin demo by Bucky Chu
(@bucky0112) on CodePen.
1234567891011// 定義一個 @mixin,並給它一個名稱@mixin hide-text { text-indent: 110%; white-space: nowrap; overflow: hidden;}// 要使用時,呼叫 @include 加上 mixin 名稱.h1 { @include hide-text}
帶入參數的用法這是比較進階的用法,用法跟 JavaSc ...
React 從 JSX 開始 Hello World
相信每個使用 React 的前端工程師都會聽過並學習使用 JSX 這個語法,雖然官方是說不一定要求使用 JSX,不過先來看一下它如何寫,也許就不會這麼排斥它了…吧?
什麼是 JSX?JAX 是一種 JavaScript 的語法擴充,官方推薦使用它來寫出使用者界面的外觀,而且 JSX 允許你使用 JavaScript 所有的功能。
從 Hello World 開始學 JSX
See the Pen First React - Hello World by Bucky Chu
(@bucky0112) on CodePen.
從上面的 CodePen 中,可以看到畫面顯示 Hello World,不過是怎麼動的呢?看一下程式碼:
1ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));
各位觀眾,這就是 JSX 了,看起來 JavaScript 裡面的結構跟一般的 HTML 差不多,其實把它當成是威力加強版的 HTML 就可以了(跟 Koe ...
如何刪除 Hexo 已發佈的文章
不小心在 Hexo 發佈一篇不要的文章,本來以為直接刪除 posts 裡面的文章再重新發佈一次就可以了,結果沒用,在 stack overflow 找了一下就解開了,紀錄一下該怎麼解決。
不囉嗦,直接上作法:
直接在 source/_post 資料夾中刪除文章。
在終端機執行 hexo clean,並在根目錄下刪除 db.json。
執行 hexo generate 或是 hexo g。
執行 hexo deploy 或是 hexo d 重新發佈。
其實還蠻簡單的,只是官方文件找不到這個方法蠻意外的。
參考文件來源:How do I delete a post in hexo
SCSS import 切分檔案管理
在以往單純使用 CSS 的開發經驗中,總是會使用一支 CSS 檔案來設計所有的樣式,但是這樣的缺點是之後的維護相當困難,要找一個樣式的 code 可能要找很久。之前在寫 Vue 專案的時候,覺得元件式的管理很棒,所有元件分離讓之後的管理變得容易很多,現在才發現原來 SCSS 也可以做類似的事情,感覺好用很多啊~
變數管理這個方法在我上次的專案中, 在我自定義 BootstrapVue 的顏色時有用到。而在 SCSS 中的作法也是差不多,假設目前有一支 .scss 檔案,已經有設定顏色的變數,想要讓變數分割成一支獨立的檔案來管理的話,做兩步驟就可以成功使用 import 來管理:
新增一支 _variable.scss,裡面放變數的設定。
在主要 .scss 檔中 import 檔案:@import "variable";
123456789101112131415// all.scss@import "variable";.banner-title { max-width: 460px; background: li ...
ES6 好用語法 - 解構賦值
懶得定義一樣的值嗎?來試試複製大法吧~
解構賦值 (Destructuring assignment)在 MDN 中的介紹為 - 解構賦值語法是一種 JavaScript 運算式,可以把陣列或物件中的資料解開擷取成為獨立變數。
陣列解構一般如果想要把陣列中的資料給複製並建立一個新的變數的話,可能會這樣做:
12345const winter_is_comming = ['December', 'January', 'February'];const winter_1st_month = winter_is_comming[0];const winter_2nd_month = winter_is_comming[1];const winter_3rd_month = winter_is_comming[2];
如果透過解構的話,作法有點像是把右邊的值給複製進去給左邊的變數一樣,可以這樣做:
123const winter_is_comming = ['December', 'January ...
SCSS 變數運用
說來慚愧,立志成為一名前端工程師的我,只會純 CSS 跟框架來幫網頁做樣式,對於 SASS 這個好用的語言工具卻是知道的不多,所以想趁有時間來學一下 SASS,就開了這個學習筆記系列。
何謂 SASS?根據維基百科中介紹,SASS 全名為 Syntactically Awesome Stylesheets,是一個將指令碼解析成 CSS 的手稿語言,也就是 SassScript。SASS 有兩種語法,一種是 SASS,另一種是 SCSS,那麼兩種有什麼差別呢?
這是 SCSS 的寫法:
See the Pen scss sample by Bucky Chu
(@bucky0112) on CodePen.
這是 SASS 的寫法:
See the Pen sass sample by Bucky Chu
(@bucky0112) on CodePen.
跟普通的 CSS 相比,SCSS 是相對好入門的寫法,在相同架構下,例如 li 就可以寫在 ul 中,而且寫法差不多;而 SASS 看起來架構也一樣,差別在於完全沒有大括號跟分號,感覺很適合懶人的寫法。不 ...
ES6 好用語法 - 箭頭函式
在 ES6 中,有許多好用的語法可以使用,這篇就來介紹箭頭函式。
前言最近買了一本書,書名是「從 Hooks 開始讓你的網頁 React 起來」。其實我本來就一直對 React 很有興趣,雖然後來跑去學了 Vue.js,不過我內心對 React 還是有一份憧憬,而且也想要了解這兩者有什麼不同之處,所以就開始來試著學看看吧。
React 是目前 JavaScript 三大框架中之一,雖然它比較像是一個用來渲染 UI 組件的函式庫而不是一個框架 (Framwork),不過在其生態圈下有許多好用的函式庫,所以要說它是框架也是可以的。
React 雖然很強大,但是要入門的門檻還是有的,至少你的 ES6 語法要夠熟悉,所以想要寫一些文章來熟悉一下我的 ES6,那麼就開始吧!
箭頭函式 (Arrow Function)一般函式的寫法函式一般在 JavaScript 中的寫法可能會是這樣:
12345function callName(name) { return `my name is ${name}`;}callName('Bucky ...