Instantly share code, notes, and snippets.

Embed
What would you like to do?
Modern JavaScript in React Documentation

If you haven’t worked with JavaScript in the last few years, these three points should give you enough knowledge to feel comfortable reading the React documentation:

  • We define variables with let and const statements. For the purposes of the React documentation, you can consider them equivalent to var.
  • We use the class keyword to define JavaScript classes. There are two things worth remembering about them. Firstly, unlike with objects, you don't need to put commas between class method definitions. Secondly, unlike many other languages with classes, in JavaScript the value of this in a method depends on how it is called.
  • We sometimes use => to define "arrow functions". They're like regular functions, but shorter. For example, x => x * 2 is roughly equivalent to function(x) { return x * 2; }. Importantly, arrow functions don't have their own this value so they're handy when you want to preserve the this value from an outer method definition.

Don't worry if this is too much to take in at once. The MDN JavaScript Reference is a stellar resource, and you can consult it whenever you get confused by something.

Also, when you feel unsure about what some newer syntax means, you can use the Babel REPL with the ES2015 preset to check what equivalent older syntax it compiles to.

@mail2asik

This comment has been minimized.

mail2asik commented Jun 23, 2018

+1 for simple explanation for Arrow function. thanks!

@VeromcaChang

This comment has been minimized.

VeromcaChang commented Jul 4, 2018

This article is very considerate!

@Rathilion

This comment has been minimized.

Rathilion commented Jul 8, 2018

Thank you for information !!

@bamoha

This comment has been minimized.

bamoha commented Jul 9, 2018

This is very explanatory, THANK YOU!

@f4bo

This comment has been minimized.

f4bo commented Jul 13, 2018

if I may suggest, another quirky new feature to get is 'destructuring' variable assignment:
these samples are from Learn ES2015 Babel package
// list matching
var [a, ,b] = [1,2,3];

// object matching

var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds op, lhs and rhs in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position

function g({name: x}) {
  console.log(x);
}
g({name: 5})

etc...

@mohanramphp

This comment has been minimized.

mohanramphp commented Jul 14, 2018

Whenever you come across mutation part

keep in mind array and object are mutable in JavaScript, so to avoid mutation

use - spread operator

example - array

const stringList = ["Mohan","Fasale","Robert"];
const name = "Priya";

const result = [...stringList, name];
console.log(stringList); // ["Mohan","Fasale","Robert"]
console.log(result); // ["Mohan","Fasale","Robert","Priya"]

example - object

const user = {name:"Mohan", email:"sample@sss.com","isEmployee":false};
const updatedUser = {...user, ...{isEmployee: true}}
console.log(user); // {name: "Mohan", email: "sample@sss.com", isEmployee: false}
console.log(updatedUser); // {name: "Mohan", email: "sample@sss.com", isEmployee: true}

This will really helpful while dealing with data model inside pure functions

@Blandaxt

This comment has been minimized.

Blandaxt commented Jul 20, 2018

@mohanramphp Nice Example for the mutable const events. Nice example with the arrow function. What do you mean by the arrow do not have a this binding?

@dandv

This comment has been minimized.

dandv commented Jul 20, 2018

@everyone - you can't ping people on gists because tist comments and mentions don't trigger notifications.

@nfl404

This comment has been minimized.

nfl404 commented Jul 26, 2018

it's good!

@deryda

This comment has been minimized.

deryda commented Aug 7, 2018

I must admit it's been a while. Great explanation!
Thanks!

@mohsenhaghighatkhah

This comment has been minimized.

mohsenhaghighatkhah commented Aug 26, 2018

thanks for summary and useful article bro !

@mixj93

This comment has been minimized.

mixj93 commented Aug 28, 2018

Thanks!

@gajulamahesh8143

This comment has been minimized.

gajulamahesh8143 commented Sep 5, 2018

thanks you

@gnprice

This comment has been minimized.

gnprice commented Sep 5, 2018

Having learned both React and modern JS within the past year: this is a resource I'd have been very glad to see early on! Thanks for writing it.

There's one other feature of modern-JS syntax that I found highly confusing to read at first until I'd learned it, and I think would be helpful to include here: shorthand property names.

The core React guide largely avoids these (a good choice there), but because it's such a great feature it does find its way into other React docs (not to mention being ubiquitous in many community tutorials). For example, here:

  const { extraProp, ...passThroughProps } = this.props;

(This also demonstrates destructuring assignment and spread properties -- which I also sometimes found confusing, but I think mainly when combined with shorthand property names. The others are basically familiar from other languages, but the "punning" that shorthand property names perform between identifiers and data was quite alien.)

Here's a possible way to explain it:

  • We sometimes use shorthand property names to concisely define an object value. For example, function (longName) { return { longName }; } is equivalent to function (longName) { return { longName: longName }; }.

Perhaps with one more bullet to be explicit about the destructuring version:

  • We sometimes bind variables using destructuring assignment, usually with shorthand property names. For example, var { longPropName } = props; is equivalent to var longPropName = props.longPropName;
@rameshsrinivasan

This comment has been minimized.

rameshsrinivasan commented Sep 7, 2018

+1

@lokesh1729

This comment has been minimized.

lokesh1729 commented Sep 12, 2018

+1

@ademircarvalhojr

This comment has been minimized.

ademircarvalhojr commented Sep 22, 2018

Thanks!

@Meghdad

This comment has been minimized.

Meghdad commented Oct 18, 2018

👍

@305curtis

This comment has been minimized.

305curtis commented Nov 1, 2018

Dope...thanks for the info..

@shiyaow

This comment has been minimized.

shiyaow commented Nov 1, 2018

+1

@YossOviedo

This comment has been minimized.

YossOviedo commented Nov 12, 2018

++ Super handy! Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment