React Alt Boilerplate

A React + Webpack stack to kick start front-end developments, using an alternate file structure to React standards which abstracts Sass styles from the components in favor of a more common cascading approach.

Pre-requisites

Node.js: Node >= 6 and npm >= 5.2 on your machine
(Optional) Yarn: for an optimised npm package management

Features

React Rooter integration
Webpack 4 + Babel 7 toolchain
Atomic Design based architecture, separating Sass and JS components for portability towards external technology-agnostic pattern-library
Post CSS processing including autoprefixing with PostCSS Preset Env to convert modern CSS into something most browsers can understand (list of said browsers configurable via Browserslist), determining the polyfills you need based on your targeted browsers or runtime environments.
CSS minification in production mode using cssnano
Source Maps and Hot Reload when running in development mode (using webpack-dev-server)
Webfonts assets toolchain ready for integrating fonts in project

Important Notice

This is not the recommended file structure approach for single app projects.

This application structure breaks from recommended React practices and is the result of personal and maybe opinionated choices and practices in terms of systems architecture. As such, please don't consider it so much as a point of reference but merely as a starter kit yet to be adapted to your workflow and projects.

Coming from a Gulp workflow, I've always used an external Sass structure for the styling of my projects, mostly relying on the 7-1 Pattern and Jonathan Snook's SMACSS approach for engineering a versatile yet optimized pattern-library for complex applications. With the growing trends of system architectures being based on micro-services, pattern-libraries have taken some serious new turns since SMACSS, but even though most of us have nowadays adopted Brad Frost's Atomic Design methodoly, its actual implementation across multiple applications and a varied range of technologies often still rely on such independent stylesheets libraries.

Webpack has some very interesting tools and features to facilitate the transition towards fully independent components in frameworks like Vue or React (Styled Components, Scoped CSS modules). This project is not an attempt at exploring them, but the voluntary intention to develop a React boilerplate compatible with an external and technology-agnostic pattern-library approach. Check my recommended readings in the About page of this app should you aim for a more efficient single app approach.

Getting Started

Run yarn install or npm install to install project dependencies.
Run npm start to run the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Available Scripts

In the project directory, you can also run:

Productions build

npm run build

It correctly bundles React in production mode, optimizing the build for best performance and copy required public assets to the dist folder.