Styled React Boilerplate ⚛️ 💅
Minimal & Modern Boilerplate for building apps with React & styled-components
Highlights
- 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
File Tree
├── 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 configUsage
# 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 buildFAQ
How to deploy my app?
I recommend to use either Vercel or Netlify for hosting your site.
How to add & use static assets (ex. images)?
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.
TODO
- PWA
- Testing
- module & nomodule support
Related
License
MIT