Skip to content

Instantly share code, notes, and snippets.

@w3core
Last active October 3, 2018 06:56
Show Gist options
  • Save w3core/f9d2b64295f1ab52ed2deb7b6d6e839d to your computer and use it in GitHub Desktop.
Save w3core/f9d2b64295f1ab52ed2deb7b6d6e839d to your computer and use it in GitHub Desktop.
Steps to setup ES6 app
Video instruction [here](https://www.youtube.com/watch?v=4k3q8y-Khw4)
https://nodejs.org/en/
https://code.visualstudio.com/
# Plugins
https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
# .editorconfig
# https://editorconfig.org/
https://github.com/onseopublic/react-meet-up/blob/Chapter-1/.editorconfig
# package.json
npm init -y
# https://eslint.org/
npm i --save-dev eslint
# https://www.npmjs.com/package/eslint-config-airbnb
npx install-peerdeps --dev eslint-config-airbnb
# https://webpack.js.org/concepts/
npm i --save-dev webpack webpack-cli webpack-dev-server eslint-import-resolver-webpack
# http://babeljs.io/docs/en
# https://github.com/airbnb/babel-preset-airbnb
# https://github.com/babel/babel-loader/tree/v7.1.5
npm i --save-dev babel-core babel-eslint babel-loader@7.1.5 babel-preset-airbnb
npm i --save-dev babel-plugin-transform-class-properties babel-plugin-transform-export-extensions babel-plugin-transform-object-assign babel-plugin-transform-object-rest-spread
# additional webpack plugins
npm i --save-dev html-webpack-plugin clean-webpack-plugin directory-named-webpack-plugin
# sass support for webpack https://github.com/webpack-contrib/sass-loader
npm i --save-dev node-sass style-loader css-loader sass-loader
# react
npm i --save react react-dom
# .eslintrc
https://github.com/onseopublic/react-meet-up/blob/Chapter-1/.eslintrc
# .babelrc
https://github.com/onseopublic/react-meet-up/blob/Chapter-1/.babelrc
# webpack.config.js
https://github.com/onseopublic/react-meet-up/blob/Chapter-1/webpack.config.js
# config.js
https://github.com/onseopublic/react-meet-up/blob/Chapter-1/config.js
# src/index.js
https://github.com/onseopublic/react-meet-up/blob/Chapter-1/src/index.js
# src/index.ejs
https://github.com/onseopublic/react-meet-up/blob/Chapter-1/src/index.ejs
# commands
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
# http://app.prod/
---------------------------
# ES6 basics
1. Constants
2. Arrow functions
3. Function default parameter values and ...rest parameters
4. Spread operator
5. Template Literals
6. Enhanced Object Properties
7. Destructuring Assignment
8. Array and Object iterators
9. Promise
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment