very small single-page app boilerplate - only 15kb gzipped
live example - https://pre-bp.github.io/
What's Included "the good stuff"
## a react app without react
React is great, but it's bigger than it needs to be to start a project.
pre-bp is a boilerplate app based on preact,
"a fast 3kB alternative to React with the same ES6 API." It includes a router and redux, and is ready to use with redux-devtools-extension.
git clone <THIS REPOSITORY>
(rm -rf .git && git init) # begin a new commit history for your project
yarn init # rename the node module for your project
yarn install # Install dependencies
yarn start # start the development server
After the node modules are installed, run the development server.
Open your browser to http://localhost:8080 to view the app. Open the console to see logging. The page will refreh automatically if you update any code in the
/src folder thanks to the
--inline option of webpack-dev-server.
See information about the components in your browsers inspector with react-devtools.
Available for Chrome and Firefox.
Replay your actions in development with redux-devtools-extension.
Available for Chrome, Firefox, and Electron.
Build a release for production with
which will display the gzipped size of the build.
Analyze the size of the code and dependecies (pre-compressed) with
pre-bp makes it simple to switch to react later if you want, but if you are
just looking for compatibilty with other react packages, try using
preact-compat (see aliasing).
what's included for release
- preact - "a fast 3kB alternative to React with the same ES6 API."
- redux - a small predictable state container
- preact-redux - react-redux with react aliased to preact
- preact-router - Provides Route, Router, and Link components with much less overhead than react-router. This is important for imports without side-effects. It also listens to it's underlying history to perform routing actions, allowing for replay tools on the router.
- preact-router-redux - tools to pass navigation commands as actions. react-router-redux with wrapped history synced to the original. See https://github.com/matannoam/preact-router-redux/pull/1. It also supports
- normalize.css is in the html header for nice, modern styles.
what dev tools are included
- webpack is the new standard for bundling
react apps. UglifyJS is used by default to minify production builds.
- webpack-dev-server uses Express.js to serve the app in development.
- babel is a transpiler, which allows the code to be run in most modern browsers. The es2015 and react presets are included and used by default for production builds, and well as stage-2 for spreads and other syntax.
- webpack-bundle-size-analyzer - helps confirm the production builds are tiny.
- redux-logger - logs redux states and actions to the console. included as a dependency, but not included in packing thanks to require().
- ready to use with react-devtools - adds an inspector tab in the browser for components.
- ready to use with redux-devtools-extension - useful tools such as replaying actions.