i am making notes for react in .md format. here my existing notes, help me format them. remove unnecessary stuff, improve the code examples.  add missing stuff. provide in file name and content according to section or topic. keep it short but with all the necessary details

// React - A JavaScript library for building user interfaces

// components are the building blocks of every react app
<App>
    <Header />
    <Content />
    <Footer />
</App>

// they allow us to make all the visible parts of our applications
// buttons, inputs or even entire Pages

// just like Legos you can use components as many times as you want

// JSX stands for JavaScript XML
// JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React

// every react component is a JavaScript function that returns jsx (javascript xml - html like code)
function Button(){
    return (
        <button>Click Me</button>
    )
}

// syntactic sugar of function createElement
createElement(type, props, ...children);
createElement('button', {className: 'btn'}, 'Click Me 😐');

// class is a keyword in javaScript hence we use className, similarly for is replaced by htmlFor
<button className="btn">Click Me</button>

// Unlike HTML, which is static and unchanging
// you can use dynamic js values inside jsx using { }
const planet = 'Earth';
<h1>Hello {planet}</h1>

// use can use them to make your attributes dynamic
const imgSrc = '/earth.png';
<img src={imgSrc}/>

// dynamic styles
const background = 'red';
<div style={{background:background}}></div>

// in react you can only return one parent element from a component

function App(){
    <div>
        <Header/>
        <Content/>
        <Footer/>
    </div>
}

// if you dont want to add another node, you can wrap the children inside empty component known as react fragment
// <></>

function App(){
    <>
        <Header/>
        <Content/>
        <Footer/>
    </>
}

// pass data from parent component to child

// 1. make a prop, give it a value
<Greeting name={'vishal'} />

// 2. use the value
function Greeting(props) {
    return <h1>Hello {props.name}</h1>
}
// 2. better way
function Greeting(props) {
    const { name } = props

    return <h1>Hello {name}</h1>
}

// props - think of them like a custom attribute u can pass to the component
// you can pass anything as a prop

// you can pass other components as a props - this props are known as children
<Parent>
    <Child/> {/* Passed as children */}
</Parent>

// To access the children
function Parent(props){
    return (
        <div>
            {
                props.children
            }
        </div>
    )
}

// it is great for something known as 'Composition' - better organizing our components
// great for layout component

<Layout> {/* Header, Footer */}
    {/* Children is inserted here */}
</Layout>

// key prop is another built-in prop to react
<Component key={'1'}/>

// key prop is used so react can tell one component apart from another
// usually when you're creating a list
{
    items.map(item => (
        <Component key={item.id}>{item}</Component>
    ))
}

// a key is just a unique string or number to identify a component

// if you don't have a unique key value, you can use index
{
    items.map((item, index) => (
        <Component key={index}>{item}</Component>
    ))
}

// react takes our code and make it display something in the browser - that is rendering

// react knows how and when to render using 'Virtual Dom'

// DOM stands for Document Object Model
// which is what every browser uses to model all the HTML element on a web page

// React rendering process
// if the state of our react app changes
// then react updates the virtual Dom - which is quicker to update than the real Dom
// then react uses a process called 'diffing' to compare the updated virtual Dom to a previous version to see what's changed
// once it sees what's different react uses a process called 'reconciliation' to update the real Dom with the changes that it found


// whenever someone uses app, tons of events take - click, mouse move
// event handling is how we take those user events and do something with them

// react has a lot of built-in events such as onclick, onchange and onsubmit
<>
    <button onClick={handleClick}></button>
    <input onChange={handleChange} />
    <form onSubmit={handleSubmit}></form>
</>

// more ex
function RedAlert(){
    const handleClick = () => {
        alert('Red Alert')
    }

    return <button onClick={handleClick}>Click Me</button>
}

// to manage data in our app, we need to use 'state'

// state is like a snapshot from a camera
// it's a picture of our app at any given time

// we cannot use javaScript variables
// they do not cause our app to re-render
let likes = 0;
const me = 'cool'

// instead we use special functions like useState and useReducer
const [votes, setVotes] = useState(0);

