Update to React 16.4.0 #9

kay-is · Jun 5, 2018 · dda6748 · dda6748
1 parent 25fccc1
commit dda6748
Show file tree

Hide file tree

Showing 17 changed files with 181 additions and 188 deletions.
diff --git a/00-object-elements.html b/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>
diff --git a/01-element-factory.html b/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>
diff --git a/02-jsx.html b/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>
diff --git a/03-nested-elements.html b/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>
diff --git a/04-components.html b/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>
diff --git a/05-properties.html b/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>