JSConf 2015 React.js training workshop
JavaScript CSS HTML
Pull request Compare This branch is even with jeffbski:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
public
src
.babelrc
.eslintrc
.gitignore
.npmignore
LICENSE
README.md
bs-config.js
package.json

README.md

JSConf 2015 React.js Training Workshop Code

This is the starter code for the Introduction / Getting started with React.js training workshop at JSConf 2015

This boilerplate code has these features:

  • React.js JSX example which fetches from REST source and renders
  • simple build and auto rebuild (watch) using npm run scripts
  • browser-sync for auto reloading in browser on change
  • ES6/7 and JSX compiling to ES5 with babeljs
  • eslint for linting
  • browserify (w/babelify) for bundling javascript for the browser
  • watchify to automatically rebuild on changes
  • uglify for js minification
  • less CSS style compiler
  • autoprefixer for automatically adding css prefixes
  • cleancss for css minification
  • axios for promise based HTTP client

Note: Windows users - use https://github.com/jeffbski/jsconf-react-win instead

Structure:

  • package.json - dependencies and build commands
  • public/index.html - main HTML
  • public/fake-api.json - mock REST api returning json data
  • src/browser.jsx - React.js JSX code which fetches REST data and renders into the main HTML
  • src/util/polyfill.js - Import any core-js or other polyfills here
  • assets/site.less - CSS styles used by site, edit or import into
  • bs-config.js - browser-sync config, set browser to launch, middleware implementing a REST api used for the app
  • dist/ - contains compiled and minified css and js

Branches:

Change branches to iterate through implementing features for the solution.

git checkout stepX # iterate through solution

  • master / step0
    • initial starting boilerplate
    • working autobuild react.js / babel dev environment
  • step1
    • fetch /pools
    • display all questions
    • shuffle-array
    • display first shuffled poll w/choices
  • step2
    • Display poll as form
    • Post { YOUR_ID: IDX } to /polls/${id}
    • that Returns poll result, display poll result
    • Use PieChart from react-d3-components to display
  • step3
    • Use state to display first poll
    • Use state to hold shuffled polls
    • Add next survey button which shifts poll
    • setState trigger update to show new poll
  • step4 / final
    • Add admin.html
    • Add conditional logic location.pathname = '/admin.html'
    • fetch /admin/polls, display all
    • Add question form
    • post { question: 'What', choices: [ 'Foo', 'Bar'] } to /polls

Notes:

  • My default browser for browser-sync is Google Chrome, if you want to use a different browser like Google Chrome Canary or Mozilla Firefox edit bs-config.js

Installation

Requires node.js/iojs >= 0.10

npm install ## install dependent node modules

Usage

Primary use - auto build and reload browser

npm run watch # build and watch, auto recompile and load changes
# use control-c to exit the autobuild watch

Build only

npm run build # build only

Build for Production

npm run prod-build # sets NODE_ENV=production then builds

More info

License