React - the two minute intro

"A Javascript library for building user interfaces"

Framework?

Routers

Dependency Injection

Validation Frameworks

state = {}

render() {
    return <div></div>
}

var button = document.getElementById('sayHelloButton');

button.addEventListener('click', function (e) {
    
    document.getElementById('greeting')
            .innerHTML = 'Hello ' 
                + document.getElementById('name').value;
    
}, false);

state = { name: 'Alice', age: '21' }

render() {
    return <div>Hello {name}, I believe you're {age}! </div>
}

return React.createElement(
    "div", null, 
    "Hello ", name, 
    ", I believe you're ", age, "! ");

Virtual DOM

DOM

Efficient DOM Updates
Abstracts the DOM away from you (the developer)
Handles cross-browser compatibility

Virtual DOM Benefits

Layout

NavMenu

Varies depending on route e.g. <Home /> or <Cart />

Navigate to /cart

Varies depending on route e.g. <Home /> or <Cart />

Already rendered

(doesn't change)

Already rendered

(doesn't change)

(Re)Renders relevant component(s) for chosen route