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!

@IamMaheshRoyal

This comment has been minimized.

Copy link

IamMaheshRoyal 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..

@react-ram

This comment has been minimized.

Copy link

react-ram commented Mar 24, 2019

nice 👍

@usatosi

This comment has been minimized.

Copy link

usatosi commented Mar 27, 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?

I guess he meant the following case;

let f = function ff(){return this.prop+1};

let obj = {prop:1, method:f };

class cls{
  prop = 2
  method =f
}

document.body.append(obj["method"]());

document.body.append(new cls()["method"]());

Methods and properties are need to be defined separated by comma each other in Object, but they are not in Class definition.
Excuse me for dirty sample code.

@nezarat

This comment has been minimized.

Copy link

nezarat commented Mar 27, 2019

I dont know who invented this arrow function style, but it is bu...hit, it just makes the code unreadable specially when it does something complicated, old javascript was nice it had only lack of OOP standard keywords ...

@kjm789

This comment has been minimized.

Copy link

kjm789 commented Apr 13, 2019

👌

@ajaymarathe

This comment has been minimized.

Copy link

ajaymarathe commented Apr 27, 2019

Wow, Nice Explanation, I learn much today :P
Thanks man..

@shijiatongxue

This comment has been minimized.

Copy link

shijiatongxue commented May 6, 2019

Awesome article.

@Krina28

This comment has been minimized.

Copy link

Krina28 commented May 8, 2019

Thank you for easy and simpler explanation.

@oslboreal

This comment has been minimized.

Copy link

oslboreal commented May 27, 2019

Thnx

@hygull

This comment has been minimized.

Copy link

hygull commented Jun 1, 2019

Beautiful suggestion. I like it. Thank you very much.

@SinghOmkar

This comment has been minimized.

Copy link

SinghOmkar commented Jun 7, 2019

thanks for the simplar explanation.

@chenjianniu

This comment has been minimized.

Copy link

chenjianniu commented Jun 12, 2019

thanks

@kounkou

This comment has been minimized.

Copy link

kounkou commented Jun 16, 2019

Good !

@Ayushmahajan51

This comment has been minimized.

Copy link

Ayushmahajan51 commented Jun 19, 2019

+1 for simple explanation for Arrow function. thanks!

quite easy explanation of arrow function...thankyou.

@sirihtesham

This comment has been minimized.

Copy link

sirihtesham commented Jun 26, 2019

+1 for simple explanation for Arrow function. thanks!

This is very helpful. thank you so much!

@sean-ludeman

This comment has been minimized.

Copy link

sean-ludeman commented Jul 13, 2019

Super simple, very concise. Thank you!

@joe960913

This comment has been minimized.

Copy link

joe960913 commented Jul 18, 2019

Thank you!

@sachinnegi

This comment has been minimized.

Copy link

sachinnegi commented Jul 18, 2019

Nice short notes.

@ddmy

This comment has been minimized.

Copy link

ddmy commented Jul 20, 2019

nice👍,thank you

@jamesalmeida

This comment has been minimized.

Copy link

jamesalmeida commented Jul 24, 2019

Helpful tips 👍

@FalsePozitive

This comment has been minimized.

Copy link

FalsePozitive commented Jul 26, 2019

That's the most succinct description I've come across, thanks!

@yashpal-nimesh-au2

This comment has been minimized.

Copy link

yashpal-nimesh-au2 commented Jul 31, 2019

Thanks

@lvkins

This comment has been minimized.

Copy link

lvkins commented Aug 6, 2019

What a lovely piece of text.

@niceonionslice

This comment has been minimized.

Copy link

niceonionslice commented Aug 12, 2019

Thanks!

@shankha-das

This comment has been minimized.

Copy link

shankha-das commented Aug 12, 2019

thanks

@kambleaa007

This comment has been minimized.

Copy link

kambleaa007 commented Aug 14, 2019

Great Stuffff

@briantuju

This comment has been minimized.

Copy link

briantuju commented Aug 19, 2019

this keyword usage is nicely explained. Used to run into errors when using return this.method inside an arrow function

@hugohoffmann035

This comment has been minimized.

Copy link

hugohoffmann035 commented Aug 21, 2019

Muito bom, me ajudou muito!

@tmndungu

This comment has been minimized.

Copy link

tmndungu commented Aug 31, 2019

Awesome!!

@zhuziyi1989

This comment has been minimized.

Copy link

zhuziyi1989 commented Sep 28, 2019

It's good.

@Dimitry19

This comment has been minimized.

Copy link

Dimitry19 commented Sep 30, 2019

Thanks u !!

@jhonnyRocket

This comment has been minimized.

Copy link

jhonnyRocket commented Nov 10, 2019

It again cleared my confusion

@k-suzuki

This comment has been minimized.

Copy link

k-suzuki commented Nov 11, 2019

Thank you. I will learn again.

@Npizza

This comment has been minimized.

Copy link

Npizza commented Nov 11, 2019

Thank you! This explanation was really helpfull

@chris-melvin

This comment has been minimized.

Copy link

chris-melvin commented Nov 14, 2019

Thanks

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.