React Transform Boilerplate
This project is a reference implementation of babel-plugin-react-transform can be used as a boilerplate for quickly getting a new project up and running with a few useful transforms:
- react-transform-hmr - enables hot reloading react components
- react-transform-catch-errors - catches errors inside
render()
Syntax errors are displayed in an overlay using @glenjamin’s webpack-hot-middleware, which replaces Webpack Dev Server. This project does not use React Hot Loader.
Demo
Installation
git clone https://github.com/gaearon/react-transform-boilerplate.git
cd react-transform-boilerplate
npm install
npm start
open http://localhost:3000
Transforms are enabled for files inside src
(except index.js
).
Troubleshooting
I can’t serve images, use different HTML, etc.
This project is a reference implementation of babel-plugin-react-transform—it 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.
npm run build
My server is throwing a 404 after Again, this boilerplate is not intended to be production ready. The 404 is because index.html
is hard coded with the webpack bundle path in /static/
(used by development server). You must manually update the script tag in index.html
with the correct bundle path of /dist/bundle.js
in order to use compiled source.
I don’t see the syntax error overlay
Make sure your react-app is not attached to document.body
. 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 { render } from 'react-dom'
import { App } from 'app'
render(<App />, document.getElementById('root'))
Discussion
You can discuss React Transform and related projects in #react-transform channel on Reactiflux Discord.
License
CC0 (public domain)