Minimal & Modern boilerplate for building apps with React & styled-components
Minimal & Modern Boilerplate for building apps with React & styled-components
├── 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
# 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
I recommend to use either Vercel or Netlify for hosting your site.
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.
MIT