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
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
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
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
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).
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.
31. ▸ Changing props and state
State And Props
- Props State
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
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
