Add three new lessons

2026-04-24 03:00:06 -04:00 · 2016-05-02 20:37:33 +02:00
parent a7cd8b8dae
commit bd40ab8013
3 changed files with 239 additions and 0 deletions
--- a/14-references.html
+++ b/14-references.html
@@ -0,0 +1,60 @@
+<!doctype html>
+
+<title>14 References - React From Zero</title>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+<div id='app'></div>
+
+<script type="text/babel">
+
+// Sometimes we need some state from an element or a component
+// or it has to be directly modified somehow. For
+// this case, we can tell React to create references.
+// These are named properties of a class component
+// stored in this.refs after the component got rendered.
+
+var RefComponent = React.createClass({
+
+  // First we tell React to render an input with a
+  // ref attribute the resulting DOM element will
+  // be stored into this.refs.nameInput
+  // We also add a callback to a button
+  render: function() {
+    return <div>
+      <input ref='nameInput'/>
+      <button onClick={this.handleClick}>Do Something</button>
+    </div>
+  },
+
+  // The callback is called when th button is clicked
+  // and uses this.refs.nameInput to read out the value
+  // of the input.
+  // For elements the rendered DOM node will be stored
+  // For components the instance of the component will
+  // be stored.
+  handleClick: function() {
+
+    console.log(this.refs.nameInput.value)
+
+  },
+
+})
+
+// Since references are local to their component
+// they can be used as local IDs to get elements
+// and don't override each other when another
+// instance of the component is created
+var reactElement = <div>
+  <RefComponent/>
+  <RefComponent/>
+  <RefComponent/>
+</div>
+
+
+ReactDOM.render(reactElement, document.getElementById('app'))
+
+</script>
--- a/15-simple-integration.html
+++ b/15-simple-integration.html
@@ -0,0 +1,38 @@
+<!doctype html>
+
+<title>15 Simple Integration - React From Zero</title>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js">
+// Most of the time we have to use third party libraries
+// in our applications. Here we integrate a simple one
+// for date handling and use it with React. It doesn't
+// use the DOM so it can be integrated fairly easy.
+</script>
+
+<div id='app'></div>
+
+<script type="text/babel">
+// Simple libraries that are called synchronous can used
+// directly in JSX with the help of {}, since they are
+// just function calls
+var DateToday = () => <span>{moment().format('DD.MM.YYYY')}</span>
+
+var tomorrow = moment().add(1, 'day')
+
+// Nothing exiting happening here, just calling the library
+// and displaying its return values. First with some
+// elements, then used inside of a component.
+var reactElement =
+  <div>
+    <h1 style={{textAlign:'center'}}>
+      Tomorrow is {tomorrow.format('MMMM')} the {tomorrow.format('Do')}
+    </h1>
+    <DateToday/>
+  </div>
+
+ReactDOM.render(reactElement, document.getElementById('app'))
+</script>
--- a/16-advanced-integration.html
+++ b/16-advanced-integration.html
@@ -0,0 +1,141 @@
+<!doctype html>
+
+<title>16 Advanced Integration - React From Zero</title>
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js'></script>
+
+<script src='https://d3js.org/d3.v4.0.0-alpha.33.min.js'>
+// Sometimes we need to integrate more complex
+// libraries. Libraries that want to use the
+// DOM directly or require asynchronous interaction.
+// In this example we use D3.js, a free InfoVis library.
+</script>
+
+<div id='app'></div>
+
+<script type='text/babel'>
+
+// Since D3 needs to interact directly with the DOM we
+// should use a component class, because it can store
+// references to its DOM-elements.
+var Visual = React.createClass({
+
+  // We simply render an empty canvas and tell React to
+  // store its reference after the render into this.refs
+  render: function() {
+
+    return <canvas ref='canvas' width={500} height={500}/>
+
+  },
+
+  // After the first render, we grab the reference
+  // to the canvas element in the DOM and pass it
+  // to the library
+  componentDidMount: function () {
+
+    // Here we also use some additional color configuration
+    drawGraph(this.refs.canvas, this.props.color)
+
+  },
+
+  // We also have some fine-granular control over the re-render
+  // With the use of this lifecylce method
+  shouldComponentUpdate: function(nextProps, nextState) {
+
+    // Here we could tell our library the new data for props
+    // or state, so it can update the DOM elements on its own
+
+    // At the end we always return false so our render method
+    // isn't called and the canvas element isn't replaced
+    return false
+
+  },
+
+  // This lifecycle method can be used to free resources
+  // before the component will be removed from the DOM.
+  // Our canvas will be removed for sure, but often there
+  // is state for the library, other objects, listeners etc.
+  // they could be stored at this and should be deleted to
+  // prevent memory leaks
+  componentWillUnmount() {},
+
+})
+
+// Now we can use the library as a component
+// No need for global IDs, every instance has its own canvas
+// reference stored, also its own color property
+var reactElement =
+  <div>
+    <Visual color='#f00'/>
+    <Visual color='#0f0'/>
+    <Visual color='#00f'/>
+  </div>
+
+ReactDOM.render(reactElement, document.getElementById('app'))
+
+// Wrapping the library interaction into a function
+function drawGraph(canvas, strokeColor) {
+
+  // An example from http://bl.ocks.org/mbostock/1b64ec067fcfc51e7471d944f51f1611
+  // its realeased under the GPL V3
+
+  var n = 20
+
+  var nodes = d3.range(n * n).map(function(i) {
+    return {
+      index: i
+    }
+  })
+
+  var links = []
+
+  for (var y = 0; y < n; ++y) {
+    for (var x = 0; x < n; ++x) {
+      if (y > 0) links.push({source: (y - 1) * n + x, target: y * n + x});
+      if (x > 0) links.push({source: y * n + (x - 1), target: y * n + x});
+    }
+  }
+
+  d3.forceSimulation(nodes)
+    .force('charge', d3.forceManyBody().strength(-30))
+    .force('link', d3.forceLink(links).distance(20).iterations(10))
+    .on('tick', ticked)
+
+  var context = canvas.getContext('2d')
+  var width = canvas.width
+  var height = canvas.height
+
+  function ticked() {
+    context.clearRect(0, 0, width, height)
+    context.save()
+    context.translate(width / 2, height / 2)
+
+    context.beginPath()
+    links.forEach(drawLink)
+    context.strokeStyle = '#aaa'
+    context.stroke()
+
+    context.beginPath()
+    nodes.forEach(drawNode)
+    context.fill()
+    context.strokeStyle = strokeColor
+    context.stroke()
+
+    context.restore()
+  }
+
+  function drawLink(d) {
+    context.moveTo(d.source.x, d.source.y)
+    context.lineTo(d.target.x, d.target.y)
+  }
+
+  function drawNode(d) {
+    context.moveTo(d.x + 3, d.y);
+    context.arc(d.x, d.y, 3, 0, 2 * Math.PI)
+  }
+
+}
+
+</script>