Improve formatting

.prettierrc

@@ -0,0 +1 @@
+printWidth: 70

00-object-elements.html

@@ -12,30 +12,30 @@
 <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.
- // Normally you would use the React.createElement() to create an element.
- // This is what the return value of a React.createElement() call could look like.
+ // 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. Normally you would use the React.createElement()
+ // to create an element. This is what the return value of a
+ // React.createElement() call could look like.
  var reactElement = {
-
- // This special property will be checked by React to ensure this object
+ // This special property will be checked by React to ensure this
+ // object
  // is a React element and not just some user data
  // React.createElement() sets it for you
  $$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
+ // 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",
 
- // This defines the properties that get passed down into the element
+ // This defines the properties that get passed down to the element
  props: {
-
  // In this example there is just a single text node as child
  children: "Hello, world!",
 
@@ -45,29 +45,31 @@
  // 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") },
- },
-
- }
+ // React uses synthetic events to try to normalize browser
+ // behavior
+ onClick: function (notYourRegularEvent) {
+ alert("click");
+ }
+ }
+ };
 
  // another element that doesn"t have much configuration
  var anotherElement = {
  $$typeof: magicValue,
  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)
+ ReactDOM.render(reactElement, renderTarget);
 </script>

01-element-factory.html

@@ -11,23 +11,31 @@
  // React.createElement() needs type, properties, children.
  // This is less verbose than using plain object literals,
  // it hides the $$type/Symbol and ref mentioned in lesson 0
- var reactElement = React.createElement("h1", {
-
- className: "abc",
-
- style: {
- textAlign: "center",
+ var reactElement = React.createElement(
+ "h1",
+ {
+ className: "abc",
+
+ style: {
+ textAlign: "center"
+ },
+
+ onClick: function () {
+ alert("click");
+ }
  },
+ "Hello, world!"
+ );
 
-  onClick: function () { alert("click") },
-
- }, "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,
+ // it 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)
+ ReactDOM.render(reactElement, renderTarget);
 </script>

02-jsx.html

@@ -7,8 +7,9 @@
 
 <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.
+// 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>
@@ -17,30 +18,42 @@
 // 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 =
+var reactElement = (
  <h1
  className="abc"
- style={{textAlign: "center"}}
- onClick={function() { alert("click") }}>
+ 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!"
- )
-
-// JSX shines especially with simple elements that make up the majority
-var anotherElement = <p>A nice text paragraph.</p>
+reactElement = React.createElement(
+ "h1",
+ {
+ className: "abc",
+ style: { textAlign: "center" },
+ onClick: function() {
+ alert("click");
+ }
+ },
+ "Hello, world!"
+);
+
+// JSX shines 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)
+ReactDOM.render(reactElement, renderTarget);
 </script>

03-nested-elements.html

@@ -9,48 +9,57 @@
 <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 this without JSX would be pretty tedious
-var reactElement =
+// Elements can be nested, this results in nested React.createElement
+// calls. Writing this without JSX would be pretty tedious
+var reactElement = (
  <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 =
+// JavaScript insertion has the same syntax in attributes as in normal
+// text or elements
+reactElement = (
  <div className={myClass}>
  <h1>Hello {10 * 10}</h1>
  <h2>{myText()}</h2>
  </div>
+);
 
 // this JavaScript can contain elements too
-var nestedElement = <h2>world</h2>
+var nestedElement = <h2>world</h2>;
 
-reactElement =
+reactElement = (
  <div>
  <h1>Hello</h1>
  {nestedElement}
  </div>
+);
 
 // it is also possible to "spread" an object as properties
 var properties = {
  className: "abc",
- onClick: function() { alert("click") },
-}
+ onClick: function() {
+ alert("click");
+ }
+};
 
-reactElement =
+reactElement = (
  <div {...properties}>
  <h1>Hello</h1>
  <h2>world</h2>
  </div>
+);
 
-var renderTarget = document.getElementById("app")
+var renderTarget = document.getElementById("app");
 
-ReactDOM.render(reactElement, renderTarget)
-</script>
+ReactDOM.render(reactElement, renderTarget);
+</script>

04-components.html

@@ -14,65 +14,64 @@
 // see them as a mix of controller and view of MVC
 
 // Here we use stand alone elements and some data
-var data = "world"
-var reactElement =
+var data = "world";
+var reactElement = (
  <div>
  <h1>Hello</h1>
  <h2>{data}</h2>
  </div>
+);
 
 // Here the elements are encapsuled in a simple component function
-// They have to start with a capital letter and
-// return exactly ONE root element with or without nested elements (before React 16)
+// They have to start with a capital letter and return exactly ONE
+// root element with or without nested elements (before React 16)
 function MyComponent() {
- var data = "world"
+ var data = "world";
  return (
  <div>
  <h1>Hello</h1>
  <h2>{data}</h2>
  </div>
- )
+ );
 }
 
-// Since React 16.0.0, components can return an array of elements as well
-// In doing so, no additional wrapper element is created
-// One caveat is that, similarly to what we do when rendering an array,
-// we have to add a unique key to each element in the array, also don't forget the commas
-// (we'll see more on this in the next lesson)
+// Since React 16.0.0, components can return an array of elements as
+// well. In doing so, no additional wrapper element is created. One
+// caveat is that, similarly to what we do when rendering an array, we
+// have to add a unique key to each element in the array, also don't
+// forget the commas (we'll see more on this in the next lesson)
 function MyComponent() {
- var data = "world"
- return [
- <h1 key="hello">Hello</h1>,
- <h2 key="data">{data}</h2>
- ]
+ var data = "world";
+ return [<h1 key="hello">Hello</h1>, <h2 key="data">{data}</h2>];
 }
 
-// Since React 16.2.0, we can use special "wrapper" components called fragments
-// that behave the same (no extra wrapper element created)
-// but remove the need to explicitly set keys (fragments do this under the hood) and commas
+// Since React 16.2.0, we can use special "wrapper" components called
+// fragments that behave the same (no extra wrapper element created)
+// but remove the need to explicitly set keys (fragments do this under
+// the hood) and commas.
 function MyComponent() {
- var data = "world"
+ var data = "world";
  return (
  <React.Fragment>
  <h1>Hello</h1>
  <h2>{data}</h2>
  </React.Fragment>
- )
+ );
 }
 
 // a component function can be used like an element
-reactElement = <MyComponent/>
+reactElement = <MyComponent />;
 
 // this translates to a React.createElement() call
 // the null indicates that no properties have been set
-reactElement = React.createElement(MyComponent, null)
+reactElement = React.createElement(MyComponent, null);
 
 // for reference a react-internal <div> tag
-var anotherElement = <div/>
+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>
+ReactDOM.render(reactElement, renderTarget);
+</script>