React error fixes (#180)

* fix className errors by replacing class= with className= in templates; remove unused imports

* fix component key warning by adding the node.id key to the component

app/src/components/bookcard.js

@@ -1,13 +1,12 @@
-import { Link } from "gatsby"
 import PropTypes from "prop-types"
 import React from "react"
 import StarRatings from 'react-star-ratings';
 
 const BookCard = ({ book }) => (
-    <div key={book.id} class="w-56 rounded overflow-hidden shadow-lg m-3">
-    <img class="w-full" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1414347376l/18050143.jpg" alt="Sunset in the mountains" />
-    <div class="px-6 py-4">
-      <div class="font-bold text-xl mb-0">{ book.title }</div>
+    <div className="w-56 rounded overflow-hidden shadow-lg m-3">
+    <img className="w-full" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1414347376l/18050143.jpg" alt="Sunset in the mountains" />
+    <div className="px-6 py-4">
+      <div className="font-bold text-xl mb-0">{ book.title }</div>
       <div className="text-gray-700 font-bold text-base mb-1">
         <span className="mr-2 align-middle">{ book.year }</span> 
         <StarRatings 
@@ -22,8 +21,8 @@ const BookCard = ({ book }) => (
         { book.author }
       </p>
     </div>
-    <div class="px-6 py-4">
-      <span class="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{book.category}</span>
+    <div className="px-6 py-4">
+      <span className="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{book.category}</span>
     </div>
   </div>
 )

app/src/components/header.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types"
 import React from "react"
 
 const Header = ({ siteTitle }) => (
-  <header class="my-1 bg-red">
+  <header className="my-1 bg-red">
       <h1 style={{ margin: 0 }}>
         <Link
           to="/"

app/src/components/layout.js

@@ -26,7 +26,7 @@ const Layout = ({ children }) => {
   return (
     <>
       <Header siteTitle={data.site.siteMetadata.title} />
-      <div class="container mx-auto px-10">
+      <div className="container mx-auto px-10">
         <main>{children}</main>
         <footer>
           © {new Date().getFullYear()}, Built with

app/src/pages/index.js

@@ -1,8 +1,6 @@
 import React from "react"
-import { Link } from "gatsby"
 
 import Layout from "../components/layout"
-import Image from "../components/image"
 import SEO from "../components/seo"
 import BookCard from "../components/bookcard"
 
@@ -10,10 +8,10 @@ export default ({data}) => {
   return (
     <Layout>
       <SEO title="Home" />
-      <div class="flex flex-wrap">
+      <div className="flex flex-wrap">
       {data.allBooksJson.edges.map(function(x) {
         return (
-          <BookCard book={x.node} />
+          <BookCard book={x.node} key={x.node.id} />
         )
       })}
       </div>