Styled React Boilerplate ⚛️ 💅

September 4, 2020 · View on GitHub

Minimal & Modern Boilerplate for building apps with React & styled-components

Build Status XO code style style: styled-components

Demo Site • FAQ

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.

Deploy with Vercel Deploy to Netlify

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

License

MIT