Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["es2015", "react"]
}
5 changes: 5 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
**/node_modules/*
**/vendor/*
**/*.min.js
**/coverage/*
**/build/*
21 changes: 21 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -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"
}
136 changes: 136 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -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
50 changes: 2 additions & 48 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,48 +1,2 @@
![cf](https://i.imgur.com/7v5ASc8.png) 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-` + `<your name>` **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


## 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
# wut duz kow sae?
Lorem Ipsum generator using Cowsay and Faker on a React frontend.
73 changes: 73 additions & 0 deletions build/bundle-bf8474894cc3f9c3769d.js
Original file line number Diff line number Diff line change
@@ -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: /Users/devjonah/codefellows/401/labs/21-react-tooling/.babelrc: Error while parsing JSON - Unexpected EOF at line 1 column 2 of the JSON5 data. Still to read: \\\"\\\"\\n at error (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/json5/lib/json5.js:56:25)\\n at word (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/json5/lib/json5.js:393:13)\\n at value (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/json5/lib/json5.js:493:56)\\n at Object.parse (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/json5/lib/json5.js:508:18)\\n at ConfigChainBuilder.addConfig (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/babel-core/lib/transformation/file/options/build-config-chain.js:150:65)\\n at ConfigChainBuilder.findConfigs (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/babel-core/lib/transformation/file/options/build-config-chain.js:96:16)\\n at buildConfigChain (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/babel-core/lib/transformation/file/options/build-config-chain.js:61:13)\\n at OptionManager.init (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/babel-core/lib/transformation/file/options/option-manager.js:354:58)\\n at File.initOptions (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/babel-core/lib/transformation/file/index.js:212:65)\\n at new File (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/babel-core/lib/transformation/file/index.js:135:24)\\n at Pipeline.transform (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/babel-core/lib/transformation/pipeline.js:46:16)\\n at transpile (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/babel-loader/lib/index.js:50:20)\\n at Object.module.exports (/Users/devjonah/codefellows/401/labs/21-react-tooling/node_modules/babel-loader/lib/index.js:175:20)\");//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///0\n");

/***/ })
/******/ ]);
10 changes: 10 additions & 0 deletions build/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>Cow Say</title>
</head>

<body>
<div id="root"></div>
<script type="text/javascript" src="/bundle-bf8474894cc3f9c3769d.js"></script></body>
</html>
39 changes: 39 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -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/ohjonah/21-react-tooling.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/ohjonah/21-react-tooling/issues"
},
"homepage": "https://github.com/ohjonah/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": "^1.1.9",
"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"
}
}
9 changes: 9 additions & 0 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<title>Cow Say</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Loading