pro-javascript-bootcamp

Pro JavaScript Bootcamp

Pro JavaScript Bootcamp

Slides

To follow along, do this before the conference:

  1. Install Node 6 if on Mac or Linux. Install Node 5.11.1 if on Windows.
  2. Clone this repository. - git clone https://github.com/coryhouse/pro-javascript-bootcamp.git or download the zip
  3. Make sure you’re in the directory you just created. - cd pro-javascript-bootcamp
  4. Install Node Packages. - npm install
  5. Run the app. - npm start -s If the app opens in your default browser, you’re all set. This is an example of the full development environment we’ll build. You can use this as a reference throughout the day.

##What tools are we using? The dependencies we’re using are below. Note that React is listed, but the principles and tools we’ll focus on aren’t specific to React.

###Production Dependencies | Dependency | Use | |———-|——-| |babel-polyfill | Polyfill for Babel features that cannot be transpiled | |bootstrap|CSS Framework| |jquery|Only used to support toastr| |react|React library | |react-dom|React library for DOM rendering | |react-redux|Redux library for connecting React components to Redux | |react-router|React library for routing | |react-router-redux|Keep React Router in sync with Redux application state| |redux|Library for unidirectional data flows | |redux-thunk|Async redux library| |toastr|Display messages to the user|

###Development Dependencies | Dependency | Use | |———-|——-| |babel-cli|Babel Command line interface | |babel-core|Babel Core for transpiling the new JavaScript to old | |babel-loader|Adds Babel support to Webpack | |babel-plugin-react-display-name| Add displayName to React.createClass calls | |babel-preset-es2015|Babel preset for ES2015| |babel-preset-react| Add JSX support to Babel | |babel-preset-react-hmre|Hot reloading preset for Babel| |babel-register|Register Babel to transpile our Mocha tests| |cheerio|Supports querying DOM with jQuery like syntax - Useful in testing and build process for HTML manipulation| |colors|Adds color support to terminal | |compression|Add gzip support to Express| |cross-env|Cross-environment friendly way to handle environment variables| |css-loader|Add CSS support to Webpack| |enzyme|Simplified JavaScript Testing utilities for React| |eslint|Lints JavaScript | |eslint-plugin-import|Advanced linting of ES6 imports| |eslint-plugin-react|Adds additional React-related rules to ESLint| |eslint-watch|Add watch functionality to ESLint | |eventsource-polyfill|Polyfill to support hot reloading in IE| |expect|Assertion library for use with Mocha| |express|Serves development and production builds| |extract-text-webpack-plugin| Extracts CSS into separate file for production build | |file-loader| Adds file loading support to Webpack | |jsdom|In-memory DOM for testing| |mocha| JavaScript testing library | |nock| Mock HTTP requests for testing | |npm-run-all| Display results of multiple commands on single command line | |open|Open app in default browser| |react-addons-test-utils| Adds React TestUtils | |redux-immutable-state-invariant|Warn when Redux state is mutated| |redux-mock-store|Mock Redux store for testing| |rimraf|Delete files | |style-loader| Add Style support to Webpack | |url-loader| Add url loading support to Webpack | |webpack| Bundler with plugin system and integrated development server | |webpack-dev-middleware| Adds middleware support to webpack | |webpack-hot-middleware| Adds hot reloading to webpack |

Related Repositories

pro-javascript-bootcamp

pro-javascript-bootcamp

Pro JavaScript Bootcamp ...