React for Dummies

Getting started with React

1. React For Dummies
Mitch Chen

2. Agenda
▸Components
▸JSX
▸Virtual DOM
▸Rendering
▸State and Props
▸Component Lifecycle
▸Hands-on
▸Where to go from here
▸Q & A

3. Components
▸Separation of Concerns: Reduce Coupling, increase
Cohesion
▸Display Logic and Markup are highly Cohesive: They both
show the UI
▸Components are the right way to separate concerns
▸Components are Reusable, Composable and Unit Testable

4. Components
▸React Components use Expressive power of programming
language(JSX) to build UIs
▸React Components: A highly Cohesive building block for
UIs Loosely Coupled with other components
▸React makes you build many simple components that does
one thing really well

5. Components - Syntax
▸ES5 Syntax
var!MyApp!=!React.createClass({…});

6. Components - Syntax
▸ES6 Syntax
class!MyApp!extends!React.Component!{…}

7. Practice
Hello, world!
http://goo.gl/c7pGK9

8. Components - Syntax
▸Stateless Component
These components must not retain internal state,
do not have the component lifecycle methods.

9. Components - Syntax
▸Stateless Component - ES5
func.on!MyApp(props)!{!
!!!!return!<h2>Hello,!{props.name}</h2>;!
}!
ReactDOM.render(!
!!!!<MyApp!name=“Mitch”!/>,!document.getElementById(‘root’)!
);

10. Components - Syntax
▸Stateless Component - ES6
const!MyApp!=!(props)!=>!<h2>Hello,!{props.name}</h2>;!
ReactDOM.render(!
!!!!<MyApp!name=“Mitch”!/>,!document.getElementById(‘root’)!
);

11. JSX
JSX is a JavaScript syntax extension
that looks similar to XML.

