Update to React 16.4.0 kay-is#9

Author: kay-is

00-object-elements.html

@@ -2,8 +2,8 @@
 
 <title>00 Object Elements - React From Zero</title>
 
-<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
-<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
+<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
 
 <div id="app">
   <!--The render target of our React application-->
@@ -12,7 +12,7 @@
 <script>
   // React uses ES2015 Symbols to "tag" its element-objects.
   // It uses a magic number as fallback on older browsers.
-  var magicValue = (Symbol && Symbol.for('react.element')) || 0xeac7
+  var magicValue = (Symbol && Symbol.for("react.element")) || 0xeac7
 
   // React uses virtual DOM elements, which become real DOM elements on a render.
   // A virtual DOM element can be defined as a simple object literal.
@@ -25,44 +25,49 @@
     // React.createElement() sets it for your
     $$typeof: magicValue,
 
+    // This will also be checked by React. We will be talking about references
+    // later, but if you're not using them, this has to be set to null and not
+    // undefined
+    ref: null,
+
     // This defines the HTML-tag
-    type: 'h1',
+    type: "h1",
 
     // This defines the properties that get passed down into the element
     props: {
 
       // In this example there is just a single text node as child
-      children: 'Hello, world!',
+      children: "Hello, world!",
 
       // a CSS class
-      className: 'abc',
+      className: "abc",
 
       // styles can be passed as object literals
       // React uses camelCase instead of dashed-case (like CSS/D3 do)
       style: {
-        textAlign: 'center',
+        textAlign: "center",
       },
 
       // event handlers can be added as properties, too
       // React uses synthetic events, which basically try to normalize browser behaviour
-      onClick: function (notYourRegularEvent) { alert('click') },
+      onClick: function (notYourRegularEvent) { alert("click") },
     },
 
   }
 
-  // another element that doesn't have much configuration
+  // another element that doesn"t have much configuration
   var anotherElement = {
     $$typeof: magicValue,
-    type: 'p',
+    ref: null,
+    type: "p",
     props: {
-      children: 'A nice text paragraph.',
+      children: "A nice text paragraph.",
     },
   }
 
   // React needs a DOM element as render target
-  var renderTarget = document.getElementById('app')
+  var renderTarget = document.getElementById("app")
 
   // ReactDOM is responsible for inserting the element into the DOM
   ReactDOM.render(reactElement, renderTarget)
-
 </script>

01-element-factory.html

@@ -2,33 +2,32 @@
 
 <title>01 Element Factory - React From Zero</title>
 
-<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
-<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
+<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
 
-<div id='app'></div>
+<div id="app"></div>
 
 <script>
   // React.createElement() needs type, properties, children.
   // This is less verbose than using plain object literals,
-  // it hides the $$type/Symbol stuff mentioned in 0
-  var reactElement = React.createElement('h1', {
+  // it hides the $$type/Symbol and ref mentioned in lesson 0
+  var reactElement = React.createElement("h1", {
 
-    className: 'abc',
+    className: "abc",
 
     style: {
-      textAlign: 'center',
+      textAlign: "center",
     },
 
-    onClick: function () { alert('click') },
+    onClick: function () { alert("click") },
 
-  }, 'Hello, world!')
+  }, "Hello, world!")
 
 
-  // the second argument is the property object and has to be null if empty
-  var anotherElement = React.createElement('p', null, 'A nice text paragraph.')
+  // The second argument is the property object and has to be null if empty
+  var anotherElement = React.createElement("p", null, "A nice text paragraph.")
 
-  var renderTarget = document.getElementById('app')
+  var renderTarget = document.getElementById("app")
 
   ReactDOM.render(reactElement, renderTarget)
-
 </script>

02-jsx.html

@@ -2,47 +2,45 @@
 
 <title>02 JSX - React From Zero</title>
 
-<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
-<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
+<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
 
 <script src="https://unpkg.com/@babel/standalone/babel.min.js">
 // Now we will use JSX, which needs to be converted to JavaScript.
 // For this we will use Babel. Babel is normally used to convert ES2015 to ES5, but
 // it also can convert JSX to ES5. Babels browser version uses text/babel script tags.
 </script>
 
-<div id='app'></div>
+<div id="app"></div>
 
 <script type="text/babel">
-
 // JSX is the idiomatic way of creating elements.
 // It's basically XHTML with {} for dynamic content
 // also class has to be called className
 var reactElement =
   <h1
