paulweezydesign/styled-react-boilplate

Styled React Boilerplate ⚛️ 💅

Minimal & Modern Boilerplate for building apps with React & 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.

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

• static-webpack-boilerplate

License

MIT