GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ahfarmer → Minimal React Starter

ahfarmer / Minimal React Starter

As minimal a react starter as you can get... while also using ES6/Babel and Webpack.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactwebpackbabelminimalhmr

Projects that are alternatives of or similar to Minimal React Starter

React Webpack Typescript Starter
Minimal starter with hot module replacement (HMR) for rapid development.
Stars: ✭ 632 (+156.91%)
Mutual labels:  webpack, hmr, babel
Webpack Boilerplate
A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board
Stars: ✭ 404 (+64.23%)
Mutual labels:  webpack, babel, minimal
Styled React Boilerplate
Minimal & Modern boilerplate for building apps with React & styled-components
Stars: ✭ 198 (-19.51%)
Mutual labels:  webpack, babel, minimal
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (-6.91%)
Mutual labels:  webpack, hmr, babel
Webpack Core Usage
webpack2完整系列课程，欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (-61.79%)
Mutual labels:  webpack, hmr, babel
React Ssr Setup
React Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties
Stars: ✭ 678 (+175.61%)
Mutual labels:  webpack, hmr, babel
Electron React Boilerplate
A Foundation for Scalable Cross-Platform Apps
Stars: ✭ 18,727 (+7512.6%)
Mutual labels:  webpack, hmr, babel
Cookiecutter Webpack
Boilerplate for webpack 2, babel, react + redux + hmr, and karma. Can be inserted into existing django projects.
Stars: ✭ 87 (-64.63%)
Mutual labels:  webpack, hmr, babel
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: ✭ 115 (-53.25%)
Mutual labels:  webpack, babel, minimal
Preact Minimal
🚀 Minimal preact structure
Stars: ✭ 136 (-44.72%)
Mutual labels:  webpack, babel, minimal
Koa Web Kit
🚀A Modern, Production-Ready, and Full-Stack Node Web Framework with React
Stars: ✭ 199 (-19.11%)
Mutual labels:  webpack, babel
Webpack Nano
A teensy, squeaky 🐤 clean Webpack CLI
Stars: ✭ 199 (-19.11%)
Mutual labels:  webpack, minimal
Js Library Boilerplate
Javascript Starter Boilerplate - Webpack 4, Babel 7, UMD, Hot Reloading, and more
Stars: ✭ 202 (-17.89%)
Mutual labels:  webpack, babel
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 (-0.81%)
Mutual labels:  webpack, babel
Front End Guide
📚 Study guide and introduction to the modern front end stack.
Stars: ✭ 14,073 (+5620.73%)
Mutual labels:  webpack, babel
Are You Es5
A package to help you find out which of your node_modules aren't ES5 so you can add them to your Webpack/Rollup/Parcel transpilation steps.
Stars: ✭ 197 (-19.92%)
Mutual labels:  webpack, babel
React Isomorphic Starterkit
Create an isomorphic React app in less than 5 minutes
Stars: ✭ 2,326 (+845.53%)
Mutual labels:  webpack, babel
React Expressjs
Simple and compact boilerplate for ReactJS project with expressJS
Stars: ✭ 208 (-15.45%)
Mutual labels:  webpack, babel
Mullet
Mullet Stack: Facebook in the front. Walmart in the back. (React, Hapijs, Node)
Stars: ✭ 194 (-21.14%)
Mutual labels:  webpack, babel
Electron Vue
An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
Stars: ✭ 14,610 (+5839.02%)
Mutual labels:  webpack, babel
View All Similar Projects ➔

Minimal React Starter

A starter project with React, Babel, and Webpack.

This starter is as minimal as possible while still including Babel and Webpack.

Create Project

git clone [email protected]:ahfarmer/minimal-react-starter.git

Setup

npm install

Usage

  1. node server.js

  2. Open http://localhost:3000/.

Build it from Scratch

Starter projects can be difficult for beginners to use because of all the moving pieces. To help you understand this starter project, there is a 7-step walkthrough showing how to create it from scratch.

Why Minimal?

The primary purpose of this project is learning.

For learning, a minimal starter project is best. Too many dependencies can cause confusion for a beginner. The process of selecting and adding what you need to a minimal project can be a good way to learn.

Why not more Minimal?

Babel and Webpack are the two tools that I view as completely essential in a React project.

There are no other tools that I have used consistently in every single React project that I have built, no matter how large or how small.

Babel: Even if you are just writing a quick test, you will likely want to use JSX in your components rather than writing out React.createElement over and over.

Webpack: Webpack serves as both the web server and the JavaScript bundler. The only alternative to using a bundler would be to include a <script> tag for each of your .js files, and that gets messy very quickly, even in a simple project.

More Details

  • No CSS. For experiments or tests, put your styles in index.html in a <style> tag. For real projects, pick from these style tools.
  • No Flux. If you need it - try Redux or MobX!
  • Webpack is run with the express and webpack-dev-middleware.
  • The 'content base' is set to www. Any files in that directory will be served by express.

HMR

HMR is not supported in the master branch for simplicity. If you would like HMR support, you can see the changes that add HMR support or you can directly clone the HMR branch:

git clone -b hmr [email protected]:ahfarmer/minimal-react-starter.git
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].