Awesome

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 config

Usage

# 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 build

FAQ

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

static-webpack-boilerplate

License

MIT