FullStackOpen Part2-a Rendering a collection, modules メモ

console.log

とにかくconsole.logを使うのがコツ
複数ならべるときは+ではなくカンマ区切りで

Protip: Visual Studio Code snippets

console.logは特にsnippetとして登録しておくとよい

JavaScript Arrays

Higher-order function
関数を値として扱うこと
配列処理のfilterやrejectなどで便利
再利用できるし読みやすいので便利

const animals = [nameとspeciesのオブジェクトの配列]
const isDog = (animal) => animal.species === 'dog'
const dogs = animals.filter(isDog)
const other = animals.reject(isDog)

Map
同じく高階関数 以下のように使う
const names = animals.map((x)=>x.name)

reduce
累積計算をするのに向いている
配列.reduce((累積, 要素)=>累積+要素, 初期値)

Rendering Collections

map関数を使用して<li>要素を並べることもできる。
<li>中のコンテントに{}を付けるのを忘れない！
例: {notes.map(note => <li>{note.content}</li>)} 

const App = (props) => {
 const { notes} = props
 
 return (
  <div>
   <h1>Notes</h1>
   <ul>
    {notes.map(note => <li>{note.content}</li>)}
   </ul>
  </div>
 )
}

Key-Attribute

上記のようにCollectionを描画する場合、各要素がkey属性を持っている必要がある。これは各要素間で区別するため。
例: {notes.map(note => <li key={note.id}>{note.content}</li>)}

そうでない場合、以下の警告がでる
Warning: Each child in an array iterator should have  a unique key

Map

map関数は必ず配列から配列を作る

Anti-pattern: Array Indexes as Keys

li要素のkeyに配列のインデックスは渡してはいけない
ちなみに配列のインデックスはmap関数の第二引数にしていする

ダメな例:
<ul>
 {notes.map((note, index) => 
   <li key={index}>{note.content}</li>
 }
</ul>

Refactoring Modules

モジュールごとにファイル分けするのがES6では一般的
例えば:

Note.js:
const Note = ({note}) => {
 return (
  <li>{note.content}</li>
 )
}
export default Note

インポート側では
import Note from './components/Note'