12. JSX
Pure2JavaScript:2
React.createElement(‘a’,!{href:!‘hPps://facebook.github.io/
react/'},!‘Hello!’);!
JSX2Syntax:2
<a!href=“hPps://facebook.github.io/react/“>Hello!</a>

13. JSX
▸Supported HTML Elements
a abbr address area article aside audio b base bdi bdo big blockquote body br
button canvas caption cite code col colgroup data datalist dd del details dfn
dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5
h6 head header hgroup hr html i iframe img input ins kbd keygen label legend li
link main map mark menu menuitem meta meter nav noscript object ol optgroup
option output p param picture pre progress q rp rt ruby s samp script section
select small source span strong style sub summary sup table tbody td textarea
tfoot th thead time title tr track u ul var video wbr

14. JSX
▸Supported HTML Attributes
accept acceptCharset accessKey action allowFullScreen allowTransparency alt
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
charSet checked cite classID className colSpan cols content contentEditable
contextMenu controls coords crossOrigin data dateTime default defer dir
disabled download draggable encType form formAction formEncType formMethod
formNoValidate formTarget frameBorder headers height hidden high href hrefLang
htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
lang list loop low manifest marginHeight marginWidth max maxLength media
mediaGroup method min minLength multiple muted name noValidate nonce open
optimum pattern placeholder poster preload profile radioGroup readOnly rel
required reversed role rowSpan rows sandbox scope scoped scrolling seamless
selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step
style summary tabIndex target title type useMap value width wmode wrap

15. JSX
▸Event System
▸DOM Differences
▸Special Non-DOM Attributes

16. Virtual Dom
▸Makes re-rendering on every change fast
▸Computes minimal DOM operations
▸Batched reads and writes for optimal DOM performance
▸Usually faster than manual DOM operations
▸60fps, even in a UIWebView on the iPhone

17. Virtual Dom
A ReactElement is a light, stateless, immutable,
virtual representation of a DOM Element. It is
a virtual DOM

18. Rendering
▸State has data you own, Props has data you borrow
▸When the State(data) changes, React Re-renders the Entire
Component
▸No magical data binding
▸No model dirty checking
▸No more explicit DOM operations: Everything is
declarative

19. Rendering
setState Dirty
Batching

20. Rendering
Dirty
Sub-tree Rendering
Re-Rendered

21. State And Props
▸State is mutable
▸State is private to the component
▸State can be changed by calling this.setState()
▸When the state updates, the component re-renders itself

22. State And Props
▸Props are immutable
▸Based on its props, each component has rendered itself
once
▸Props are passed from the parent
▸Props are owned by the parent

23. State And Props
▸Prop Validation
class!MyApp!extends!React.Component!{…}!
MyApp.propTypes!=!{!
!!!!opVonalArray:!React.PropTypes.array,!
!!!!opVonalBool:!React.PropTypes.bool,!
!!!!opVonalFunc:!React.PropTypes.func,!
!!!!opVonalNumber:!React.PropTypes.number,!
!!!!opVonalObject:!React.PropTypes.object,!
!!!!opVonalString:!React.PropTypes.string,!
!!!!opVonalNode:!React.PropTypes.node,!
!!!!opVonalElement:!React.PropTypes.element!
};

24. State And Props
▸Prop Validation
class!MyApp!extends!React.Component!{…}!
MyApp.propTypes!=!{!
!!!!opVonalMessage:!React.PropTypes.instanceOf(Message),!
!!!!opVonalEnum:!React.PropTypes.oneOf([‘News’,!‘Photos’]),!
!!!!opVonalUnion:!React.PropTypes.oneOfType([!
!!!!!!!!React.PropTypes.number,!
!!!!!!!!React.PropTypes.string!
!!!!]),!
!!!!opVonalArrayOf:!React.PropTypes.arrayOf(React.PropTypes.number),!
!!!!opVonalObjectOf:!React.PropTypes.objectOf(React.PropTypes.number)!
};

25. State And Props
▸Prop Validation
class!MyApp!extends!React.Component!{…}!
MyApp.propTypes!=!{!
!!!!opVonalObjectWithShape:!React.PropTypes.shape({!
!!!!!!!!name:!React.PropTypes.string,!
!!!!!!!!count:!React.PropTypes.number!
!!!!}),!
!!!!requiredFunc:!React.PropTypes.func.isRequired,!
!!!!requiredAny:!React.PropTypes.any.isRequired!
};

26. State And Props
▸Dumb Components
-The most reusable components available
-They have a know-nothing approach to the
application in which they are used.
-It does not connect to any Flux interfaces, and is
passed the exact data it needs to render (via Props).

27. Practice
NavBar Component
http://codepen.io/mitchbox/pen/
ZOAWqk

28. Practice
ProfileCard Component
http://codepen.io/mitchbox/pen/
GqQkwE

29. State And Props
▸Smart Components
-Less reusable outside a single application or set of
applications
-They are aware of application-level state.
-It may bind to Flux actions or stores in order to
directly integrate with business logic and react to
changes.

30. Practice
Click and count
http://codepen.io/mitchbox/pen/
mEXPaw

31. ▸Changing props and state
State And Props
- PropsState
Can get initial value from parent Component?Y Y
Can be changed by parent Component? Y N
Can set default values inside Component? Y Y
Can change inside Component? N Y
Can set initial value for child Components?Y Y
Can change in child Components? Y N

32. Component Lifecycle Methods
▸componentWillMount
▸componentDidMount
▸componentWillReceiveProps
▸componentWillUnmount
▸shouldComponentUpdate
▸componentWillUpdate
▸componentDidUpdate

33. ▸Search Github User (Integrate with Github API)
Hands-On
Github API
https://api.github.com/users/{username}

34. ▸Search Github User (Integrate with Github API)
Hands-On
-Include NavBar and ProfileCard components
-Implement API helper function
-Create an App Container Component
-Add event handler and call Github API
-State management
-UI Rendering with state
-http://codepen.io/mitchbox/pen/bZLpOr

35. Where To Go From Here
▸Development Environment & Tools
▸Basic Technical Skill Requirements
▸Familiar with React Related Third Party Libraries
▸Familiar with Migo Internal Libraries and Boilerplate

36. Where To Go From Here
▸Development Environment & Tools
-Node.js / NPM
-Webpack / Gulp / Grunt
-Babel (JavaScript Compiler)
-Live Reload
-ESLint
-Mocha / Chai

37. Where To Go From Here
▸Basic Technical Skill Requirements
-CSS / CSS 3 / SASS / (PostCSS)
-Naming Convention for CSS (BEM)
-Coding Convention for React
-ECMAScript 2015 aka ES6
-Functional Programming

38. Where To Go From Here
▸Familiar with React Related Third Party Libraries
-Flux
-ReFlux
-Redux
-Redux Thunk
-Redux Middleware
-React-router
-Classnames
-Immutable.js
-Flow

39. Q & A