xxczaki / Styled React Boilerplate
Licence: mit
Minimal & Modern boilerplate for building apps with React & styled-components
Stars: ✭ 198
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Styled React Boilerplate
Webpack Boilerplate
A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board
Stars: ✭ 404 (+104.04%)
Mutual labels: webpack, webpack4, babel, boilerplate, minimal
Frontend Boilerplate
An ES20XX starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.
Stars: ✭ 224 (+13.13%)
Mutual labels: webpack, webpack4, babel, boilerplate
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (+15.66%)
Mutual labels: webpack, webpack4, babel, boilerplate
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: ✭ 115 (-41.92%)
Mutual labels: webpack, babel, boilerplate, minimal
Js Library Boilerplate
Javascript Starter Boilerplate - Webpack 4, Babel 7, UMD, Hot Reloading, and more
Stars: ✭ 202 (+2.02%)
Mutual labels: webpack, webpack4, babel, boilerplate
Static Site Boilerplate
A better workflow for building modern static websites.
Stars: ✭ 1,633 (+724.75%)
Mutual labels: webpack, stylelint, babel, boilerplate
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-28.79%)
Mutual labels: webpack, babel, boilerplate, styled-components
React Bolt
⚡ The most simple & robust boilerplate for your React projects.
Stars: ✭ 298 (+50.51%)
Mutual labels: webpack, babel, boilerplate, styled-components
Minimal React Webpack Babel Setup
The minimal React, Webpack, Babel Setup. You want to get beyond create-react-app?
Stars: ✭ 777 (+292.42%)
Mutual labels: webpack, webpack4, babel, boilerplate
Js Library Boilerplate Basic
Javascript Minimal Starter Boilerplate - Webpack 5 🚀, Babel 7, UMD, Unit Testing
Stars: ✭ 354 (+78.79%)
Mutual labels: webpack, webpack4, babel, boilerplate
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (-48.48%)
Mutual labels: webpack, webpack4, babel, boilerplate
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+413.13%)
Mutual labels: webpack, webpack4, babel, boilerplate
React Bootstrap Webpack Starter
ReactJS 16.4 + new React Context API +react Router 4 + webpack 4 + babel 7+ hot Reload + Bootstrap 4 + styled-components
Stars: ✭ 103 (-47.98%)
Mutual labels: webpack, webpack4, babel, styled-components
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-40.91%)
Mutual labels: webpack, boilerplate, styled-components
Essential React
A minimal skeleton for building testable React apps using Babel
Stars: ✭ 2,035 (+927.78%)
Mutual labels: webpack, babel, boilerplate
Webpack Starter
✨ A lightweight foundation for your next webpack based frontend project.
Stars: ✭ 1,745 (+781.31%)
Mutual labels: webpack, babel, boilerplate
Simple Boilerplate
A simple webpack boilerplate for your comfortable work with HTML, JS and CSS.
Stars: ✭ 116 (-41.41%)
Mutual labels: webpack, babel, boilerplate
Serverless Prisma
AWS Serverless Prisma Boilerplate
Stars: ✭ 126 (-36.36%)
Mutual labels: webpack, babel, boilerplate
React Pages Boilerplate
Deliver react + react-router application to gh-pages
Stars: ✭ 134 (-32.32%)
Mutual labels: webpack, babel, boilerplate
Typescript Webpack React Redux Boilerplate
React and Redux with TypeScript
Stars: ✭ 182 (-8.08%)
Mutual labels: webpack, babel, boilerplate
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
- [x] PWA
- [x] Testing
- [ ] module & nomodule support
Related
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].