perfect react stack to wrap your web app
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
app
build
config
stack
test
.babelrc
.editorconfig
.eslintrc.json
.gitignore
.prettierrc
.travis.yml
Gulpfile.babel.js
README.md
TODO.md
package.json
yarn.lock

README.md

React23

perfect react stack to wrap your web app
demo: https://stackr23.github.io/react23/

Build Status devDependencies Status Known Vulnerabilities Greenkeeper badge
Maintenance PRs Welcome Standard - JavaScript Style Guide Gitmoji

Features

🤖 Gulp v4 - task automation
       full control of script pipelines

📦 Webpack v4 - module bundler
       hot module reload, static build, code splitting

♻️ React v16.5 - view-controller library
       inclusive server side rendering

🗃 MobX v5.5 - observable store injection
       global stores based on observables

⚗️ Babel v7 - ES7 support provider
       async/await, static class properties, decorators (legacy), etc..

🚨 EsLint v5.7 - code linting tool
       beautyful and error proof code with standard-js style

TBD - Karma and Mocha
       integration and unit tests

⚡️ ExpressJS v4 - node-js server
       webpack-dev in dev, serverside rendering on prod
       TBD - /api and /test server
       TBD - prefetch component data

🚀 github pages deployment scripts
       initiate and push git worktree from /build to gh-pages

Usage

until npm release, just clone the repo

git clone https://github.com/stackr23/react23 --depth 1
cd react23
yarn install
yarn run start

Scripts

yarn run
start starts webpack devServer
build static build (TBD: productionserver)
lint runs eslint
test runs gulp 'test'-task

npm run script calls shell scripts in /stack/scripts

npm run script
gh-pages/init initiate /build as git-worktree
gh-pages/deploy deploy to gh-pages

Styling

Preprocessors

the default pre-processor is stylus
you can add custom loaders in /config/webpack/styleLoader.js

the UI is based on material-ui

styleobjects (deprecated due to SSR)

to keep styling in its space and use stylus vars globally,
we use @stackr23/styleobjects-loader to "sync" material-ui with stylus

imported files with targeted extension .csso,
will be transformed from stylus to js-objects via @stackr23/styleobjects

Themes

the custom theme is located in /app/style/muiThemes/react23Theme.js,
which uses the global stylus vars of /app/style/setup.styl (TBD: !stylus!styleobjects on SSR)

Layout

the layout is defined in /app/style/layout.styl
and is focused on global styles like #body, #wrapper and #content

Modular style

component specific styles are defined directly in their directory - fe: /app/components/Header.styl
and are loaded via @stackr23/style-loader mixed with defined pre-processors
in devevlopment, the styles are injected directly via style tags per HMR
in production, they are extracted via ExtractTextPlugin and bundled in /build/app-[hash].css
both environments use cssMqPacker and autoprefixer