JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.8/pixi.min.js"></script>
<canvas class="js-canvas" width="640" height="480"></canvas>

JavaScript

// Code goes here

var renderer = new PIXI.autoDetectRenderer( 640, 480, {
  resolution: 1,
  view: document.querySelector( '.js-canvas' )
})
renderer.backgroundColor = 0xf1f1f1

var stage = new PIXI.Container()

var sprite1 = new PIXI.Sprite.fromImage( 'http://i.imgur.com/k7eoBmd.jpg' )
sprite1.interactive = true
sprite1.position.set( 20, 20 )
sprite1.scale.set( .25, .25 )

sprite1.on( 'mousedown', function() {
  alert( 'one' )
})

var sprite2 = new PIXI.Sprite.fromImage( 'http://i.imgur.com/k7eoBmd.jpg' )
sprite2.interactive = true
sprite2.position.set( 120, 120 )
sprite2.scale.set( .25, .25 )

sprite2.on( 'mousedown', function() {
  alert( 'two' )
})

function createSprite(i, scale, scale) {
  var sprite = new PIXI.Sprite.fromImage('http://i.imgur.com/k7eoBmd.jpg')
sprite.interactive = true
sprite.position.set(120 + i*100, 120 + i*100)
sprite.scale.set(scale, scale)
sprite.on('mousedown', function () {
  console.log(i, this);  
})

var name = i==0?"Parent":"Child"+i;
var text = new PIXI.Text(name);  
  text.scale.set(2,2);
sprite.addChild(text);
return sprite;
}
var sprite2 = createSprite(0, 0.25, 0.25);
for(var i = 1; i < 20; ++i) {  
  var sprite = createSprite(i, 1, 1);  
  sprite2.addChild(sprite);
}


stage.addChild( sprite1 )
stage.addChild( sprite2 )

function render() {
  renderer.render( stage )
}


setInterval( render, 1000 / 60 )