React Redux Jsx es6 Code Reference

Good cheatsheet https://github.com/DrkSephy/es6-cheatsheet#arrow-functions

WITH ALL THE FUCKING EXAMPLES OF REACT, REDUX, WITH OR WITHOUT JSX, WITH OR WITHOUT es6, OR WITH JSX NO es6, WITHOUT JSX AND es6 IT BECOMES A CLUSTERFUCK FOR MY BRAIN. So here’s how the fuck I do it.

Examples to produce: map, filter, function, react functional component, react component

It’s really not that many functions, HOWEVER WHEN YOU MULTIPLY IT BY THE FOUR OPTIONS OUT THERE IT BECOMES A LOT OF SHIT AND IMPOSSIBLE TO MANAGE.

ES6 and JSX react componentDidMount

I ABSOFUCKINGLUTELY LOVE HOW FACEBOOK REACT DOCS MENTION THESE METHODS BUT FAILS TO MENTION THE CODE TO UTILIZE THEM.

componentDidMount() {
  this.serverRequest = $.get(this.props.source, function (result) {
    var lastGist = result[0];
    this.setState({
      username: lastGist.owner.login,
      lastGistUrl: lastGist.html_url
    });
  }.bind(this));
}

ES6 and JSX map

{this.props.attacks.map((attack, i) =>
  <AttackTableRow key={i} number={i + 1} attack={attack.attack} attacks_path={this.props.attacks_path} active={this.props.active} />
)}

ES6 operations that are important (let, const, …, =>, a new way to define functions, a new way to pass variables, a new way to create objects, Template Literals: “)

Defining a Function

Daniel Abromov uses this method to define functions. He’s incredibly successful as a developer, so I trust him to be using the latest techniques.

const multiply = (x, y) => { 
  return x * y;
}

const functionName = (argument1, argument2) => {
  return something
}

let

// es5 === var nameOfDog = "Penny"; // FUCK THAT NOW
let ageOfDog = 5;
console.log(ageOfDog);

const

// const is used when a variable should not change over time. Will raise exception if reassigned.

const nameOfDog = "Penny";
console.log(nameOfDog);

… Spread Operator

This bastard function is something I can never remember wtf it does, jfc.

In es6, we can use the spread operator to pass an array to a function

Math.max(...[-1, 100, 9001, -32]);

This basically translates to…

Math.max(-1, 100, 9001, -32);

In es6, we can use the spread operator to concatinate arrays

let cities = [‘San Francisco’, 'Los Angeles’]; let places = ['Miami’, …cities, 'Chicago’]; // ['Miami’, 'San Francisco’, 'Los Angeles’, 'Chicago’]

map

const arr = [1, 2, 3, 4, 5]; const squares = arr.map(x => x * x);

Template Literals ”

const name = 'Tiger’; const age = 13;

console.log(My cat is named ${name} and is ${age} years old.);

Post Content