hontas

ReactEurope

Thursday 23/5-19

Jared Palmer - State of React

2019 roadmap

• Suspense for data fetching
• A new server renderer

hontas

{
	"console.log": {
		"prefix": "c",
		"body": [
			"console.log('$1', ${2:$1});"
		]
	},
	"import": {
		"prefix": "imp",
		"body": [

hontas

#!/usr/bin/env bash
printf "<pre-push>\n";

BRANCH=$(git rev-parse --abbrev-ref HEAD)
if [[ "$BRANCH" = "master" ]]; then
    cd frontend;
    FRONTEND_DIFF=`git diff-index --name-only --relative origin/master`;
    if [ "$FRONTEND_DIFF" ];
    then
        printf "Frontend files changed: \n$FRONTEND_DIFF\n";

hontas

const NO_CONTENT = 204;
const getHeaders = {
  'accept': 'application/json'
};
const postHeaders = {
  'Content-Type': 'application/json'
};

export function getJSON(url) {
  return fetch(url, { headers: getHeaders })

hontas

.notifications {
  // Used for calculations
  $defaultWidth = 320;
  $success = $brand-happy;
  $error = $brand-angry;
  $warning = $warning;
  $info = $brand-turquoise;
  $defaultShadowOpacity = "0.9";

  &-wrapper {}

hontas

function makeRequest(id) {
  return new Promise((resolve, reject) => {  
    setTimeout(() => {
      if (id % 2) {
        resolve(id);
      } else {
        reject(id);
      }
    }, 400);
  });

hontas

Project name

optional tagline

Short description of what it is and what it does. Possibly even what it does not.

Local setup

• Minimum possible steps
• developer need take to start developing

hontas

/* more functional version using concat */
function uniq(array) {
  return array.reduce(function(result, currentElement) {
    if (result.indexOf(currentElement) < 0) {
      return results.concat([currentElement]);
    }
    return result;
  }, []);
}

hontas

validateYears: function(Class, prop) {
    var input = Ember.get(Class, prop),
        regex = /\D*(\d*)\.?(\d{2}).*/,
        result;

    if (input.length > 0) {
        this.set('errorMsg', null);

        if (input.match(regex)) {
            result = input.replace(regex, "$1,$2").replace(/[,]/g, '.');

hontas

(function() {
    "use strict";

    var layout = 
        "{{yield}}" +
        "{{currentText}}" +
        "<span {{bind-attr class='iconClass loadingWhen:hide'}}></span>" +
        "<span {{bind-attr class=':glyphicon :glyphicon-refresh loadingWhen:glyphicon-spin:hide'}}></span>";

    App.BootstrapButtonComponent = Ember.Component.extend({