From 936c9c653acfda21d4c17e7975c2c1ed286b774f Mon Sep 17 00:00:00 2001 From: Jamesbillard12 Date: Mon, 21 Aug 2017 13:01:23 -0700 Subject: [PATCH 1/5] initial commit added basic structure --- .babelrc | 0 .eslintignore | 5 ++ .eslintrc | 21 +++++++ .gitignore | 136 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 37 ++++++++++++ src/main.js | 0 src/style/main.scss | 0 webpack.config.js | 0 8 files changed, 199 insertions(+) create mode 100644 .babelrc create mode 100644 .eslintignore create mode 100644 .eslintrc create mode 100644 .gitignore create mode 100644 package.json create mode 100644 src/main.js create mode 100644 src/style/main.scss create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..e69de29 diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..05b1cf3 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,5 @@ +**/node_modules/* +**/vendor/* +**/*.min.js +**/coverage/* +**/build/* diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..8dc6807 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,21 @@ +{ + "rules": { + "no-console": "off", + "indent": [ "error", 2 ], + "quotes": [ "error", "single" ], + "semi": ["error", "always"], + "linebreak-style": [ "error", "unix" ] + }, + "env": { + "es6": true, + "node": true, + "mocha": true, + "jasmine": true + }, + "ecmaFeatures": { + "modules": true, + "experimentalObjectRestSpread": true, + "impliedStrict": true + }, + "extends": "eslint:recommended" +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..345130c --- /dev/null +++ b/.gitignore @@ -0,0 +1,136 @@ +# Created by https://www.gitignore.io/api/osx,vim,node,macos,windows + +### macOS ### +*.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + + +### OSX ### + +# Icon must end with two \r + +# Thumbnails + +# Files that might appear in the root of a volume + +# Directories potentially created on remote AFP share + +### Vim ### +# swap +[._]*.s[a-v][a-z] +[._]*.sw[a-p] +[._]s[a-v][a-z] +[._]sw[a-p] +# session +Session.vim +# temporary +.netrwhist +*~ +# auto-generated tag files +tags + +### Windows ### +# Windows thumbnail cache files +Thumbs.db +ehthumbs.db +ehthumbs_vista.db + +# Folder config file +Desktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msm +*.msp + +# Windows shortcuts +*.lnk + +# End of https://www.gitignore.io/api/osx,vim,node,macos,windows diff --git a/package.json b/package.json new file mode 100644 index 0000000..ca48718 --- /dev/null +++ b/package.json @@ -0,0 +1,37 @@ +{ + "name": "21-react-tooling", + "version": "1.0.0", + "description": "![cf](https://i.imgur.com/7v5ASc8.png) 21: React Tooling ======", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/codefellows-javascript-401d17/21-react-tooling.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/codefellows-javascript-401d17/21-react-tooling/issues" + }, + "homepage": "https://github.com/codefellows-javascript-401d17/21-react-tooling#readme", + "dependencies": { + "babel-core": "^6.26.0", + "babel-loader": "^7.1.2", + "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", + "cowsay-browser": "^1.1.8", + "css-loader": "^0.28.5", + "extract-text-webpack-plugin": "^3.0.0", + "faker": "^4.1.0", + "html-webpack-plugin": "^2.30.1", + "node-sass": "^4.5.3", + "react": "^15.6.1", + "react-dom": "^15.6.1", + "sass-loader": "^6.0.6", + "webpack": "^3.5.5", + "webpack-dev-server": "^2.7.1" + } +} diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..e69de29 diff --git a/src/style/main.scss b/src/style/main.scss new file mode 100644 index 0000000..e69de29 diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..e69de29 From b3d3838a386562c9c7362ab3b7451e023d1ea184 Mon Sep 17 00:00:00 2001 From: Jamesbillard12 Date: Mon, 21 Aug 2017 13:18:44 -0700 Subject: [PATCH 2/5] added index.html file. added red to scss. finished webpack.config.js file --- src/index.html | 10 ++++++++++ src/style/main.scss | 3 +++ webpack.config.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 44 insertions(+) create mode 100644 src/index.html diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..e126f67 --- /dev/null +++ b/src/index.html @@ -0,0 +1,10 @@ + + + + + Cowsay lorem + + +
+ + diff --git a/src/style/main.scss b/src/style/main.scss index e69de29..67ce83e 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -0,0 +1,3 @@ +body { + background: red; +} diff --git a/webpack.config.js b/webpack.config.js index e69de29..52b48ec 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -0,0 +1,31 @@ +'use strict'; + +const HtmlPlugin = require('html-webpack-plugin'); +const ExtractPlugin = require('extract-text-webpack-plugin'); + +module.exports = { + devtool: 'cheap-module-eval-source-map', + entry: `${__dirname}/src/main.js`, + output: { + path: `${__dirname}/build`, + publicPath: '/', + filename: 'bundle-[hash].js' + }, + plugins: [ + new HtmlPlugin({ template: `${__dirname}/src/index.html` }), + new ExtractPlugin('bundle-[hash].css') + ], + module:{ + rules:[ + { + test: /\.js$/, + exclude: /nodemodules/, + loader: 'babel-loader' + }, + { + test: /\.css/, + loader: ExtractPlugin.extract(['css-loader', 'sass-loader']) + } + ] + } +}; From d42fded97f279dedec6aec6c44cb39b40e8922ad Mon Sep 17 00:00:00 2001 From: Jamesbillard12 Date: Mon, 21 Aug 2017 16:19:50 -0700 Subject: [PATCH 3/5] finished assignment working on stretch --- .babelrc | 4 ++ build/bundle-9da9746408098e7f7dd6.js | 73 ++++++++++++++++++++++++++++ build/index.html | 10 ++++ package.json | 4 +- src/main.js | 50 +++++++++++++++++++ webpack.config.js | 2 +- 6 files changed, 141 insertions(+), 2 deletions(-) create mode 100644 build/bundle-9da9746408098e7f7dd6.js create mode 100644 build/index.html diff --git a/.babelrc b/.babelrc index e69de29..59e5db6 100644 --- a/.babelrc +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["es2015"], + "presets": ["react"] +} diff --git a/build/bundle-9da9746408098e7f7dd6.js b/build/bundle-9da9746408098e7f7dd6.js new file mode 100644 index 0000000..5aa5619 --- /dev/null +++ b/build/bundle-9da9746408098e7f7dd6.js @@ -0,0 +1,73 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { +/******/ configurable: false, +/******/ enumerable: true, +/******/ get: getter +/******/ }); +/******/ } +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = "/"; +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, exports) { + +eval("throw new Error(\"Module build failed: SyntaxError: Unexpected token (12:6)\\n\\n\\u001b[0m \\u001b[90m 10 | \\u001b[39m render() {\\n \\u001b[90m 11 | \\u001b[39m \\u001b[36mreturn\\u001b[39m (\\n\\u001b[31m\\u001b[1m>\\u001b[22m\\u001b[39m\\u001b[90m 12 | \\u001b[39m \\u001b[33m<\\u001b[39m\\u001b[33mheader\\u001b[39m className\\u001b[33m=\\u001b[39m\\u001b[32m'custom-header'\\u001b[39m\\u001b[33m>\\u001b[39m\\n \\u001b[90m | \\u001b[39m \\u001b[31m\\u001b[1m^\\u001b[22m\\u001b[39m\\n \\u001b[90m 13 | \\u001b[39m \\u001b[33m<\\u001b[39m\\u001b[33mh1\\u001b[39m\\u001b[33m>\\u001b[39m\\u001b[33mCounter\\u001b[39m \\u001b[33mApp\\u001b[39m\\u001b[33m<\\u001b[39m\\u001b[33m/\\u001b[39m\\u001b[33mh1\\u001b[39m\\u001b[33m>\\u001b[39m\\n \\u001b[90m 14 | \\u001b[39m \\u001b[33m<\\u001b[39m\\u001b[33m/\\u001b[39m\\u001b[33mheader\\u001b[39m\\u001b[33m>\\u001b[39m\\n \\u001b[90m 15 | \\u001b[39m )\\u001b[33m;\\u001b[39m\\u001b[0m\\n\");//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///0\n"); + +/***/ }) +/******/ ]); \ No newline at end of file diff --git a/build/index.html b/build/index.html new file mode 100644 index 0000000..7594a87 --- /dev/null +++ b/build/index.html @@ -0,0 +1,10 @@ + + + + + Cowsay lorem + + +
+ + diff --git a/package.json b/package.json index ca48718..7c36980 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "description": "![cf](https://i.imgur.com/7v5ASc8.png) 21: React Tooling ======", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "build": "webpack", + "watch": "webpack-dev-server --inline --hot" }, "repository": { "type": "git", @@ -29,6 +30,7 @@ "html-webpack-plugin": "^2.30.1", "node-sass": "^4.5.3", "react": "^15.6.1", + "react-cowsay": "^0.1.0", "react-dom": "^15.6.1", "sass-loader": "^6.0.6", "webpack": "^3.5.5", diff --git a/src/main.js b/src/main.js index e69de29..bbae243 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,50 @@ +import './style/main.scss'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import faker from 'faker'; +import cowsay from 'cowsay-browser' + +class Navbar extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+

Generate Cowsay Lorem

+
+ ); + } +} + +class CowsayLorem extends React.Component { + constructor(props) { + super(props); + this.state = { + text: faker.lorem.words(), + } + + this.handleClick = this.handleClick.bind(this) + } + handleClick(e) { + this.setState(state => { + return {text: faker.lorem.words()} + }); + } + + render() { + const cow = cowsay.say({ text: this.state.text }); + return ( +
+ + 
+          {cow}
+
+ +
+ ) + } +} + +ReactDOM.render(, document.getElementById('root')) diff --git a/webpack.config.js b/webpack.config.js index 52b48ec..6118f3d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -23,7 +23,7 @@ module.exports = { loader: 'babel-loader' }, { - test: /\.css/, + test: /\.scss/, loader: ExtractPlugin.extract(['css-loader', 'sass-loader']) } ] From b7606f484e9692f2b98c26177de89ca3dc450853 Mon Sep 17 00:00:00 2001 From: Jamesbillard12 Date: Mon, 21 Aug 2017 17:33:40 -0700 Subject: [PATCH 4/5] finished with select --- src/main.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/main.js b/src/main.js index bbae243..e07c3bd 100644 --- a/src/main.js +++ b/src/main.js @@ -23,9 +23,11 @@ class CowsayLorem extends React.Component { super(props); this.state = { text: faker.lorem.words(), + value: 'tux' } - this.handleClick = this.handleClick.bind(this) + this.handleClick = this.handleClick.bind(this); + this.handleChange = this.handleChange.bind(this); } handleClick(e) { this.setState(state => { @@ -33,15 +35,25 @@ class CowsayLorem extends React.Component { }); } + handleChange(e) { + this.setState({value: e.target.value}) + } + render() { - const cow = cowsay.say({ text: this.state.text }); + const cow = cowsay.say({ text: this.state.text , f: this.state.value }); return ( 
           {cow}
-
- + + +
) } From 79254f91e22f630967f0b31ad6b700c38e60b116 Mon Sep 17 00:00:00 2001 From: Jamesbillard12 Date: Mon, 21 Aug 2017 18:21:59 -0700 Subject: [PATCH 5/5] added read me rename main.js to be jsx file. edited css to center everything --- README.md | 48 +++------------------------------------ src/{main.js => main.jsx} | 25 +++++++++++--------- src/style/main.scss | 18 +++++++++++++++ webpack.config.js | 5 ++-- 4 files changed, 38 insertions(+), 58 deletions(-) rename src/{main.js => main.jsx} (65%) diff --git a/README.md b/README.md index 53d20d9..7212ed1 100644 --- a/README.md +++ b/README.md @@ -1,48 +1,6 @@ -![cf](https://i.imgur.com/7v5ASc8.png) 21: React Tooling +# 21: React Tooling ====== -## Submission Instructions - * fork this repository & create a new branch for your work - * write all of your code in a directory named `lab-` + `` **e.g.** `lab-susan` - * push to your repository - * submit a pull request to this repository - * submit a link to your PR in canvas - * write a question and observation on canvas +## Cowsay - -## Learning Objectives -* students will be able to configure webpack.js to build a web application bundle -* students will be able to configure babel to transpile JSX and ES6 to ES5 JavaScript -* students will be able to create and render React components to the DOM -* students will be able to add event listeners to React components -* students will be able to update React component state - -## Requirements -#### Configuration -* `README.md` -* `.gitignore` -* `.eslintrc` -* `.babelrc` -* `package.json` -* `webpack.config.js` -* `src/**` - * `src/main.js` - * `src/style` - * `src/style/main.scss` - -#### Feature Tasks -* create the following component: -###### App -* should contain the entire application's view and state -* should have a property on the state called `content` -* should create a view with the following display - * a heading with the title "Generate Cowsay Lorem" - * a button that displays "click me" - * `onClick` the button should generate new content on the app state using `cowsay` and `faker` - * a `pre` tag that displays the app's state's content - -#### Documentation -* write a brief description of your project in `README.md` - -#### Bonus 1pt -* add a select menu that enables you to change the type of cowfile currently being used +This is a simple cowsay app. You can select between five different characters (cow, Tux, koala, moose and vader) by clocking on the dropdown select tag and selecting an option. When you select the click me!!! button random lorem ipsum will be "spoken" by the cow (or what ever character is selected). diff --git a/src/main.js b/src/main.jsx similarity index 65% rename from src/main.js rename to src/main.jsx index e07c3bd..d8cf4d6 100644 --- a/src/main.js +++ b/src/main.jsx @@ -12,7 +12,7 @@ class Navbar extends React.Component { render() { return (
-

Generate Cowsay Lorem

+

Generate Cowsay Lorem

); } @@ -23,7 +23,7 @@ class CowsayLorem extends React.Component { super(props); this.state = { text: faker.lorem.words(), - value: 'tux' + value: 'cow' } this.handleClick = this.handleClick.bind(this); @@ -42,18 +42,21 @@ class CowsayLorem extends React.Component { render() { const cow = cowsay.say({ text: this.state.text , f: this.state.value }); return ( -
+ 
           {cow}
-
- - + +
+ + +
) } diff --git a/src/style/main.scss b/src/style/main.scss index 67ce83e..cd10c22 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -1,3 +1,21 @@ body { background: red; } + +#root { + display:flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-content: center; + align-items: center; +} + +#all { + display:flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-content: center; + align-items: center; +} diff --git a/webpack.config.js b/webpack.config.js index 6118f3d..cadefd4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,7 +5,7 @@ const ExtractPlugin = require('extract-text-webpack-plugin'); module.exports = { devtool: 'cheap-module-eval-source-map', - entry: `${__dirname}/src/main.js`, + entry: `${__dirname}/src/main.jsx`, output: { path: `${__dirname}/build`, publicPath: '/', @@ -18,10 +18,11 @@ module.exports = { module:{ rules:[ { - test: /\.js$/, + test: /\.jsx?$/, exclude: /nodemodules/, loader: 'babel-loader' }, + { test: /\.scss/, loader: ExtractPlugin.extract(['css-loader', 'sass-loader'])