Merge pull request #13 from ReactBangalore/refs

Added exercises for refs

Author: akiran

.gitignore

@@ -0,0 +1 @@
+code

exercises/src/App.js

@@ -1,14 +1,19 @@
 import React, { Component } from "react";
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import PerformanceOptimizations from "./performance-optimizations";
+import RefsExample from './refs'
 import ErrorBoundaries from "./error-boundaries";
 import { Provider } from 'react-redux'
 import { createStore } from "redux";
 
-import reducer from ".testing-react-component/components/CounterStore/reducer";
+import reducer from "./testing-react-component/components/CounterStore/reducer";
 
 const store = createStore(reducer)
 
+function Home() {
+  return <h1>Advanced React Workshop</h1>
+}
+
 class App extends Component {
   render() {
     return (
@@ -18,20 +23,24 @@ class App extends Component {
             <div className="sidebar">
               <ul>
                 <li>
-                  <Link to="/">Refs</Link>
+                  <Link to="/">Home</Link>
+                </li>
+                <li>
+                  <Link to="/refs">Refs</Link>
                 </li>
                 <li>
-                  <Link to="/performance-optimizations">perfromance optimizations</Link>
+                  <Link to="/performance-optimizations">Perfromance optimizations</Link>
                 </li>
                 <li>
                   <Link to="/error-boundaries">Error Boundaries</Link>
                 </li>
               </ul>
             </div>
             <div className="content">
-              <Route exact path="/" component={PerformanceOptimizations} />
+              <Route exact path="/" component={Home} />
               <Route path="/performance-optimizations" component={PerformanceOptimizations} />
               <Route path="/error-boundaries" component={ErrorBoundaries} />
+              <Route path="/refs" component={RefsExample} />
             </div>
           </div>
         </Router>

exercises/src/index.css

@@ -8,10 +8,11 @@ body {
 .container {
   display: flex;
   flex: 1;
+  padding-top: 50px;
 }
 
 .sidebar {
-  padding-top: 50px;
+
   flex: 1;
 }
 .sidebar ul {
@@ -80,4 +81,4 @@ body {
 
 .Counter__disabled {
   opacity: 0.3;
-}
+}

exercises/src/refs/MeasureText.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default class MeasureText extends React.Component {
+  render() {
+    return (
+      <div>
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      </div>
+    )
+  }
+}

exercises/src/refs/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import MeasureText from './MeasureText'
+
+export default class RefsExample extends React.Component {
+  render() {
+    return (
+      <div>
+        <p><strong>Get the widht and height of the div contaning lorem ipsum text in MeasureText
+          component and set it in the state of the component.</strong></p>
+        <p><strong>Hint: calling getBoundingClientRect on a DOM node returns it dimensions</strong></p>
+        <hr />
+        <MeasureText />
+      </div>
+    )
+  }
+}

slides/refs.md

@@ -0,0 +1,9 @@
+### React Advanced Workshop
+
+Kiran Abburi
+[@kiran_abburi](https://twitter.com/kiran_abburi)
+
+---
+
+### Refs
+* To imperatively modify a child outside of the typical dataflow