Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Up & Running
with ReactJS
June 9, 2015 @ PeopleSpace
Education, tech startups, community
peoplespace.us
React.render(<Selfie/>)
● Freelancer building web and mobile UIs
● AngularJS-OC organizer too
● Node, Ruby, Java, C# too
●...
Goals
● Learn React building blocks
● See how the component APIs work
● Go home knowing how to start using React
Agenda
1. Origins
2. React components
3. Component state and props
4. Component refs and events
5. React Router
About React
● Originated at FB and Instagram
● A declarative view library, the “V” in MVC
● Improves web dev experience wi...
Who’s using it?
● Facebook, Instagram (duh)
● AirBnB
● Netflix
● Atlassian (HipChat)
● Yahoo (Mail)
Hello World
var Hello = React.createClass({
render: function () {
return <div>Hello World</div>;
}
});
React.renderCompone...
React Components
● Fundamental building block of React
● Maps to elements in your DOM
● Composable units to structure your...
High cohesion
● Encapsulates display logic and view
JSX
render() {
return (
<nav className="top-nav">
<ul className"horizontal-link-list">
{links.map(function (link) {
return (
<...
render() {
return (
<nav className="top-nav">
<ul className"horizontal-link-list">
{links.map(function (link) {
return (
<...
JSX (it’s a feature, not a bug)
● Preprocessor that only looks like HTML
● NOT strings of markup w/XSS vulnerability
● Sug...
JSX
JavaScript
React.createClass({
render: function () {
return (
<ul id="tasks">
<li>Task 1</li>
</ul>
);
}
});
var li = ...
Data binding
● Key-value observation: EmberJS,
KnockoutJS
● Dirty checking: AngularJS
● State is hard, so UIs are hard
● “...
The virtual DOM
● React’s (Simple) Secret Sauce
● In-memory representation of the DOM
● Diffs changes and updates DOM as n...
The render function
● Insert JSX here
● Called when component is mounted
● Called every time the state changes
● “refresh”...
Component properties
● For data that does not change
● Props are just attributes assigned in JSX
● Accessible with this.pr...
Property Example
var Meetup = React.createClass({
render: function () {
return <h1>{this.props.name}</h1>;
}
});
React.ren...
Component state
● For data that changes
● Accessible with this.state
● getInitialState() - sets the initial state
values
●...
Live: state example
Credit to Ryan Florence
Refs
● Get a handle to your actual DOM elements
● <input type="text" ref="email" />
● this.refs.email
● Interact with DOM ...
Event handlers
● Add to your elements inline
this.poke = function () { alert('howdy'); }
<button onClick={this.poke}>Poke<...
Live: refs & events example
Simple Routing
● Just switch between components
var Dashboard = React.createClass(...);
var Home = React.createClass(...);
Simple Routing
● Just switch between components
var Dashboard = React.createClass(...);
var Home = React.createClass(...);
Simple Routing (cont’d)
var App = React.createClass({
render: function () {
var Child;
switch (this.props.route) {
case 'd...
Simple Routing (cont’d)
function render () {
var route = window.location.hash.substr(1);
React.render(<App route={route} /...
React Router
● Routing library by Ryan Florence
● Heavily influence by Ember Router
● Makes nested states simple
● GitHub,...
Routes Declaration
<Route handler={App} path="/">
<Route name="home" path="home" handler={Home} />
<Route name="dashboard"...
Links
<Link to="home">Home</Link>
<Link to="dashboard">Dashboard</Link>
Live: React Router Example
Free Resources
● The docs
● ReactConf 2015 Videos
● The Secrets of React’s Virtual DOM
● React Podcast
Paid Resources
● egghead.io - React, Native, Flux
● frontendmasters.com - 4.5 hour React intro
● pluralsight.com - 3 hour ...
What’s next? Need speakers!
● Component lifecycle
● Component best practices
● 3rd party JS integration
● React Router
● D...
Up and Running with ReactJS
Up and Running with ReactJS
Up and Running with ReactJS
Upcoming SlideShare
Loading in …5
×

Up and Running with ReactJS

2,567 views

Published on

Learn how to use the fundamental building blocks of ReactJS and get a glimpse at React Router too

Published in: Engineering
  • Be the first to comment

Up and Running with ReactJS

  1. 1. Up & Running with ReactJS June 9, 2015 @ PeopleSpace
  2. 2. Education, tech startups, community peoplespace.us
  3. 3. React.render(<Selfie/>) ● Freelancer building web and mobile UIs ● AngularJS-OC organizer too ● Node, Ruby, Java, C# too ● locnguyen.com, @locn
  4. 4. Goals ● Learn React building blocks ● See how the component APIs work ● Go home knowing how to start using React
  5. 5. Agenda 1. Origins 2. React components 3. Component state and props 4. Component refs and events 5. React Router
  6. 6. About React ● Originated at FB and Instagram ● A declarative view library, the “V” in MVC ● Improves web dev experience with simple, cohesive component model ● React - Rethinking Best Practices
  7. 7. Who’s using it? ● Facebook, Instagram (duh) ● AirBnB ● Netflix ● Atlassian (HipChat) ● Yahoo (Mail)
  8. 8. Hello World var Hello = React.createClass({ render: function () { return <div>Hello World</div>; } }); React.renderComponent(<Hello/>, document.body);
  9. 9. React Components ● Fundamental building block of React ● Maps to elements in your DOM ● Composable units to structure your app ● Like directives in AngularJS
  10. 10. High cohesion ● Encapsulates display logic and view
  11. 11. JSX
  12. 12. render() { return ( <nav className="top-nav"> <ul className"horizontal-link-list"> {links.map(function (link) { return ( <li key={link.id} className={loggedIn ? 'warn' : ''}> <a href={link.href}>{link.text}</a> </li> ); })} </ul> </nav> ); }
  13. 13. render() { return ( <nav className="top-nav"> <ul className"horizontal-link-list"> {links.map(function (link) { return ( <li key={link.id}> <a href={link.href}>{link.text}</a> </li> ); })} </ul> </nav> ); }
  14. 14. JSX (it’s a feature, not a bug) ● Preprocessor that only looks like HTML ● NOT strings of markup w/XSS vulnerability ● Sugar for calling React functions ● No need for abstractions in a template lang <ng-if> or {{#if}}
  15. 15. JSX JavaScript React.createClass({ render: function () { return ( <ul id="tasks"> <li>Task 1</li> </ul> ); } }); var li = React.createElement('li', null, 'Task 1'); var ul = React.createElement('ul', {id:'tasks'}, li); React.render(ul, document.body);
  16. 16. Data binding ● Key-value observation: EmberJS, KnockoutJS ● Dirty checking: AngularJS ● State is hard, so UIs are hard ● “Refreshing” the page is easy
  17. 17. The virtual DOM ● React’s (Simple) Secret Sauce ● In-memory representation of the DOM ● Diffs changes and updates DOM as needed ● Be Predictable, Not Correct
  18. 18. The render function ● Insert JSX here ● Called when component is mounted ● Called every time the state changes ● “refresh” the page except mutate DOM only where needed
  19. 19. Component properties ● For data that does not change ● Props are just attributes assigned in JSX ● Accessible with this.props ● getDefaultProps() - set default values if not provided
  20. 20. Property Example var Meetup = React.createClass({ render: function () { return <h1>{this.props.name}</h1>; } }); React.render(<Meetup name="ReactJS OC" />, document.body);
  21. 21. Component state ● For data that changes ● Accessible with this.state ● getInitialState() - sets the initial state values ● this.setState()calls render()!
  22. 22. Live: state example
  23. 23. Credit to Ryan Florence
  24. 24. Refs ● Get a handle to your actual DOM elements ● <input type="text" ref="email" /> ● this.refs.email ● Interact with DOM APIs
  25. 25. Event handlers ● Add to your elements inline this.poke = function () { alert('howdy'); } <button onClick={this.poke}>Poke</button> ● Send arguments with .bind <button onClick={this.poke.bind(null, 'Loc')}>Poke</button>
  26. 26. Live: refs & events example
  27. 27. Simple Routing ● Just switch between components var Dashboard = React.createClass(...); var Home = React.createClass(...);
  28. 28. Simple Routing ● Just switch between components var Dashboard = React.createClass(...); var Home = React.createClass(...);
  29. 29. Simple Routing (cont’d) var App = React.createClass({ render: function () { var Child; switch (this.props.route) { case 'dashboard': Child = Dashboard; break; case 'home': Child = Home; break; default: Child = Home; } return <div><Child/></div>; } });
  30. 30. Simple Routing (cont’d) function render () { var route = window.location.hash.substr(1); React.render(<App route={route} />, document.body); } window.addEventListener('hashchange', render); render(); // render initially
  31. 31. React Router ● Routing library by Ryan Florence ● Heavily influence by Ember Router ● Makes nested states simple ● GitHub, Examples, Docs
  32. 32. Routes Declaration <Route handler={App} path="/"> <Route name="home" path="home" handler={Home} /> <Route name="dashboard" path="dashboard" handler={Dashboard}/> </Route>
  33. 33. Links <Link to="home">Home</Link> <Link to="dashboard">Dashboard</Link>
  34. 34. Live: React Router Example
  35. 35. Free Resources ● The docs ● ReactConf 2015 Videos ● The Secrets of React’s Virtual DOM ● React Podcast
  36. 36. Paid Resources ● egghead.io - React, Native, Flux ● frontendmasters.com - 4.5 hour React intro ● pluralsight.com - 3 hour React intro ● reactweek.com - React, Flux, Router, Webpack
  37. 37. What’s next? Need speakers! ● Component lifecycle ● Component best practices ● 3rd party JS integration ● React Router ● Data flow, Flux architecture ● React Native ● Testing ● Tooling

×