# React

---

## Overview

- What is it
- (Virtual DOM)
- How to boilerplate your react apps
- Basic react
- Components
- Render functions
- JSX
- Props

---

## What is react

A javascript library that is used for large scale single page applications. It's mainly used for building User Interfaces. React renders is data in small isolated containers called components.

---

## Virtual DOM

React manages a virtual copy of the DOM. The virtual DOM is how REACT keeps track of what state. This state will be configured and then rendered to the actual DOM.
*NOTE: The virtual DOM is not the DOM. The virtual DOM is more of a pattern that it is a technology*

What do I mean?

React is optmized to minimize the number of changes that happen on the DOM. KEEP IN MIND: your react code changes the virtual DOM not the real one.

---

## Boilerplating our react apps

`npx create-react-app name-of-app`

Without this boilerplate we will have to manually set up all the utilites and libraries that react needs to work correctly.** Not reccomended**.

---

## Creating Elements in React

const rc = React.createElement( type, [props], [...children])
ReactDOM.render(rc, document.getElementById('root'))

*We will not be writing out react applications this way.*

---

# Components

---

## What are components?
They are small isolated code blocks that control the UI on your react application. Components are where we render our UI state and accept UI data. React component has two basic usages.

- OOP -> Object oriented Programming. 
- Functional Composition -> eeehhhhh kinda. We will see more of this style when we get to redux

---

## Two types of components

Whats the stigma?

// class :new syntax below
class MyComponent extends Component {}

// function :familiar syntax
function MyComponent (){}
const MyComponent = () => {}

---

## Render Function & JSX

Every class component needs a render function.

// class
class MyComponent extends Component {
    render(){
        return(
            <h1>Hello DC</h1>
        )
    }
}

---

## What is JSX?
Javascript as XML: We can use JSX in multiple ways. We can assign them the **elements** that can be used inside render functions or we can utilize them **direclty** in the render functions themselves. We can also return them from functional components.You will be using all interchangebly as your grow your react knowledge.

 const jsxElement = <div> The Wallking Dead </div>

....Component Logic
    render(){
        return(
            <h1>Hello DC</h1>
        )
    }

---

## Properties aka Props

Props are how we pass data between components or across the application. Props are usually passed from the top dowm starting at the "said" root component.

<MyComponent prop1="a cool prop value" prop2="a cooler value"/>

Usage

render(){
    return(
        <div>{this.props.prop1}</div>
    )
}

---

## Where do the come from.

The props object comes directly from the react library. Each component has a props object attached to it whether we use props or not.

More on this during live coding session.

---

# Super()

`super()`: is ***super*** important (comedic drumroll to hats). The reason is because we cannot access our props from the parent component with out.

---

## usage

// class component
class MyComponent extends Component {
    constructor(props){
        super(props)
        
    }
    render(){
        return(
            <h1>Hello DC</h1>
        )
    }
}

---

# Lets Code

---