Minimal & Modern Boilerplate for building apps with React & styled-components
- Less complex than create-react-app
- Features styled-components
- Uses React Hooks
- Includes optimized Webpack & Babel configuration
- Perfect Lighthouse score
- Non-blocking CSS & fonts loading
- Friendly errors & warnings
- Ensures clean code with xo & stylelint
- Normalizes default browser style with modern-normalize
- HTML template with social media meta tags
- Targets the latest browsers
- Works offline
- Preconfigured React Refresh using react-refresh-webpack-plugin
├── public # Folder for static assets
│ ├── favicon.png # Favicon
│ └── index.html # HTML template
├── src # Main folder
│ ├── components # Subfolder with components
│ │ ├── button.js
│ │ └── container.js
│ │ └── counter.js
│ │ └── header.js
│ │ └── image.js
│ └── app.js # Main page file
│ └── index.js # React DOM, service worker config
├── webpack.config.js # Webpack config
├── babel.config.js # Babel config# Install dependencies
$ npm install
# Start webpack-dev-server at port 8080
$ npm start
# Run linters
$ npm test
# Build app for production (gets output in the 'dist' directory)
$ npm run buildI recommend to use either Vercel or Netlify for hosting your site.
Place them in the public directory in the root of the project. You can then use them like in the example below:
// Import files from the `public` directory
import imgSrc from '../../public/favicon.png';
// Then you can reference it like so:
const Image = () => (
<img src={imgSrc} alt="⚡"/>
);Check out the Image component for a live example.
- PWA
- Testing
- module & nomodule support
MIT