Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Forget What You Know

Forget What You Know

Just React things...

Christopher Pitt

September 22, 2016
Tweet

More Decks by Christopher Pitt

Other Decks in Programming

Transcript

  1. WHAT I LEARNED ABOUT REACT THOUGH I MOSTLY DO SERVER-SIDE

    AND A LITTLE BIT OF "WELL THAT WORKS WELL ENOUGH" JAVASCRIPT
  2. const $issues = $(".issues") $.ajax({ "url": "https://api.github.com/repos/facebook/react/issues", "success": function(issues) {

    issues.forEach(function(issue) { $issues.append(` <li class="issue"> <a class="title">${issue.title}</a> <div class="extract">${issue.body}</div> </li> `) }) } })
  3. "success": function(issues) { issues.forEach(function(issue) { $issues.append(` <li class="issue"> <a class="title">${issue.title}</a>

    <a class="hide" data-id="${issue.id}">hide</a> <div class="extract">${issue.body}</div> </li> `) }) }
  4. let hidden = [] $issues.on("click", ".hide", function(e) { const $hide

    = $(this) const id = $hide.data("id") hidden.includes(id) || hidden.push(id) });
  5. const render = function(issues) { $issues.empty() issues .filter(function(issue) { return

    ! hidden.includes(issue.id) }) .forEach(function(issue) { $issues.append(`...`) }) }
  6. let hidden = [] try { hidden = JSON.parse(localStorage["hidden"]) }

    catch (e) { console.warn("could not load hidden ids from local storage") }
  7. $issues.on("click", ".hide", function(e) { const $hide = $(this) const id

    = $hide.data("id") hidden.includes(id) || hidden.push(id) localStorage["hidden"] = JSON.stringify(hidden) fetch() });
  8. IMPERATIVE CODE ▸ make ajax request ▸ render list of

    items ▸ do a thing on click ▸ persist ui state for refresh
  9. <ul class="issues"> <li class="issue" ng-repeat="issue in issues" ng-if="visible"> <a class="title">{{

    issue.title }}</a> <a class="hide" data-id="{{ issue.id }}">hide</a> <div class="extract">{{ issue.body }}</div> </li> </ul>
  10. const Issues = ({ issues }) => { return (

    <ul className="issues"> {issues.forEach((issue, key) => { if (!issue.visible) { return } return <Issue {...issue} key={key} /> }) </ul> ) }
  11. class Issues extends React.Component { render() { return ( <ul

    className="issues"> {this.props.issues.forEach((issue, key) => { if (!issue.visible) { return } return <Issue {...issue} key={key} /> }) </ul> ) } }
  12. class Issues extends React.Component { componentWillMount() { // do something

    before the component mounts } componentWillReceiveProps() { // do something after the component mounts } shouldComponentUpdate() { // return false if the component shouldn't re-render } }
  13. class Issues extends React.Component { constructor(...params) { super(...params) this.state =

    { "text": "...list issues", } } async componentDidMount() { const response = await fetch("http://codepen.io/assertchris/pen/rrjKPN.css") const text = await response.text() this.setState({ ...this.state, "length": text.length, }) } render() { if (this.state.length) { return <span>{ this.state.text } ! { this.state.length }</span> } return <span>{ this.state.text }</span> } }
  14. let state1 = Immutable.Map({ "text": "...list items", "length": 0, })

    let state2 = map1.set("length", 43) state1.get("length") // 0 state2.get("length") // 43 state1.equals(state2) // false
  15. // ...the code you write ! import { Ioc }

    from "adonis-fold" import { hiddenReducer, highlightedReducer } from "path/to/core" Ioc.bind("reducers", function() { return [ hiddenReducer, highlightedReducer, ] })
  16. // ...the code others write ! import { Ioc }

    from "adonis-fold" import { pluginReducer } from "path/to/plugin" const previous = Ioc.use("reducers") Ioc.bind("reducers", function() { return [ ...previous, pluginReducer, ] })
  17. const Issues = (props) => { const globals = Ioc.use("global-issues")

    if (globals.length) { return ( <ul className="Issues"> { renderGlobalIssues(globals) } { renderIssues(props.issues) } </ul> ) } return ( <ul className="Issues"> { renderIssues(props.issues) } </ul> ) }