react-workshop-starter

Boilerplate project for React Workshop; Part of the UXDevSummit conference.

This is the starting point for the workshop. We will use this to do some hands-on app building and hopefully learn some React & Flux/Redux along the way !

Better documentation of this boilerplate to come soon...

About

This boilerplate uses Webpack to create a client-side application bundle. Webpack is configured for ES6 & JSX via Babel. It's not configured for production use but you can always add another Webpack configuration for that.

The client application code lives in the src/ directory and is compiled to public/assets/js/app.js. During development it uses an express server with webpack-dev-middleware & webpack-hot-middleware for automatic page refreshes and hot code updates.

We will only be building SPA(s) so the client application is mounted to the public/index.html file. public/ is our static file directory served by our development server.

The boilerplate comes with a HelloWorld component that is accompanied with a couple of unit tests to give our project some structure and a testing example. It uses Mocha for the test runner, Chai for the assertion library, and Airbnb's Enzyme library to make it easier to test React components.

We also have eslint configured for our code linting and Facebook's flow to enable type checking.

Also, I've included a Vagrant configuration with an accompanying provision bash script if you would like to spin up a VM for your dev environment.

Styles

The base styles in src/styles has boostrap 4 scss included. If you want to use any variables or mixins from your base styles in a component's stylesheet you must @import "~_globals.scss"; at the top. See HelloWorld/style.css

• Any styles you add to src/styles will be compiled into a single style.css file that is included index.html
• All styles will get transpiled, autoprefixed, and included in a styles.css file

Installation

git clone https://github.com/danecando/react-workshop-starter.git workshop
cd workshop
npm install

Commands

• npm start - Spins up our development server and opens up the project in a new browser tab
• npm run build - Writes our Webpack bundle to disc at public/assets/js/app.js
• npm run lint - Lints the src files with eslint
• npm run flow - Type checks our src files (if enabled and flow is installed)
• npm run test - Runs our unit tests w/ Mocha

Contributing / Support

Submit a PR / Open an issue