fixe typos

anti-patterns/README.md

@@ -1,3 +1,3 @@
-# Anti-pattens
+# Anti-patterns
 
-Familiarizing ourselves with common anti-patterns will help us understand how React works and describe useful forms of refactoring our code.
+Familiarizing ourselves with common anti-patterns will help us understand how React works and describe useful forms of refactoring our code.

conventions/08.closures-in-render.md

@@ -4,19 +4,21 @@ Avoid passing new closures to subcomponents.
 
 Here’s why:
 - every time the parent component renders, a new function is created and passed to the input.
-- If the input were a React component, this would automatically trigger it to re-render, regardless of whether its other props have actually changed.
+- If the input was a React component, this would automatically trigger it to re-render, regardless of whether its other props have actually changed.
 - Reconciliation is the most expensive part of React. Don’t make it harder than it needs to be! Plus, passing a class method is easier to read, debug, and change.
 
 ```javascript
 class Example extends Component {
   render() {
-    <input
-      type="text"
-      value={model.name}
-      // onChange={(e) => { model.name = e.target.value }}
-      // ^ Not this. Use the below:
-      onChange={this.handleChange}
-      placeholder="Your Name"/>
+    return (
+      <input
+        type="text"
+        value={model.name}
+        // onChange={(e) => { model.name = e.target.value }}
+        // ^ Not this. Use the below:
+        onChange={this.handleChange}
+        placeholder="Your Name"/>
+    )
   }
 }
 ```

patterns/05.children-types.md

@@ -23,7 +23,7 @@ function render() {
 function render() {
   <div>
     {
-      () => { return "hello world!" }()
+      (() => { return "hello world!" })()
     }
   </div>
 }

patterns/08.render-callback.md

@@ -46,10 +46,12 @@ class WindowWidth extends React.Component {
   componentDidMount() {
     this.setState(
       {width: window.innerWidth},
-      window.addEventListener(
-        "resize",
-        ({target}) => this.setState({width: target.innerWidth})
-      )
+      () => {
+        window.addEventListener(
+          "resize",
+          ({target}) => this.setState({width: target.innerWidth})
+        )
+      }
     )
   }
 

styling/07.typography-component.md

@@ -1,6 +1,6 @@
 # Typography Component
 We can extend the idea of Base components to create Typography components
-this pattenr helps ensure consistency and keep your styling DRY.
+this pattern helps ensure consistency and keep your styling DRY.
 
 ### Reference:
 - http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/