ddewaele · February 6, 2018 19:15 · Feb 6, 2018 · Feb 6, 2018 · Nov 7, 2017 · Nov 7, 2017
diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -249,3 +249,48 @@ newState = {...state,age:40}
 ```
 
 
+# Decorators 
+
+## Without a decorator
+```
+import React from 'react';
+import * as actionCreators from './actionCreators';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+function mapStateToProps(state) {
+  return { todos: state.todos };
+}
+
+function mapDispatchToProps(dispatch) {
+  return { actions: bindActionCreators(actionCreators, dispatch) };
+}
+
+class MyApp extends React.Component {
+  // ...define your main app here
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MyApp);
+```
+
+## Using a decorator
+
+```
+import React from 'react';
+import * as actionCreators from './actionCreators';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+function mapStateToProps(state) {
+  return { todos: state.todos };
+}
+
+function mapDispatchToProps(dispatch) {
+  return { actions: bindActionCreators(actionCreators, dispatch) };
+}
+
+@connect(mapStateToProps, mapDispatchToProps)
+export default class MyApp extends React.Component {
+  // ...define your main app here
+}
+```
diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -2,10 +2,6 @@ Use [Facebook Create App](https://github.com/facebookincubator/create-react-app)
 
 Very simple app (in CodePen : https://codepen.io/anon/pen/JOjevM)
 ```
