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
React 2 minute intro
By jonhilt
