Lesson 5 - Create Hook by State Management in React

Understanding React Building Blocks

What is React Component?

Technically, a React component is a reusable piece of UI code. It's like a blueprint for a specific section of your application's interface. Components can be as simple as a button or as complex as a complete user profile section.

Key Characteristics:

• Self-Contained: Each component manages its own state and logic, making them independent and easier to maintain.

• Reusability: Once created, you can reuse the same component multiple times within your application, reducing code duplication.

• Composability: Components can be nested within each other to build complex UIs. This allows you to create a hierarchical structure for your application's components.

• JSX: Components are often defined using JSX, a syntax extension to JavaScript that allows you to write HTML-like code within your JavaScript files.

JSX and How React Treats the DOM - Overview

Illustrative Example for State Management

1. Introduction to State in React and the State Management with useState

• create AppHook.jsx component in src folder

• create BookNoHooK.jsx and BookWithHook.jsx in sr/components folder

• Use bootstrap package for styling along with App.css

• update main entry file main.jsx with <AppHook /> by importing such as

  import AppHook from './AppHook.jsx'

// AppHook.jsx Layout
AppHook (Component)
├── <> (React Fragment)
│   ├── h2 (text="Your favorable Book List")
│   └── div (className="card-container card-body")
│       ├── map (booksData.items.map(...))
│       │   ├── BookNoHook (Component)
│       │   │   ├── ... (props: key, title, author, description, subtitle, image)
│       ├── map (booksData.items.map(...))
│       │   ├── BookWithHook (Component)
│       │   │   ├── ... (props: key, title, author, description, subtitle, image)

AppHook.jsx

// AppHook.jsx
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import booksData from './components/data.js'
import BookNoHook from './components/BookNoHook.jsx'
import BookWithHook from './components/BookWithHook.jsx'
import './App.css'

function AppHook() {
  return (
    <>
      <h2> Your favorable Book List </h2>
      <div className="card-container card-body">
        {booksData.items.map((book, index) => (
          <BookNoHook
            key={index}
            title={book.volume.title}
            author={book.volume.authors}
            description={book.volume.description}
            subtitle={book.volume.subtitle}
            image={book.volume.image}
          />
        ))}
        {/* <BookWithHook /> */}
      </div>
    </>
  )
}

export default AppHook

App.css

BookNoHook.jsx

BookWithHook.jsx

bookData.js

1. Check out the console output at Chrome Dev Tools (CTRL+SHIFT+I) to see Status change when clicked in two cases: BookNoHook and BookWithHook

With NO Hook

With useState Hook