Author: catsheue

前端技術：前端相關Youtube頻道

The Net Ninja

還不錯，教程都還蠻新的，還有一個還沒播完的剛好是我很有興趣的（React, Redux & Firebase App Tutorial #1 – Introduction）不過就是腔調上有點聽不太慣。
有React、Vue、Node.js、REST API 、GraphQL的教學，而且都蠻新的。

 

Traversy Media

教學很多元！Vue、Angular、Node.js、MongoDB、Docker、MERN、Laravel…
還有很新的教學，我也很有興趣（Lyric Search App With React & Context API）

 

LearnCode.academy

 

 

Code Realm

影片都還蠻新的，有React.js、ES6的教學，竟然還有GraphQL


Mostly a front-end dev out of Montreal, QC seeking to spread love and knowledge out there. Interested in JS, React, NodeJS, or NoSQL? Then we might have a few things in common 😉

 

Programming with Mosh

這個光頭仔的聲音還蠻好聽的，發音也好懂，音質也好。

 

Codemy School

影片有點舊了。有React.js教學、Rails API、Git、Docker
覺得git branch的教學還不錯

JavaScript Closure Sample

閉包的解釋：
1. 外面讀不到裡面，裡面讀得到外面
2. 每個函式可以有自己的私有變數，跟其它的函式名子可以一樣（會有容易搞混的缺點
3. 閉包：它本來抓得到什麼值，就能抓到什麼值，不論它是在哪裡執行的（可能return 給外層的函式了）

參考文章：
A Simple Explanation of JavaScript Closures
⭐️⭐️⭐️⭐️⭐️
超推薦，簡單好懂，排版也好看
How to explain JavaScript Closure to a 5 years old kid
⭐️⭐️⭐️⭐️⭐️
這篇也超好懂的啦
Javascript Closure tutorial ( Closures Explained )
這篇講得比較多些

計算總和的代碼

這是ES6版的

const numbers = [10, 20, 30, 40] // sums to 100
// function for adding two numbers. Easy!
const add = (a, b) =>
  a + b
// use reduce to sum our array
const sum = numbers.reduce(add)

也可以這樣寫

var numbers = [65, 44, 12, 4];

function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

比較古早的ES5寫法：

var numbers = [10, 20, 30, 40] // sums to 100
var sum = 0;
for (var i = 0; i < numbers.length; i++) {
  sum += numbers[i]
}

參考文章：

Rewriting JavaScript: Sum an Array
JavaScript Array reduce() Method

Visual Studio Code

  1. 需要把畫面放大就按【ctrl + 】
  2. 在react裡面沒有emmet (例如打p.lunacute 按tab會自動產生)的話把 .js 改成 .jsx
  3. Ctrl + P 可喚出任意門，輸入檔名到達想到達的檔案。（範圍會限制當前專案資料夾，很方便）
  4. stop multi cursor editing – Esc
  5. multi cursor editing : ctrl + D
  推薦安裝套件： Prettier
存檔之後的變化↑ Lyric Search App With React & Context API 影片有推薦這個插件 Programming with Mosh的影片推薦這個插件

React複習懶人包

記錄一些看教學時覺得應該特別記下來的咚咚。 
import { render } from "react-dom";
加上這一行，要在網頁上render只要直接打這樣即可： 
render(<p>Hi<p>, document.querySelector('#main'));
  要寫comment要這樣寫： 
class StorePicker extends React.Component {
    render(){
        return (
            // asdfasdfasdf
        <from className="store-selector">
        {/* asdfasdfasdfasdf */}
            <h2>Please Enter A Store</h2>
        </from>
            )

    }
}
    下面這個可以縮寫成這樣（ES6） 記得第二行，key和value一樣的話才能這樣寫   import的時候，假如是default export的，就不用{}括起來 create-react-app之後，進入專案資料夾，打yarn，再打yarn start才會正常。 (可用import 一個jsx來測試) 只有 class based component 才要打 render method 用脚手架建專案不成功的時候，有錯誤訊息 
error Received malformed response from registry for undefined. The registry may be down
試試npm install create-react-app -g