1. Components
2. Props
3. Rendering
4. Event Handling
5. State
6. Controlled Components
7. Hooks
8. Purity
9. Strict Mode
10. Effects
11. Refs
12. Context
13. Portals
14. Suspense
15. Error Boundaries

building blocks, visible parts, buttons, inputs, use as many times as u want.

every component is a function that returns markup. they return JSX

unlike html (static content), React is Dynamic.

display data using {...}

JS Function returns only one thing, that why we need to wrap up everything in one div or empty compoenent

properties of an object.

Make prop, give it a value and use pro value.

can you pass anything as a prop ? YES

KEY PROP: react can tell one component apart from another. unique property to identify the component. so it can give error. Use index of map function instead.

Take the code and display the result.

use something like Virtual DOM 'VDOM' to know how and when to render something. DOM (Document Object Model)

React Rendering Steps

1. State changed: If state changes, then react update the vitual dom.
2. React 'diffs': compare updated virtual dom with previous version to see whats change. once it sees whats changeed
3. 'Reconciliation' with the DOM: Updaet the real dom with the changes that it found.

handling user interactions - events, namely, by calling a function some events as in:

• onClick
• onChange
• onSubmit

exmaple: to create an alart we, add onclick event on button and connect it with function that show the alart.

manage data in out react, we use State. Its like a picture of our app at any given time. we cannot use JS variables (they dont cause app to re-render).

We use Hooks so that it will render the app.

a controlled component is a form component where the data (typically form input) is managed by the component's state using React's state system. This means React has control over the data and keeps the single source of truth for the information.

steps:

1. user types, setValue called
2. state updated
3. input reads from state

function ControlledInput(){
    const [value, setValue] = useState('');

    return(
        <input
            value = {value}
            onchange={(e)=>setValue(e.target.value)}
        />
    )
}

Hooks are the way to add features to function componenets. 5 main types

• State hooks: manage state within react components
  • useState()
  • useReducer()
• Context hooks: use data passed through react context
  • useContext()
• Ref hooks: "reference" HTML elements
  • useRef()
• Effect hooks: external systems browser api
  • useEffect()
• Performace hooks: improve app performance by preventing unneccesary work
  • useMemo()
  • useCallback()

more on hooks read more

A pure React component behaves similarly to a pure function:

Renders the same JSX for the same props and state: If a component receives the same props (data passed from parent components) and has the same state, it should always render the identical JSX output.

Minimal side effects: While some side effects might be necessary (like fetching data in some scenarios), pure components generally avoid them for better performance and predictability.

How to prevent erros? Use Strict Mode. Detect problem in development

import {StrictMode} from 'react'

<StrictMode>
    <App/>
</StrictMode>

What about the stuffs outside react ?

What If we want to talk to:

• talk to browser API
• make a request to the server

if you do have an external system, you need a way to step outside from react

Effects are code that reach outside react application. we can use side effects best done in event handlers

Request (side effect) made in event handler.

function handleSubmit(e){
    e.preventDefault();
    post('/api/register',{email, password})
}

if side effect can't be run in event handlers, we use useEffect() instead.

Fetch data when component loads

useEffect(() => {
    fetchData().then(data =>{
        // use data here
    })
})

Sometimes you have to step out of react and work directly with the DOM.

Pass data through react components.

most react app have tons of nested components and get to get data passed through multiple components using props that dont actually need it. Context helps us to jump though the tree at any level and without making props.

steps:

1. Create your context in parent components

const AppContext = createContext()

2. Wrap that parents component in context components

<AppContext.Provider>
    <App/>
</AppContext.Provider>

3. Put data on value prop:

<AppContext.Provider value="random">

4. Get data with useContext

function Title(){
    const text = useContext(AppContext)
    return <h1>{text}</h1>
}

like context but for components.

portals are for components that cant be displayed properly.

perfects for displaying:

• modals
• dropdowns
• tooltips

Special components that help to handle loading a component or its data.

helpful for components that take some time to fetch the data. provide a better User experience, "fall back" to a component until data arrives.

useful for lazy-loading components. let load a component only when it needs it.

Catch app-breaking error and shows a fallback components to shows the error.