All Projects → esausilva → React Starter Boilerplate Hmr

esausilva / React Starter Boilerplate Hmr

Licence: mit
React starter boilerplate with React Fast Refresh, React 17 and Webpack 5

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Starter Boilerplate Hmr

React Boilerplate
Production-ready boilerplate for building universal web apps with React and Redux
Stars: ✭ 53 (-61.31%)
Mutual labels:  boilerplate, code-splitting, css-modules, react-boilerplate
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (+20.44%)
Mutual labels:  boilerplate, code-splitting, css-modules
Redux Webpack Es6 Boilerplate
A starter project for modern React apps with Redux
Stars: ✭ 566 (+313.14%)
Mutual labels:  boilerplate, css-modules, react-boilerplate
React Boilerplate
React Boilerplate
Stars: ✭ 128 (-6.57%)
Mutual labels:  boilerplate, css-modules, react-boilerplate
Reactprimer
React component prototyping tool that generates fully connected class component code.
Stars: ✭ 743 (+442.34%)
Mutual labels:  boilerplate, react-boilerplate
Webpack React Boilerplate
Minimal React 16 and Webpack 4 boilerplate with babel 7, using the new webpack-dev-server, react-hot-loader, CSS-Modules
Stars: ✭ 358 (+161.31%)
Mutual labels:  css-modules, react-boilerplate
Suicrux
🚀 Ultimate universal starter with lazy-loading, SSR and i18n. [not maintained]
Stars: ✭ 958 (+599.27%)
Mutual labels:  boilerplate, semantic-ui
React Atomic Design
🔬 Boilerplate with the methodology Atomic Design using a few cool things.
Stars: ✭ 972 (+609.49%)
Mutual labels:  boilerplate, css-modules
edgestack
[UNMAINTAINED] A Universal React Stack with deeply integrated localization Support, semi-automatic route-based code splitting, Hot Module Reloading (HMR), Redux, Apollo GraphQL and more...
Stars: ✭ 77 (-43.8%)
Mutual labels:  react-boilerplate, css-modules
Preact Boilerplate
🎸 Ready-to-rock Preact starter project, powered by Webpack.
Stars: ✭ 959 (+600%)
Mutual labels:  boilerplate, css-modules
React Pages Boilerplate
Deliver react + react-router application to gh-pages
Stars: ✭ 134 (-2.19%)
Mutual labels:  boilerplate, css-modules
Kratos Boilerplate
🔥 A simple boilerplate for creating statics PWA using Webpack, Pug, PostCSS and CSS Modules
Stars: ✭ 308 (+124.82%)
Mutual labels:  boilerplate, css-modules
React Cool Starter
😎 🐣 A starter boilerplate for a universal web app with the best development experience and a focus on performance and best practices.
Stars: ✭ 1,083 (+690.51%)
Mutual labels:  boilerplate, css-modules
Nextjs Ts
Opinionated Next JS project boilerplate with TypeScript and Redux
Stars: ✭ 134 (-2.19%)
Mutual labels:  boilerplate, css-modules
Minimal React Webpack Babel Setup
The minimal React, Webpack, Babel Setup. You want to get beyond create-react-app?
Stars: ✭ 777 (+467.15%)
Mutual labels:  boilerplate, react-boilerplate
React Redux Boilerplate
Awesome React Redux Workflow Boilerplate with Webpack 4
Stars: ✭ 307 (+124.09%)
Mutual labels:  boilerplate, css-modules
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-76.64%)
Mutual labels:  boilerplate, code-splitting
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (+67.15%)
Mutual labels:  boilerplate, code-splitting
React
Extremely simple boilerplate, easiest you can find, for React application including all the necessary tools: Flow | React 16 | redux | babel 6 | webpack 3 | css-modules | jest | enzyme | express + optional: sass/scss
Stars: ✭ 244 (+78.1%)
Mutual labels:  boilerplate, css-modules
React Redux Registration Login Example
React + Redux - User Registration and Login Tutorial & Example
Stars: ✭ 1,011 (+637.96%)
Mutual labels:  boilerplate, react-boilerplate

react-starter-boilerplate-hmr

React Starter Boilerplate with React Fast Refresh and Webpack 5

Tutorial

The tutorial on my blog site is the most up-to-date with this template. Visit my blog entry where I go step-by-step on how to build this boilerplate from scratch.

Features

  • React 17
  • React Fast Refresh
  • React Router 5
  • Webpack 5
  • Semantic UI as the CSS Framework
  • CSS Autoprefixer
  • CSS Modules with SourceMap
  • @babel/plugin-proposal-class-properties
  • @babel/plugin-syntax-dynamic-import
  • Code splitting by Route and Vendor
  • Webpack Bundle Analyzer
  • Take a look at package.json

Usage

Install dependencies

$ yarn

Run development server

$ yarn dev

Building

$ yarn build

Will create a dist directory containing your compiled code.

Depending on your needs, you might want to do more optimization to the production build.

Webpack Bundle Analyzer

Run in development

$ yarn dev:bundleanalyzer

Run on the production oprimized build

$ yarn build:bundleanalyzer

Giving Back

If you would like to support my work and the time I put in making tutorials, you can click the image below to get me a coffee. I would really appreciate it (but is not required).

Buy Me A Coffee

-Esau Silva

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].