Skip to content
Minimal & Modern boilerplate for building apps with React & styled-components
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
.nowignore
.npmrc
.stylelintrc
.travis.yml
LICENSE
babel.config.js
netlify.toml
now.json
package.json
readme.md
webpack.config.js

readme.md

Styled React Boilerplate ⚛️ 💅

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

Build Status XO code style style: styled-components

Demo Site


Highlights

  • Easier and 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 hot reloading using react-hot-loader

File Tree

├── public                # Folder with HTML template & favicon
│   ├── favicon.png       # Example favicon
│   └── index.html        # HTML template
├── src                   # Main folder with index.js & components
│   ├── components        # Subfolder with components
│   │   ├── button.js     # Example component 1
│   │   └── container.js  # Example component 2
│   │   └── counter.js    # Example component 3
│   │   └── header.js     # Example component 4
│   └── app.js            # Main page file
│   └── index.js          # React DOM rendering options
├── .npmrc                # npm config
├── .stylelintrc          # stylelint config
├── .travis.yml           # Travis CI config
├── package.json          # Package config with scripts, list of dependencies etc.
├── webpack.config.js     # Webpack config
├── babel.config.js       # Babel config

Usage

# Install dependencies

 $ npm install
 
# Start webpack-dev-server at port 8000

 $ npm start
 
# Run linters

 $ npm test
 
# Build app for production (gets output in the 'dist' directory)

 $ npm run build

Deploying

I recommend to use either Zeit Now or Netlify for hosting your site.

Deploy to now

Deploy to Netlify

TODO

  • Testing
  • PWA

Related

License

MIT

You can’t perform that action at this time.