Unit 6 React

Frontend Frameworks

Displaying UI (HTML) on the page
Responding to user inputs

Fetch and storing data
Routing (fetching new HTML when the url changes)
Application/ Folder structure

Each framework addresses these concerns with varying degrees. This is what opinionated vs flexible means. React handles the first 2.

How to Structure a React App

<!DOCTYPE html>
<html>
<body>
    <div class="nav-bar">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </div>

    <div class="main-content">
        <h1>This is a Title</h1>
        <p> Lorem Ipsum </p>
    </div>

    <div class="footer">
        <p> Copyright 2016 </p>
    </div>
</body>
</html>

div

div

div

ul

li

li

li

h1

body/App

How to Structure a React App

React, at the end of the day, renders HTML. Think about your app like like you would think about HTML

var App = React.createClass({
    render: function() {
        return (
            <Header />
            <MainBody />
            <Footer />
        );
    }
});

var Header = React.createClass({
    render: function() {
        return (
            <div class="nav-bar">
                <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </div>
        );
    }
});

var MainBody = React.createClass({
    render: function() {
        return (
            <div class="main-content">
                <h1>This is a Title</h1>
                <p> Lorem Ipsum </p>
            </div>
        );
    }
});

var Footer = React.createClass({
    render: function() {
        return (
            <div class="footer">
                <p> Copyright 2016 </p>
            </div>
        );
    }
});

React.createClass

Types of React Components

ES6 Component

Pure Functional Components (in ES6)

var MyComponent = React.createClass({
  getInitialState: function(){
    return {
      count: 0
      }
  },
  render: function(){
      return //html
  }
});

import React, {Component} from "react";

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state { counter: 0}
    this.myMethod = this.myMethod.bind(this);
  }
  render() {
    return //html
  }
}

const Square = (props) => {
  return (
    <div onClick={props.myMethod}>
      {props.counter}
    </div>
  );
}

Use with state

Use without state

React Tic Tac Toe

import React from 'react';
import {Component} from 'react';
import ReactDOM from 'react-dom';
import Game from './game';
import checkWinner from './win';

var App = React.createClass({
  getInitialState() {
    return {
      board: ["", "", "", "", "", "", "", "", ""],
      player1: true
    };
  },

  update: function(event) {
    var index = event.dispatchMarker.slice(-1);	
    if(this.state.player1 && this.state.board[index] === ""){
      this.state.board[index] = 'X';
      this.state.player1 = !this.state.player1
    } else if (this.state.board[index] === "_") {
      this.state.board[index] = 'O';
        this.state.player1 = !this.state.player1
    }	
    this.setState({
      board: this.state.board,
      player1: this.state.player1
    });
    checkWinner(this.state);
  },

  render: function() {
    return (
      <div className="container">
      <h1 style={styles.h1}>Tic Tac Toe</h1>
      <Game 
        board={this.state.board} 
        player1={this.state.player1}
        update={this.update}
      />
      </div>
    );
  }
});

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      board: ["", "", "", "", "", "", "", "", ""],
      player1: true
    }
    this.update = this.update.bind(this);
  }

  update(event) {
    let index = event.dispatchMarker.slice(-1);
		
    if(this.state.player1 && this.state.board[index] === ""){
      this.state.board[index] = 'X';
      this.state.player1 = !this.state.player1
    } else if (this.state.board[index] === "_") {
      this.state.board[index] = 'O';
        this.state.player1 = !this.state.player1
    }
		
    this.setState({
      board: this.state.board,
      player1: this.state.player1
    });
    checkWinner(this.state);
  }

  render() {
    return (
      <div className="container">
        <h1 style={styles.h1}>Tic Tac Toe</h1>
        <Game 
          board={this.state.board} 
          player1={this.state.player1}
          update={this.update}
        />
      </div>
    );
  }
};

ES5

ES6

React Tic Tac Toe

import React from 'react';
import Square from './square';

const Game = ({board, update}) => {
  let tiles = board.map( (item, i) => (
    <Square
      item={item}
      key={i}
      update={update}/>
  ));

  return (
    <div className="board">
        {tiles}
    </div>
  );
}

export default Game;

ES5

ES6

var React = require('react');
var Square = ('./square');

var Game = React.createClass({
  var board = this.props.board;
  render: function() {
    var tiles = board.map(function(item, i){
      return (
        <div>
          <Square 
            item={item}
            key={i}
            update={this.props.update}
          />
        </div>
      );
    })

    return (
      <div className="board">
        {tiles}
      </div>
    );
  }
})

module.exports = Game;

React Tic Tac Toe

import React from 'react';

const Square = ({item, update) => {
  return (
    <div className="tile" onClick={update}>
      {item}
    </div>
  );
}

export default Square;

ES5

ES6

var React = require('react');

var Square = React.createClass({
  var update = this.props.update;
  var item = this.props.item;

  render: function() {
    return (
      <div className="tile" onClick={update}>
        {item}
      </div>
    );
  }
});

module.exports = Square;