Raphael Ugwu fullstackmafia

## Landing.js
import React, { useState, useEffect } from "react";

const URL = "https://api.punkapi.com/v2/beers";
export default function Landing() {
  const [beer, setBeer] = useState([]);
  useEffect(() => {
    fetch(URL)
      .then(response => response.json())
      .then(beer => setBeer(beer));
  });

## MovieButton.js
import React, { useState } from "react";
export default function MovieButton() {
  const [buttonText, setButtonText] = useState("Click to purchase movie tickets");
  function handleClick() {
    return setButtonText("Enjoy your movie!");
  }
  return <button onClick={handleClick}>{buttonText}</button>;
}

## MovieButton.js
import React, { Component } from "react";
class MovieButton extends Component {
  constructor() {
    super();
    this.state = { buttonText: "Click to purchase movie tickets" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(() => {
      return { buttonText: "Enjoy your movie!" };

## CoffeeButtonStory.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import CoffeeButton from './CoffeeButton';
storiesOf('CoffeeButton', module)
  .add('Black', () => (
    <CoffeeButton>
      <span role="img" aria-label="without-milk">
         🏿
      </span>
    </CoffeeButton>

## CoffeeButton.js
import React, { useState } from 'react';
const ButtonStyle = {
  backgroundColor: '#d9d9d9',
  padding: '10px',
  borderRadius: '5px',
  fontSize: '15px',
  border: '#66c2ff 3px solid',
  cursor: 'pointer'
};
const CoffeeButton = ({children}) => {

## main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
Vue.use(VueResource);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',

## package.json
...
"dependencies": {
    "vue": "^2.5.2",
    "vue-resource": "^1.3.4"
  },
...

## vue-resource.git
 $ cd my-project
 $ npm install vue-resource

## index.html
<html>
  <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <meta charset="utf-8">
    <title>zip-tracker</title>
  </head>
  <body>
    <div id="app"></div>

  </body>

## updated-app-4.vue
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
	import React, { useState, useEffect } from "react";

	const URL = "https://api.punkapi.com/v2/beers";
	export default function Landing() {
	const [beer, setBeer] = useState([]);
	useEffect(() => {
	fetch(URL)
	.then(response => response.json())
	.then(beer => setBeer(beer));
	});
	import React, { useState } from "react";
	export default function MovieButton() {
	const [buttonText, setButtonText] = useState("Click to purchase movie tickets");
	function handleClick() {
	return setButtonText("Enjoy your movie!");
	}
	return <button onClick={handleClick}>{buttonText}</button>;
	}
	import React, { Component } from "react";
	class MovieButton extends Component {
	constructor() {
	super();
	this.state = { buttonText: "Click to purchase movie tickets" };
	this.handleClick = this.handleClick.bind(this);
	}
	handleClick() {
	this.setState(() => {
	return { buttonText: "Enjoy your movie!" };
	import React from 'react';
	import { storiesOf } from '@storybook/react';
	import CoffeeButton from './CoffeeButton';
	storiesOf('CoffeeButton', module)
	.add('Black', () => (
	<CoffeeButton>
	<span role="img" aria-label="without-milk">
	🏿
	</span>
	</CoffeeButton>
	import React, { useState } from 'react';
	const ButtonStyle = {
	backgroundColor: '#d9d9d9',
	padding: '10px',
	borderRadius: '5px',
	fontSize: '15px',
	border: '#66c2ff 3px solid',
	cursor: 'pointer'
	};
	const CoffeeButton = ({children}) => {
	// The Vue build version to load with the `import` command
	// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
	import Vue from 'vue'
	import App from './App'
	import VueResource from 'vue-resource'
	Vue.use(VueResource);
	Vue.config.productionTip = false
	/* eslint-disable no-new */
	new Vue({
	el: '#app',
	...
	"dependencies": {
	"vue": "^2.5.2",
	"vue-resource": "^1.3.4"
	},
	...
	<html>
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
	<meta charset="utf-8">
	<title>zip-tracker</title>
	</head>
	<body>
	<div id="app"></div>

	</body>
	<style>
	#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
	}
	</style>