diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..59e5db6 --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["es2015"], + "presets": ["react"] +} 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/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/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 new file mode 100644 index 0000000..7c36980 --- /dev/null +++ b/package.json @@ -0,0 +1,39 @@ +{ + "name": "21-react-tooling", + "version": "1.0.0", + "description": "![cf](https://i.imgur.com/7v5ASc8.png) 21: React Tooling ======", + "main": "index.js", + "scripts": { + "build": "webpack", + "watch": "webpack-dev-server --inline --hot" + }, + "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-cowsay": "^0.1.0", + "react-dom": "^15.6.1", + "sass-loader": "^6.0.6", + "webpack": "^3.5.5", + "webpack-dev-server": "^2.7.1" + } +} 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/main.jsx b/src/main.jsx new file mode 100644 index 0000000..d8cf4d6 --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,65 @@ +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(), + value: 'cow' + } + + this.handleClick = this.handleClick.bind(this); + this.handleChange = this.handleChange.bind(this); + } + handleClick(e) { + this.setState(state => { + return {text: faker.lorem.words()} + }); + } + + handleChange(e) { + this.setState({value: e.target.value}) + } + + render() { + const cow = cowsay.say({ text: this.state.text , f: this.state.value }); + return ( +
+ + 
+          {cow}
+
+
+ + +
+
+ ) + } +} + +ReactDOM.render(, document.getElementById('root')) diff --git a/src/style/main.scss b/src/style/main.scss new file mode 100644 index 0000000..cd10c22 --- /dev/null +++ b/src/style/main.scss @@ -0,0 +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 new file mode 100644 index 0000000..cadefd4 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,32 @@ +'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.jsx`, + 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: /\.jsx?$/, + exclude: /nodemodules/, + loader: 'babel-loader' + }, + + { + test: /\.scss/, + loader: ExtractPlugin.extract(['css-loader', 'sass-loader']) + } + ] + } +};