今天結合usestate hook和javascript，輸出不同資料組合出的list，首先我們將資料以key跟value擺放。

const [blogs,setBlogs] = useState([
    { title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 },
    { title: 'Welcome party!', body: 'lorem ipsum...', author: 'yoshi', id: 2 },
    { title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 }
   ]); 

JavaScript中的「map」是陣列（Array）的一個內建方法，它可以用來遍歷陣列的每個元素，對每個元素應用一個指定
的函數，並將函數處理後的結果組成一個新的陣列返回。

 <div className="home">
      {blogs.map(blog => (
        <div className="blog-preview" key={blog.id} >
          <h2>{ blog.title }</h2>
          <p>Written by { blog.author }</p>
        </div>
      ))}
    </div>

另外我們可以下載React DevTools，因為這樣能查看組件樹，會顯示你React應用程式的組件樹狀結構，讓你能夠查看每個組件的層級、屬性和狀態，甚至是套用的css。
React dev tool

參考資料

Net ninja