Slide 1

Slide 1 text

Introduction to React A library for creating user interfaces.

Slide 2

Slide 2 text

● What is React? ● React Components ● Stateless UI ● Virtual DOM Agenda

Slide 3

Slide 3 text

What is React?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

● What is React? ● React Components ● Stateless UI ● Virtual DOM Agenda

Slide 8

Slide 8 text

// commentBox.js.jsx var CommentBox = React.createClass({displayName: 'CommentBox', render: function() { return (
Hello, world! I am a CommentBox.
); } });

Slide 9

Slide 9 text

React Component

Slide 10

Slide 10 text

Composable, Reusable Components ● Rethinking the way we build UIs on the web ● Build components, not templates ● Use React components to create cohesive building blocks and separate your concerns ● Reduce coupling and increase cohesion

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Composable, Reusable Components

Slide 14

Slide 14 text

● What is React? ● React Components ● Stateless UI ● Virtual DOM Agenda

Slide 15

Slide 15 text

Stateless UI

Slide 16

Slide 16 text

Building UIs is hard because there is so much state. Re-render, don’t mutate. ● Data displayed is guaranteed to be up-to-date ● No two-way data-binding complexity ● No explicit DOM manipulations (components are declarative.) Stateless UI

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Virtual DOM Re-render? But isn’t DOM manipulation slow? React knows to only update the changed parts. Virtual DOM: A lightweight implementation of the DOM

Slide 20

Slide 20 text

● What React is ● Components, not templates ● Re-render, not mutate ● Virtual DOM Summary

Slide 21

Slide 21 text

References / Additional Topics React Tutorial (https://facebook.github.io/react/docs/tutorial.html) Thinking in React (https://facebook.github.io/react/docs/thinking-in-react.html) Reactive Programming React Native Flux Reflux

Slide 22

Slide 22 text

Thanks!

Slide 23

Slide 23 text

Q&A