React Templates & Themes Logo React Templates & Themes
React Stylus Webpack Boilerplate screenshot

React Stylus Webpack Boilerplate

Author Avatar Theme by Alejofernandez
Updated: 21 Aug 2016
53 Stars

A starter kit for creating applications using react and stylus, client side rendering, development and production configurations and hot reloading

Github Live Preview

Overview

The React-Stylus-Webpack boilerplate is an opinionated starter kit for creating applications using React and Stylus. It includes client-side rendering, development and production configurations, and hot reloading. The technology stack includes React, React Router, ES6 with Babel, Stylus preprocessor, Jade templates, CSS Modules, Gulp for build automation, ESLint for coding style enforcement, and Webpack for bundling.

Features

  • Plain React implementation with the option to add Flux implementation later.
  • Integration with React Router for handling routes.
  • Client-side rendering for improved performance.
  • Uses ES6 with Babel for writing modern JavaScript.
  • Stylus preprocessor for writing CSS with a simplified syntax.
  • Ability to use Jade templates instead of JSX for component rendering.
  • Scoped styles using CSS Modules for preventing style conflicts.
  • Build automation using Gulp for simplifying development tasks.
  • Coding style enforcement using ESLint for maintaining code quality.
  • Development and production bundling using Webpack.
  • Development server with hot reloading for seamless development experience.

Installation

To use this starter kit, follow these steps:

  1. Install local modules by running npm install in your project directory.
  2. To run locally, use the command npm run serve and open http://localhost:3000 in your browser.
  3. To build distributable files, use the command npm run build.
  4. To deploy to GitHub pages, use the command npm run deploy and open http://<your-github-account>.github.io/<your-repo-name> in your browser.

Summary

The React-Stylus-Webpack boilerplate provides a comprehensive starting point for creating React applications with Stylus styling. It includes various features like client-side rendering, routing, ES6 support, hot reloading, and more. With its opinionated setup and easy installation process, developers can quickly kickstart their projects and focus on building their application logic without worrying about the underlying configuration.