-import React from 'react'
-
-import ReactDOM from 'react-dom';
-
 const App = () => (
 <div>
   <h1>Cool App</h1>
@@ -242,4 +238,14 @@ And there's also a named export called history
 
 ```
 export const history = createHistory()
-```
+```
+
+
+# Immutability
+
+```
+state = {name:"Davy", age:39}
+newState = {...state,age:40}
+```
+
+
diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -2,6 +2,10 @@ Use [Facebook Create App](https://github.com/facebookincubator/create-react-app)
 
 Very simple app (in CodePen : https://codepen.io/anon/pen/JOjevM)
 ```
+import React from 'react'
+
+import ReactDOM from 'react-dom';
+
 const App = () => (
 <div>
   <h1>Cool App</h1>
@@ -11,6 +15,13 @@ const App = () => (
 ReactDOM.render(<App/>,document.getElementById("app"));
 ```
 
+or
+```
+import React from 'react'
+import { render } from 'react-dom'
+
+render(<App/>,document.getElementById("app"));
+```
 
 ## Components
 

diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -200,3 +200,35 @@ const MasterDetail = () => (
 
 The MasterDetail is capable of rendering 2 components. Master or Detail, depending on the path.
 
+
+
+
+# Imports
+
+There are different ways to import files in react.
+
+https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import/36796281
+
+example
+```
+import store, { history } from './store'
+```
+Means there is a default export that we're assigning to `store`
+
+```
+//store.js
+
+....
+
+export default createStore(
+  rootReducer,
+  initialState,
+  composedEnhancers
+)
+```
+
+And there's also a named export called history
+
+```
+export const history = createHistory()
+```
diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -29,7 +29,7 @@ equals
 ```
 class Home extends React.Component {
   render () {
-    return(
+    return (
        <div>
           <h1>Home</h1>
        </div>
@@ -50,6 +50,19 @@ var Home = React.createClass({
 });
 ```
 
+### Little bit more complex
+
+```
+const Detail = props => {
+   console.log("Place to execute JS logic before rendering");
+    return (
+       <div>
+          <h1>Home</h1>
+       </div>
+    )   
+}
+```
+
 ## APIs
 
 Creating an API

diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -12,6 +12,44 @@ ReactDOM.render(<App/>,document.getElementById("app"));
 ```
 
 
+## Components
+
+### Simplest
+
+```
+const Home = () => (
+   <div>
+      <h1>Home</h1>
+   </div>
+);
+```
+
+equals
+
+```
+class Home extends React.Component {
+  render () {
+    return(
+       <div>
+          <h1>Home</h1>
+       </div>
+    )
+  }
+}
+```
+ancient : 
+```
+var Home = React.createClass({
+  render: function () {
+    return (
+       <div>
+          <h1>Home</h1>
+       </div>
+     );
+   }
+});
+```
+
 ## APIs
 
 Creating an API

diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -78,7 +78,7 @@ Using the component:
 ReactDOM.render(
    <Detail player={PlayerAPI.get(1)} />, 
    document.getElementById("app"));```
-   
+```   
 
 
 # React Router

diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -83,18 +83,69 @@ ReactDOM.render(
    
 # React Router
 
-
+You need to import some stuff :
 
 ```
 import React from 'react'
 import { render } from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
 import App from './components/App';
+```
 
+or
 
+```
+const { BrowserRouter, Switch, Route, Link } = ReactRouterDOM;
+```
+and code:
+```
 render((
   <BrowserRouter>
     <App />
   </BrowserRouter>
 ), document.getElementById('root'));
-```
+```
+
+Your main app should define the top level routes
+
+```
+const App = () => (
+   <div>
+      <Header />
+      <main>
+         <Switch>
+            <Route exact path="/" component={Home} />
+            <Route path="/master-detail" component={MasterDetail} />
+            <Route path="/about" component={About} />
+         </Switch>
+      </main>
+   </div>
+);
+```
+
+Our header section simply displays the links to the routes
+```
+const Header = () => (
+  <header>
+               <Link to="/">Home</Link>
+               <Link to="/master-detail">MasterDetail</Link>
+               <Link to="/about">About</Link>
+   </header>
+);
+```
+
+When we click a link, a certain route is activated and the assoicated component is rendered.
+
+When clicking masterdetail link, the MasterDetail component is rendered:
+
+```
+const MasterDetail = () => (
+  <Switch>
+    <Route exact path='/master-detail' component={Master}/>
+    <Route path='/master-detail/:number' component={Detail}/>
+  </Switch>
+);
+```
+
+The MasterDetail is capable of rendering 2 components. Master or Detail, depending on the path.
+
diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -77,4 +77,24 @@ Using the component:
 ```
 ReactDOM.render(
    <Detail player={PlayerAPI.get(1)} />, 
-   document.getElementById("app"));```
+   document.getElementById("app"));```
+   
+   
+   
+# React Router
+
+
+
+```
+import React from 'react'
+import { render } from 'react-dom'
+import { BrowserRouter } from 'react-router-dom'
+import App from './components/App';
+
+
+render((
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+), document.getElementById('root'));
+```
diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -54,7 +54,15 @@ const App = () => (
 ```
 
 Other component
-
+```
+const Detail = (props) => (
+   <div>
+      {props.player.name}   
+   </div>
+      
+);
+```
+or shorter:
 ```
 const Detail = ({player}) => (
    <div>

diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -67,5 +67,6 @@ const Detail = ({player}) => (
 Using the component:
 
 ```
-ReactDOM.render(<Detail player={PlayerAPI.get(1)} />, document.getElementById("app"));
-```
+ReactDOM.render(
+   <Detail player={PlayerAPI.get(1)} />, 
+   document.getElementById("app"));```
diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -9,4 +9,63 @@ const App = () => (
 )
 
 ReactDOM.render(<App/>,document.getElementById("app"));
+```
+
+
+## APIs
+
+Creating an API
+
+```
+const PlayerAPI = {
+   players: [
+      { number: 1, name: "Ben Blocker", position: "G" },
+      { number: 2, name: "Dave Defender", position: "D" },
+      { number: 3, name: "Sam Sweeper", position: "D" },
+      { number: 4, name: "Matt Midfielder", position: "M" },
+      { number: 5, name: "William Winger", position: "M" },
+      { number: 6, name: "Fillipe Forward", position: "F" }
+   ],
+   all: function() {
+      return this.players;
+   },
+   get: function(id) {
+      const isPlayer = p => p.number === id;
+      return this.players.find(isPlayer);
+   }
+};
+```
+
+Using the API
+
+```
+const App = () => (
+   <div>
+      <h1>Cool App</h1>
+      <ul>
+      {PlayerAPI.all().map(p => (
+        <li key={p.number}>
+         <div>{p.name}</div>
+        </li>
+      ))}      
+      </ul>
+   </div>
+);
+```
+
+Other component
+
+```
+const Detail = ({player}) => (
+   <div>
+      {player.name}   
+   </div>
+      
+);
+```
+
+Using the component:
+
+```
+ReactDOM.render(<Detail player={PlayerAPI.get(1)} />, document.getElementById("app"));
 ```
diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -1,2 +1,12 @@
 Use [Facebook Create App](https://github.com/facebookincubator/create-react-app)
 
+Very simple app (in CodePen : https://codepen.io/anon/pen/JOjevM)
+```
+const App = () => (
+<div>
+  <h1>Cool App</h1>
+</div>
+)
+
+ReactDOM.render(<App/>,document.getElementById("app"));
+```
diff --git a/reactjs-notes.md b/reactjs-notes.md
@@ -0,0 +1,2 @@
+Use [Facebook Create App](https://github.com/facebookincubator/create-react-app)
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Use [Facebook Create App](https://github.com/facebookincubator/create-react-app)