Integrating React and Phaser 3 Tutorial

Phaser and React Logos
module.exports = {
mode: "development",
devtool: "eval-source-map",
entry: "./src/index.js",
output: {
path: path.resolve("dist"),
filename: "index_bundle.js"
module: {
rules: [
test: /\.css$/,
use: [{ loader: "style-loader" }, { loader: "css-loader" }]
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
test: /\.jsx?$/,
exclude: /node_modules/,
use: "babel-loader"
test: [/\.vert$/, /\.frag$/],
use: "raw-loader"
test: /\.(gif|png|jpe?g|svg|xml)$/i,
use: "file-loader"
plugins: [
new CleanWebpackPlugin(["dist"], {
root: path.resolve(__dirname, "../")
new webpack.DefinePlugin({
CANVAS_RENDERER: JSON.stringify(true),
WEBGL_RENDERER: JSON.stringify(true)
new HtmlWebpackPlugin({
template: "./index.html",
filename: "index.html",
inject: "body"
const presets = [
targets: {
browsers: [">0.25%", "not ie 11", "not op_mini all"]
modules: false
const plugins = [];
module.exports = { presets, plugins };
import React from "react";export default class App extends React.Component {
render() {
return (
<div style={{ textAlign: "center" }}>
<h1>Hello World</h1>
import Phaser from "phaser";
import logoImg from "./assets/logo.png";
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.jsx";
const config = {
type: Phaser.AUTO,
parent: "phaser-example",
width: 800,
height: 600,
scene: {
preload: preload,
create: create
const game = new Phaser.Game(config);function preload() {
this.load.image("logo", logoImg);
function create() {
const logo = this.add.image(400, 150, "logo");
targets: logo,
y: 450,
duration: 2000,
ease: "Power2",
yoyo: true,
loop: -1
ReactDOM.render(<App />, document.getElementById("root"));
Our Page on Localhost:8080




Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Design Patterns, A deep dive Part 1 (Creational Design Patterns)

A tale of the last 10 years in web development

How To Sort An Object By Key/Value In JavaScript

Javascript Fundamentals: A breakdown

3 Ways We Use React Custom Hooks in Our Team

Use maps from any provider using React

How to Add Emoji Picker to Text Fields Using Vue.js

Developer Viewpoint — Experiences and thoughts on JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Taylor Nodell

Taylor Nodell

Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor

More from Medium

Fabric.js in React — Draw bounding box in webcam preview using canvas events.

Set up your React app for CRUD operations using MongoDB Realm GraphQL

Understanding the Concept of Redux