jacobparis

const host = "http://localhost:3000/api/";
export default class APIService {
    constructor() {
        this.headers = {};
    }
    get(endpoint) {
        return this.makeRequest({ method: "GET", url: host + endpoint, headers: this.headers})
    }

    post(endpoint, body) {

jacobparis

import React from "react";

export function Product(props) {
  return (
    <div>
      <span>$3.99</span>
      <p>Widget</p>
      <p>Shiny and Strong</p>
    </div>
  );

jacobparis

import React from "react";
import styled from "styled-components";

const Card = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 10rem;
    max-width: 90%;
    height: 10rem;

jacobparis

import React from "react";
import styled from "styled-components";

import { Card } from './components/Card';

const Price = styled.span`
    font-size: 1.2rem;
`;

const Title = styled.div`

jacobparis

Simply and easily with Styled components npm install styled-components

Thats all you need to do. Really! That’s why I love it! No Babel, no Webpack, no CSS pre or post processing. Only JavaScript and nothing else.

CSS in JS

“You mean CSS in JS? Man, that’s weird. I would never do that!” Don’t panic. Just let me show you few examples why this is a great idea. But let’s write some Styled component first:

import styled from 'styled-components;

jacobparis

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const resolve = require("path").resolve;

module.exports = {
    mode: "development",
    entry: resolve(__dirname, 'app/index.js'),
    output: {
        path: resolve(__dirname, 'dist'),

jacobparis

import styled from 'styled-components';
import Theme from '../theme';

export const Button = styled.button`
    border: ${props => props.inverted ? `1px solid ${Theme.primary}33` : "none"};
    border-radius: ${props => Theme.baseRadius};
    cursor: ${props => props.disabled ? "not-allowed" : "pointer"};
    display: ${props => (props.wide ? "block" : "inline-block")};
    font-size: ${props => {
        const { baseFontSize } = Theme;

jacobparis

export default class Surface {
    constructor() {

        this.canvas = <canvas id="canvas" width="300" height="480"></canvas>
        // Disable text selection on the canvas
        this.canvas.addEventListener('mousedown', (() => false));

        /*
        this.socket.on('DRAW-drawCanvas', (canvasToDraw) => {
            console.log(canvasToDraw);

jacobparis

"bracket-pair-colorizer-2.colors": [ // requires Bracket Pair Colorizer 2
    "White"
  ],
  "bracket-pair-colorizer-2.showHorizontalScopeLine": false,
  "bracket-pair-colorizer-2.scopeLineRelativePosition": true,
  "bracket-pair-colorizer-2.colorMode": "Independent",
  "bracket-pair-colorizer-2.showBracketsInGutter": true,
  "bracket-pair-colorizer-2.rulerPosition": "Full",
  "editor.fontFamily": "Comic Code Ligatures, Times New Roman",
  "editor.rulers": [ 80, 100],

jacobparis

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions