webpack - react

build-webpack.groovy

import com.moowork.gradle.node.task.NodeTask
 
task webpack(type: NodeTask, dependsOn: 'npmInstall') {
  script = project.file('node_modules/.bin/webpack')
}
 
processResources.dependsOn 'webpack'
 
clean.delete << file('src/main/webapp/dist')

index.jsx

import ReactDOM from 'react-dom';
import React from 'react';
import Table from './table';
import '../css/general.css';

ReactDOM.render(
  <div>
    <Table number={1} openSeats={[1,2]}/>
    <Table number={2} openSeats={[1,2,3]}/>
    <Table number={3} openSeats={[1]}/>
    <Table number={4} openSeats={[1,2,3,4]}/>
  </div>,
  document.getElementById('content')
);

seat.jsx

import React, {Component} from 'react'

export default class Seat extends Component {

  render(){
    let {number, open} = this.props;
    return (
      <div className={open ? "seat open" : "seat reserved"}>{number}</div>
    )
  }
}

table.jsx

import React, {Component} from "react";
import Seat from "./seat.jsx";

const seatNumbers = [1, 2, 3, 4];

export default class Table extends Component {

  render() {
    let {number, openSeats} = this.props;
    return (
      <div className="table">
        <div className="table-title">Table {number}</div>
        {seatNumbers.map(seatNumber => {
          return <Seat key={seatNumber} number={seatNumber}
                       open={openSeats.indexOf(seatNumber) === -1}/>;
        })}
      </div>
    );
  }
}