Skip to content

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.

Copy link

mail2asik commented Jun 23, 2018

+1 for simple explanation for Arrow function. thanks!

@VeromcaChang

This comment has been minimized.

Copy link

VeromcaChang commented Jul 4, 2018

This article is very considerate!

@Rathilion

This comment has been minimized.

Copy link

Rathilion commented Jul 8, 2018

Thank you for information !!

@bamoha

This comment has been minimized.

Copy link

bamoha commented Jul 9, 2018

This is very explanatory, THANK YOU!

@f4bo

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

nfl404 commented Jul 26, 2018

it's good!

@deryda

This comment has been minimized.

Copy link

deryda commented Aug 7, 2018

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

@mossiiiiiii

This comment has been minimized.

Copy link

mossiiiiiii commented Aug 26, 2018

thanks for summary and useful article bro !

@mixj93

This comment has been minimized.

Copy link

mixj93 commented Aug 28, 2018

Thanks!

@gajulamahesh8143

This comment has been minimized.

Copy link

gajulamahesh8143 commented Sep 5, 2018

thanks you

@gnprice

This comment has been minimized.

Copy link

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.

Copy link

rameshsrinivasan commented Sep 7, 2018

+1

@lokesh1729

This comment has been minimized.

Copy link

lokesh1729 commented Sep 12, 2018

+1

@ademircarvalhojr

This comment has been minimized.

Copy link

ademircarvalhojr commented Sep 22, 2018

Thanks!

@Meghdad

This comment has been minimized.

Copy link

Meghdad commented Oct 18, 2018

👍

@305curtis

This comment has been minimized.

Copy link

305curtis commented Nov 1, 2018

Dope...thanks for the info..

@shiyaow

This comment has been minimized.

Copy link

shiyaow commented Nov 1, 2018

+1

@YossOviedo

This comment has been minimized.

Copy link

YossOviedo commented Nov 12, 2018

++ Super handy! Thank you.

@PRASHANTPR7

This comment has been minimized.

Copy link

PRASHANTPR7 commented Dec 5, 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?

that means arrow function don't have a context of this.
a simple answer for that is arrow don't know about 'this' keyword it simple checks up the hierarchical order to get 'this'

@kcotias

This comment has been minimized.

Copy link

kcotias commented Dec 16, 2018

++++ one of the best explanations on the web!

@abukharoub

This comment has been minimized.

Copy link

abukharoub commented Dec 20, 2018

Thanks

@shankar524

This comment has been minimized.

Copy link

shankar524 commented Dec 26, 2018

Very helpful, short and sweet review.

@CarGod

This comment has been minimized.

Copy link

CarGod commented Dec 26, 2018

Thanks

@aalaap

This comment has been minimized.

Copy link

aalaap commented Jan 5, 2019

Coming from a traditional OOP background, I got a bit confused with the mention of not requiring commas in class method definitions, until I realized that a class also looks like an object in JavaScript.

Thanks for this! ⭐️'d

@mpietro40

This comment has been minimized.

Copy link

mpietro40 commented Jan 15, 2019

Really well done! Thanks for sharing.
Thanks also to @mohanramphp for the additional interesting examples!

@ArmandoPrieto

This comment has been minimized.

Copy link

ArmandoPrieto commented Jan 18, 2019

+1 Very helpful, simple and well explained!

@leandrorichard

This comment has been minimized.

Copy link

leandrorichard commented Jan 26, 2019

+1 Thanks!

@caprica-Six

This comment has been minimized.

Copy link

caprica-Six commented Jan 26, 2019

Great, thank you!

@cmmash

This comment has been minimized.

Copy link

cmmash commented Feb 3, 2019

I don't get this: Firstly, unlike with objects, you don't need to put commas between class method definitions.

Can someone please explain by example?

@jairodmontero

This comment has been minimized.

Copy link

jairodmontero commented Feb 5, 2019

+1 for the simple and clear explanation!

@Gunasekaran92

This comment has been minimized.

Copy link

Gunasekaran92 commented Feb 18, 2019

Thanks for this update

@marif964

This comment has been minimized.

Copy link

marif964 commented Mar 13, 2019

Thanks for the nice recommendations..set well..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.