ReactJS Notes

reactjs-notes.md

Use Facebook Create 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"));

or

import React from 'react'
import { render } from 'react-dom'

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>
     );
   }
});

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

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 = (props) => (
   <div>
      {props.player.name}   
   </div>
      
);

or shorter:

const Detail = ({player}) => (
   <div>
      {player.name}   
   </div>
      
);

Using the component:

ReactDOM.render(
   <Detail player={PlayerAPI.get(1)} />, 
   document.getElementById("app"));```

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.

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()

Immutability

state = {name:"Davy", age:39}
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
}