First React Project=> Mini Book Project

index.js

import React from "react";
import ReactDom from "react-dom";
import "./index.css";

function Books() {
  return (
    <section>
      <Book></Book>
      <Book></Book>
      <Book></Book>
    </section>
  );
}

// create seprate components

const Book = () => {
  return (
    <article className="Book">
      <BookCoverImage></BookCoverImage>
      <Title></Title>
      <Author></Author>
    </article>
  );
};

const BookCoverImage = () => {
  return (
    <img
      src="https://images-na.ssl-images-amazon.com/images/I/71XQe19mZtL._AC_UL200_SR200,200_.jpg"
      alt="My First Learn to Write Workbook: Practice for"
    />
  );
};

const Title = () => (
  <h1 style={{ fontSize: "2rem", color: "red" }}>
    My First Learn to Write Workbook
  </h1>
);

// javascript object
const authorStyle = {
  letterSpacing: "10px",
  color: "green",
};
const Author = () => <h2 style={authorStyle}> Crystal Radke</h2>;

ReactDom.render(<Books></Books>, document.getElementById("root"));

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: ghostwhite;
}

.Book {
  box-sizing: border-box;
  margin: 20px;
  padding: 20px;
  border: 2px solid black;
  border-radius: 5px;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}