Awesome
React PIXI Boilerplate
This is just react-transform-boilerplate with react-pixi and pixi.js, plus the required webpack config to get assets working and pixi.js loading.
For an example side scrolling game built on this boilerplate and reflux see react-pixi-play.
A new Webpack boilerplate with:
- hot reloading React components;
- error handling inside component
render()
function; - error handling for syntax errors (thanks, @glenjamin!)
- react-pixi integration
Built with babel-plugin-react-transform and a few custom transforms.
Does not use React Hot Loader.
Demo
git clone https://github.com/brigand/react-pixi-boilerplate.git
cd react-transform-boilerplate
npm install
npm start
open http://localhost:3000
Then go ahead and edit files inside src
(any file except index.js
).
What’s Inside
The component instrumentation is implemented on top of babel-plugin-react-transform:
- react-transform-hmr handles hot reloading
- react-transform-catch-errors catches component errors
The syntax errors are displayed in an overlay by @glenjamin’s webpack-hot-middleware which replaces Webpack Dev Server.
Troubleshooting
I can’t serve images / use different HTML file / etc
This boilerplate is just a Webpack bundle served by an Express server. It’s not meant to demonstrate every feature of either project. Please consult Webpack and Express docs to learn how to serve images, or bundle them into your JavaScript application.
I don’t see the syntax error overlay!
Make sure your react-app is not attached to document.body
as the client overlay provided by webpack-hot-middleware will render into document.body
.
Attaching the React root node to document.body
requires extra caution, as many third-party packages will append their markup to the body as well. React will replace the entire contents in the body on every re-render. Thus you will not see the additional markup.
It’s always better to render your React app in a #root
DOM element.
import React from 'react'
import { App } from 'app'
React.render(<App />, document.getElementById('root'))
Discussion
You can discuss React Transform and related projects in #react-transform channel on Reactiflux Slack.
License
CC0 (public domain)