jackyef

<audio id="audio1">
  <source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg">
</audio>
<audio id="audio2">
  <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg">
</audio>
<audio id="audio3">
  <source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mpeg">
</audio>

jackyef

import React, { Component, Fragment } from 'react';
import { number } from 'prop-types';

class Comic extends Component {
  static baseComicUrl = `https://xkcd.now.sh/:comicId`;
  static propTypes = {
    id: number.isRequired,
  };

  state = {

jackyef

import React from 'react';
import { func, string } from 'prop-types';

export default class Fetch extends React.Component {
  static propTypes = {
    render: func.isRequired,
    url: string.isRequired,
  };

  state = {

jackyef

import React, { Component, Fragment } from 'react';
import { number } from 'prop-types';

import Fetch from './reusables/Fetch';

class Comic extends Component {
  static baseComicUrl = `https://xkcd.now.sh/:comicId`;
  static propTypes = {
    id: number.isRequired,
  };

jackyef

renderContent = ({ data, error, loading, errorMessage }) => { // mengambil data, error, loading, errorMessage dari state milik Fetch
    const { id } = this.props;
    
    if (error) {
      return <p>an error happened while trying to fetch comic #{id}</p>;
    }
    
    if (loading) {
      return <p>loading...</p>;
    }

jackyef

// we can destructure Fetch's state here
renderContent = ({ data, error, loading, errorMessage }) => {
    const { id } = this.props;
    
    if (error) {
      return <p>an error happened while trying to fetch comic #{id}</p>;
    }
    
    if (loading) {
      return <p>loading...</p>;

jackyef

import React from 'react';
import ReactDOM from 'react-dom';

const withCounter = Component => {
  return class ComponentWithCounter extends React.Component {
    state = {
      count: 0,
    };

    handleDecrement = () => {

jackyef

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const useCounter = () => {
  const [count, setCount] = useState(0);

  const onIncrease = () => setCount(count + 1);
  const onDecrease = () => setCount(count - 1);

  return [ count, onIncrease, onDecrease ];

jackyef

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const usePerformance = initialTimestamp => {
  const [timings, updateTimings] = useState([]);
  let prev = initialTimestamp;

  useEffect(() => {
    const newTimestamp = new Date().getTime();

jackyef

!(function(e) {
  function t(t) {
    for (var r, a, c = t[0], l = t[1], i = t[2], s = 0, p = []; s < c.length; s++)
      (a = c[s]), o[a] && p.push(o[a][0]), (o[a] = 0);
    for (r in l) Object.prototype.hasOwnProperty.call(l, r) && (e[r] = l[r]);
    for (f && f(t); p.length; ) p.shift()();
    return u.push.apply(u, i || []), n();
  }
  function n() {
    for (var e, t = 0; t < u.length; t++) {