selbekk

import Pica from 'pica';

const getImageFromFile = file =>
  new Promise(resolve => {
    const reader = new FileReader();
    const image = new Image();
    reader.onload = async fileReaderEvent => {
      image.onload = () => resolve(image);
      image.src = await fileReaderEvent.target.result;
    };

selbekk

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isProduction = process.env.NODE_ENV === 'production';

const config = {
    // First, let's define an entry point for webpack to start its crawling.
    entry: './src/index.js',
    // Second, we define where the files webpack produce, are placed
    output: {

selbekk

const path = require('path');

const config = {
    // First, let's define an entry point for webpack to start its crawling.
    entry: './src/index.js',
    // Second, we define where the files webpack produce, are placed
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },

selbekk

@color: palevioletred;

.with-styles {
  background-color: @color;
}

selbekk

import './my-styles.less';

document.querySelector('body').classList.add('with-styles');
  

selbekk

const path = require('path');

const config = {
    // First, let's define an entry point for webpack to start its crawling.
    entry: './src/index.js',
    // Second, we define where the files webpack produce, are placed
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },

selbekk

const withApiState = TargetComponent =>
  class extends React.Component {
    state = {
      current: "idle"
    };

    apiState = {
      pending: () => this.setState({ current: "pending" }),
      success: () => this.setState({ current: "success" }),
      error: () => this.setState({ current: "error" }),

selbekk

class SomePage extends React.Component {
  async componentDidMount() {
    const { apiState } = this.props;
    apiState.pending();
    try {
      const res = await fetch('/api/some-data');
      const data = await res.json();
      apiState.success();
    } catch (e) {
      apiState.error();

selbekk

class SomePage extends React.Component {
  async componentDidMount() {
    const { apiState } = this.props;
    apiState.next();
    try {
      const res = await fetch('/api/some-data');
      const data = await res.json();
      apiState.next(true);
    } catch (e) {
      apiState.next(false);

selbekk

const withApiState = TargetComponent => class extends React.Component {
  state = {
    current: 'idle',
  };
  next = (input) => {
    let nextState;
    switch (this.state.current) {
      case 'idle': nextState = 'pending'; break;
      case 'pending': nextState = input ? 'success' : 'error'; break;
      default: nextState = 'idle';