function Likes(){
    const [likes, setLikes] = useState(0);

    const handleClick = () => {
        setLikes(likes + 1)
    }

    return <button onClick={handleClick}>Likes: {likes}</button>
}

// controlled components use State values to have more predictable Behavior

function ControlledComponent(){
    const [value, setValue] = useState("")

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

// 1. use types, setValue called
// 2. state is updated
// 3. input reads from state

// controlled components are a great pattern to use
// if we want to change the component's behavior we just need to change the state that controls it

// Hooks are functions that let you “hook into” React state and lifecycle features from function components

// There are 5 types of hooks
// 1. State     : useState, useReducer (manage state)
// 2. Context   : useContext (use data passed through context)
// 3. Ref       : useRef ("reference" HTML)
// 4. Effect    : useEffect (sync with external system like brower api)
// 5. Performance:useMemo, useCallback (improve app performance)

// Purity is a term used to describe how react components should work work
// but this type of Purity is more like how mathematical formulas are pure

// pure react components mean that, the same input should always return the same output
// to keep a react component pure they should only return their jsx and not change any objects or variables that existed before rendering

// eg. impure component
let count = 0

function Cup(){
    count = count + 1; // changing the outside variable

    return <h2>cup {count}</h2>
}

// special component that detects problems in development

import {StrictMode} from 'react'
<StrictMode>
    <App/>
</StrictMode>

// if we need to do something outside our react app
// your app might need to talk with the browser API or make a request to a server

// what are effects? aka side effects
// code that reaches outside of our react app

// best done in event handlers
// if side effect can't be run in event handlers, we can use useEffect

useEffect(()=>{ // fetches data when component first loads
    fetchData().then(data => {
        // use data here
    })
}, [])

// like effects sometimes you want to step outside react and work directly with the DOM
// to reference an actual Dom element you can use what's called a 'ref'

<button ref={ref}>Click Me</button>

// more ex
const ref = useRef(null);
<input ref={ref}/>

// use element on .current
ref.current.focus()

// context is a powerful way to pass prop data through your apps components

// most react apps have tons of nested components
// to get data down multiple levels involves passing the same props through components that don't actually need it

// context lets us jump through the component tree and use data at any level without making props

// 1. create your context
const AppContext = createContext();

// 2. wrap provider component
<AppContext.Provider value={'My App'}> {/* 3. Put data on value prop */}
    <App/>
</AppContext.Provider>

// 3. Gat data with useContext
function Title(){
    const text = useContext(AppContext);

    return <h1>{text}</h1>
}

// portals are kind of like context but for components
// portals let you move react components into any HTML element you select

// portals are great for components that can't be displayed properly because of their parents component styles
// e.g. displaying modals, drop-down menus and tooltip
<div>
    <p>I'm in the parent div</p>
    {
        // 1. use createPortal function
        createPortal(
            // 2. pass the component
            <p>I'm in the document body</p>,
            // 3. pick the HTML element where it should go
            document.body
        )
    }
</div>

// suspense is a special component that helps you handle loading a component or its data
// suspense is helpful for components that take some time to fetch data

// it provides a better user experience to show a fallback component like a loading spinner until the data is available instead of nothing
<Suspense fallback={<Loader />}>
    <Component />
</Suspense>

// suspense is also useful if you're lazily loading a component which lets us load a component only when it's needed
const LazyComponent = lazy(
    () => import('./Component')
);

<Suspense fallback={<Loader />}>
    <LazyComponent />
</Suspense>


// since react apps are all JavaScript, errors that happen during rendering can totally break your app
// error boundaries are components that let you catch app breaking errors and show a fallback component to tell the user about what happened

// eg
function App({user}){
    if(!user){
        throw new Error('No user Data') // 2. app will crash here
    }

    return <h1>{user.name}</h1>
}

<App/> // 1. if no data passed

// fix
import {ErrorBoundry} from 'react';

function Fallback({error}){
    return (
        <div role='alert'>
            <p>No user provided</p>
            <pre>{error.message}</pre>
        </div>
    )
}

<ErrorBoundry FallbackComponent={Fallback}>
    <App/>
</ErrorBoundry>