- Introduction.
- Links

- Build React basic project.
- Import the react library.
- On Dev tools console you can type in order to check the library.
        - React
        -ReactDom
- Show the basic way to create components in react.

QA:
    - Why createRoot.
    - Why use react?
        - Library to render DOM.
        - Handle state of the web app.

- Create Pet component.
- React have a data flow from parent to childs. 
    this makes the flow of data more easy to read and follow.
- Pass props to child component.

- Using JSX to render components.
- install npm.
    npm init -y
- Using and configure Prettier.
    npm i -D [email protected]

- Set up Eslint and Gitignore
- npm i -d [email protected] [email protected]

- Install vite
    npm i -D [email protected] @vitejs/[email protected] --legacy-peer-deps.
- Install react 18.2.0    
    npm install [email protected] [email protected]

- ESLint + React 

     npm install -D [email protected] [email protected] [email protected]

- Hooks in react
    https://react-v8.holt.courses/lessons/core-react-concepts/hooks
- How react render.
- They have to be called in the same order, not inside ifs or conditionals.
- Let's add the ESLint rule. 
    npm i -D [email protected]

- useEffect 
    useEffect allows you to say do a render of this component first so the user can see something then as soon as the render is done, then do something.
 - use custom Hooks.   
    useBreedList

-  Handling user input.
-  Make subcomponts.
    - Recommendation: Don't decompose too much.

- NODE_ENV=development.
- Strict Mode
- Dev Tools
    React has wonderful dev tools that the core team maintains.

- React Router is by far the most popular client side router in the React community. It is mature, being used by big companies, and battle tested at large scales.
- npm i [email protected]

- https://react-v8.holt.courses/lessons/react-capabilities/react-router

- Right now react query is a must !
- The idea behind React is that you want to cache most of what you fetch from a database. 
- npm install @tanstack/[email protected]
- how to fetch with react query.

- Refactor useBreedList to see react query simplicity.
- If it is possible, avoid useEffect.

- We do have a controlled input on animal to properly have it determine the useBreedList animal. But we're not using the controlled input to submit the form, we're just using the form event anyway

- Class components have lifecycle methods. These for the most part are what useEffect does for function components. They're for doing things like making API calls, starting and ending

- Frequently there's errors with APIs with malformatted or otherwise weird data.
- This is something you can't do with hooks so if you needed this sort of functionality you'd have to use a class component.

- Another nice feature React is something called a Portal. You can think of the portal as a separate mount point (the actual DOM node which your app is put into) for your React app. 
- Refs are like instance variables for function components. Whereas on a class you'd say this.myVar to refer to an instance variable, with function components you can use refs. 
    They're containers of state that live outside a function's closure state which means anytime I refer to elRef
- Implement modal with portals..

-  Context is like state, but instead of being confined to a component, it's global to your application. It's application-level state. This is dangerous. Avoid using context until you have to use it.