-    className='abc'
-    style={{textAlign: 'center'}}
-    onClick={function() { alert('click') }}>
+    className="abc"
+    style={{textAlign: "center"}}
+    onClick={function() { alert("click") }}>
     Hello, world!
   </h1>
 
 // Is the same as
 reactElement =
   React.createElement(
-    'h1',
-    {className: 'abc', style: {textAlign: 'center'},
-    onClick: function() { alert('click') }},
-    'Hello, world!'
+    "h1",
+    {className: "abc", style: {textAlign: "center"},
+    onClick: function() { alert("click") }},
+    "Hello, world!"
   )
 
 // JSX shines especially with simple elements that make up the majority
 var anotherElement = <p>A nice text paragraph.</p>
 // Is the same as
-anotherElement = React.createElement('p', null, 'A nice text paragraph.')
+anotherElement = React.createElement("p", null, "A nice text paragraph.")
 
 // As we can see, everything else works as before
-var renderTarget = document.getElementById('app')
+var renderTarget = document.getElementById("app")
 
 ReactDOM.render(reactElement, renderTarget)
-
 </script>

03-nested-elements.html

@@ -2,26 +2,25 @@
 
 <title>03 Nested Elements - React From Zero</title>
 
-<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
-<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
+<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
 <div id="app"></div>
 
 <script type="text/babel">
-
 // Elements can be nested, which will result in nested React.createElement calls
 // As you can imagine, writing withs without JSX would be pretty tedious
 var reactElement =
-  <div className='abc'>
+  <div className="abc">
     <h1>Hello</h1>
     <h2>world</h2>
   </div>
 
 // they can also, like mentioned in lesson 2, contain JavaScript in {}
-var myClass = 'abc'
+var myClass = "abc"
 
-function myText() { return 'world' }
+function myText() { return "world" }
 
 // JavaScript insertion has the same syntax in attributes as in normal text or elements
 reactElement =
@@ -41,8 +40,8 @@ <h1>Hello</h1>
 
 // it is also possible to "spread" an object as properties
 var properties = {
-  className: 'abc',
-  onClick: function() { alert('click') },
+  className: "abc",
+  onClick: function() { alert("click") },
 }
 
 reactElement =
@@ -51,8 +50,7 @@ <h1>Hello</h1>
     <h2>world</h2>
   </div>
 
-var renderTarget = document.getElementById('app')
+var renderTarget = document.getElementById("app")
 
 ReactDOM.render(reactElement, renderTarget)
-
 </script>

04-components.html

@@ -2,20 +2,19 @@
 
 <title>04 Components - React From Zero</title>
 
-<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
-<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
+<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
 <div id="app"></div>
 
 <script type="text/babel">
-
 // The main selling point of React is its component system
 // components are used to encapsulate elements and their behaviour
 // see them as a mix of controller and view of MVC
 
 // Here we use stand alone elements and some data
-var data = 'world'
+var data = "world"
 var reactElement =
   <div>
     <h1>Hello</h1>
@@ -26,7 +25,7 @@ <h2>{data}</h2>
 // They have to start with a capital letter and
 // return exactly ONE root element with or without nested elements
 function MyComponent() {
-  var data = 'world'
+  var data = "world"
   return (
     <div>
       <h1>Hello</h1>
@@ -45,10 +44,9 @@ <h2>{data}</h2>
 //  for reference a react-internal <div> tag
 var anotherElement = <div/>
 // gets converted to
-anotherElement = React.createElement('div', null)
+anotherElement = React.createElement("div", null)
 
-var renderTarget = document.getElementById('app')
+var renderTarget = document.getElementById("app")
 
 ReactDOM.render(reactElement, renderTarget)
-
 </script>

05-properties.html

@@ -2,14 +2,13 @@
 
 <title>05 Properties - React From Zero</title>
 
-<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
-<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
+<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
 <div id="app"></div>
 
 <script type="text/babel">
-
 // Components, like elements, can use properties, too
 function MyComponent(props) {
   return (
@@ -20,28 +19,27 @@ <h2>{props.customData}</h2>
   )
 }
 
-var reactElement = <MyComponent className='abc' customData='world'/>
+var reactElement = <MyComponent className="abc" customData="world"/>
 
 // Which also works with an object and the spread (...) operator
 var props = {
-  className: 'abc',
-  customData: 'world',
+  className: "abc",
+  customData: "world",
 }
 
 reactElement = <MyComponent {...props}/>
 
 // This allows components with dynamic content
-var planets = ['earth', 'mars', 'venus']
+var planets = ["earth", "mars", "venus"]
 
 // If an array is used as "child node" each child needs a unique key-property
 var elements = planets.map(function(planet, index) {
-  return <MyComponent className='myClass' customData={planet} key={index}/>
+  return <MyComponent className="myClass" customData={planet} key={index}/>
 })
 
 reactElement = <div>{elements}</div>
 
-var renderTarget = document.getElementById('app')
+var renderTarget = document.getElementById("app")
 
 ReactDOM.render(reactElement, renderTarget)
-
 </script>