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 mail2asik commented Jun 23, 2018

+1 for simple explanation for Arrow function. thanks!

@VeromcaChang

This comment has been minimized.

Copy link

@VeromcaChang VeromcaChang commented Jul 4, 2018

This article is very considerate!

@Rathilion

This comment has been minimized.

Copy link

@Rathilion Rathilion commented Jul 8, 2018

Thank you for information !!

@bamoha

This comment has been minimized.

Copy link

@bamoha bamoha commented Jul 9, 2018

This is very explanatory, THANK YOU!

@f4bo

This comment has been minimized.

Copy link

@f4bo 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 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 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 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 nfl404 commented Jul 26, 2018

it's good!

@yveshema

This comment has been minimized.

Copy link

@yveshema yveshema commented Aug 7, 2018

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

@mosssiiiiiii

This comment has been minimized.

Copy link

@mosssiiiiiii mosssiiiiiii commented Aug 26, 2018

thanks for summary and useful article bro !

@mixj93

This comment has been minimized.

Copy link

@mixj93 mixj93 commented Aug 28, 2018

Thanks!

@IamMaheshRoyal

This comment has been minimized.

Copy link

@IamMaheshRoyal IamMaheshRoyal commented Sep 5, 2018

thanks you

@gnprice

This comment has been minimized.

Copy link

@gnprice 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 rameshsrinivasan commented Sep 7, 2018

+1

@lokesh1729

This comment has been minimized.

Copy link

@lokesh1729 lokesh1729 commented Sep 12, 2018

+1

@ademircarvalhojr

This comment has been minimized.

Copy link

@ademircarvalhojr ademircarvalhojr commented Sep 22, 2018

Thanks!

@Meghdad

This comment has been minimized.

Copy link

@Meghdad Meghdad commented Oct 18, 2018

👍

@305curtis

This comment has been minimized.

Copy link

@305curtis 305curtis commented Nov 1, 2018

Dope...thanks for the info..

@shiyaow

This comment has been minimized.

Copy link

@shiyaow shiyaow commented Nov 1, 2018

+1

@YossOviedo

This comment has been minimized.

Copy link

@YossOviedo YossOviedo commented Nov 12, 2018

++ Super handy! Thank you.

@PRASHANTPR7

This comment has been minimized.

Copy link

@PRASHANTPR7 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 kcotias commented Dec 16, 2018

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

@abukharoub

This comment has been minimized.

Copy link

@abukharoub abukharoub commented Dec 20, 2018

Thanks

@shankar524

This comment has been minimized.

Copy link

@shankar524 shankar524 commented Dec 26, 2018

Very helpful, short and sweet review.

@CarGod

This comment has been minimized.

Copy link

@CarGod CarGod commented Dec 26, 2018

Thanks

@aalaap

This comment has been minimized.

Copy link

@aalaap 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 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 ArmandoPrieto commented Jan 18, 2019

+1 Very helpful, simple and well explained!

@leandrorichard

This comment has been minimized.

Copy link

@leandrorichard leandrorichard commented Jan 26, 2019

+1 Thanks!

@caprica-Six

This comment has been minimized.

Copy link

@caprica-Six caprica-Six commented Jan 26, 2019

Great, thank you!

@cmmash

This comment has been minimized.

Copy link

@cmmash 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?

@hdmontero

This comment has been minimized.

Copy link

@hdmontero hdmontero commented Feb 5, 2019

+1 for the simple and clear explanation!

@Gunasekaran92

This comment has been minimized.

Copy link

@Gunasekaran92 Gunasekaran92 commented Feb 18, 2019

Thanks for this update

@marif964

This comment has been minimized.

Copy link

@marif964 marif964 commented Mar 13, 2019

Thanks for the nice recommendations..set well..

@react-ram

This comment has been minimized.

Copy link

@react-ram react-ram commented Mar 24, 2019

nice 👍

@usatosi

This comment has been minimized.

Copy link

@usatosi 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 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 kjm789 commented Apr 13, 2019

👌

@ajaymarathe

This comment has been minimized.

Copy link

@ajaymarathe ajaymarathe commented Apr 27, 2019

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

@shijiatongxue

This comment has been minimized.

Copy link

@shijiatongxue shijiatongxue commented May 6, 2019

Awesome article.

@Krina28

This comment has been minimized.

Copy link

@Krina28 Krina28 commented May 8, 2019

Thank you for easy and simpler explanation.

@oslboreal

This comment has been minimized.

Copy link

@oslboreal oslboreal commented May 27, 2019

Thnx

@hygull

This comment has been minimized.

Copy link

@hygull hygull commented Jun 1, 2019

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

@SinghOmkar

This comment has been minimized.

Copy link

@SinghOmkar SinghOmkar commented Jun 7, 2019

thanks for the simplar explanation.

@chenjianniu

This comment has been minimized.

Copy link

@chenjianniu chenjianniu commented Jun 12, 2019

thanks

@kounkou

This comment has been minimized.

Copy link

@kounkou kounkou commented Jun 16, 2019

Good !

@Ayushmahajan51

This comment has been minimized.

Copy link

@Ayushmahajan51 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 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 sean-ludeman commented Jul 13, 2019

Super simple, very concise. Thank you!

@joe960913

This comment has been minimized.

Copy link

@joe960913 joe960913 commented Jul 18, 2019

Thank you!

@sachinnegi

This comment has been minimized.

Copy link

@sachinnegi sachinnegi commented Jul 18, 2019

Nice short notes.

@ddmy

This comment has been minimized.

Copy link

@ddmy ddmy commented Jul 20, 2019

nice👍,thank you

@jamesalmeida

This comment has been minimized.

Copy link

@jamesalmeida jamesalmeida commented Jul 24, 2019

Helpful tips 👍

@FalsePozitive

This comment has been minimized.

Copy link

@FalsePozitive 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 yashpal-nimesh-au2 commented Jul 31, 2019

Thanks

@lvkins

This comment has been minimized.

Copy link

@lvkins lvkins commented Aug 6, 2019

What a lovely piece of text.

@niceonionslice

This comment has been minimized.

Copy link

@niceonionslice niceonionslice commented Aug 12, 2019

Thanks!

@shankha-das

This comment has been minimized.

Copy link

@shankha-das shankha-das commented Aug 12, 2019

thanks

@kambleaa007

This comment has been minimized.

Copy link

@kambleaa007 kambleaa007 commented Aug 14, 2019

Great Stuffff

@ghost

This comment has been minimized.

Copy link

@ghost ghost 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 hugohoffmann035 commented Aug 21, 2019

Muito bom, me ajudou muito!

@tmndungu

This comment has been minimized.

Copy link

@tmndungu tmndungu commented Aug 31, 2019

Awesome!!

@zhuziyi1989

This comment has been minimized.

Copy link

@zhuziyi1989 zhuziyi1989 commented Sep 28, 2019

It's good.

@Dimitry19

This comment has been minimized.

Copy link

@Dimitry19 Dimitry19 commented Sep 30, 2019

Thanks u !!

@jhonnyRocket

This comment has been minimized.

Copy link

@jhonnyRocket jhonnyRocket commented Nov 10, 2019

It again cleared my confusion

@k-suzuki

This comment has been minimized.

Copy link

@k-suzuki k-suzuki commented Nov 11, 2019

Thank you. I will learn again.

@Npizza

This comment has been minimized.

Copy link

@Npizza Npizza commented Nov 11, 2019

Thank you! This explanation was really helpfull

@chris-melvin

This comment has been minimized.

Copy link

@chris-melvin chris-melvin commented Nov 14, 2019

Thanks

@pitsini

This comment has been minimized.

Copy link

@pitsini pitsini commented Nov 15, 2019

Thanks!

@divineevans

This comment has been minimized.

Copy link

@divineevans divineevans commented Nov 26, 2019

Great info! Thank you

@mprugove

This comment has been minimized.

Copy link

@mprugove mprugove commented Nov 27, 2019

+1 Thanks!

@kambleaa007

This comment has been minimized.

Copy link

@kambleaa007 kambleaa007 commented Nov 27, 2019

+1 Thanks!

Always Dan Buddy

@duTianze

This comment has been minimized.

Copy link

@duTianze duTianze commented Dec 1, 2019

👍

@marin-h

This comment has been minimized.

Copy link

@marin-h marin-h commented Dec 1, 2019

Thanks!

@farjanacan

This comment has been minimized.

Copy link

@farjanacan farjanacan commented Dec 2, 2019

Good read. Thanks!

@sumit3021kumar

This comment has been minimized.

Copy link

@sumit3021kumar sumit3021kumar commented Dec 6, 2019

Thanks

@sanjeev473

This comment has been minimized.

Copy link

@sanjeev473 sanjeev473 commented Jan 14, 2020

Really helpful, Thanks

@GSingh1994

This comment has been minimized.

Copy link

@GSingh1994 GSingh1994 commented Jan 19, 2020

Thank you!!

@mal0312

This comment has been minimized.

Copy link

@mal0312 mal0312 commented Jan 20, 2020

muchas gracias

@colinbut

This comment has been minimized.

Copy link

@colinbut colinbut commented Feb 11, 2020

thanks for the explanation.

@a8568730

This comment has been minimized.

Copy link

@a8568730 a8568730 commented Feb 27, 2020

Thank you. A brief and quick pickup. :)

@rampavan90

This comment has been minimized.

Copy link

@rampavan90 rampavan90 commented Mar 3, 2020

Thank you, Dan!!

@whoismarcode

This comment has been minimized.

Copy link

@whoismarcode whoismarcode commented Mar 3, 2020

Thank you! I've learned these concepts before and now it helped me a lot for a quick review!

@bjnst6

This comment has been minimized.

Copy link

@bjnst6 bjnst6 commented Mar 5, 2020

Thanks for the summary! A note, however, that is appears as if the "Babel REPL with the ES2015 preset" link is broken.

@rbest

This comment has been minimized.

Copy link

@rbest rbest commented Mar 9, 2020

Thanks, Dan. Your efforts are very much appreciated.

@ivandelvaller

This comment has been minimized.

Copy link

@ivandelvaller ivandelvaller commented Apr 17, 2020

Easy and wonderfull.

@FelixYizhu

This comment has been minimized.

Copy link

@FelixYizhu FelixYizhu commented Apr 20, 2020

Nice Explanation, thank you!

@Vlad-Viddi

This comment has been minimized.

Copy link

@Vlad-Viddi Vlad-Viddi commented Apr 22, 2020

спасибо за инфу! респект!

@iemprashant

This comment has been minimized.

Copy link

@iemprashant iemprashant commented Apr 27, 2020

Great article

@pluscai

This comment has been minimized.

Copy link

@pluscai pluscai commented Apr 27, 2020

very nice and considerate !

@amarphule

This comment has been minimized.

Copy link

@amarphule amarphule commented May 8, 2020

Thank you, It's a really useful explanation

@barmao

This comment has been minimized.

Copy link

@barmao barmao commented May 31, 2020

Thank you, this simplifies things.

@cryptshell

This comment has been minimized.

Copy link

@cryptshell cryptshell commented Jun 6, 2020

Thank you for the information!

@afsararavedu

This comment has been minimized.

Copy link

@afsararavedu afsararavedu commented Jun 16, 2020

@mohanramphp Nice Example. on mutability in JavaScript.

@4k45hv3rm4

This comment has been minimized.

Copy link

@4k45hv3rm4 4k45hv3rm4 commented Jul 23, 2020

Thank you for this guide

@Yeapes

This comment has been minimized.

Copy link

@Yeapes Yeapes commented Jul 30, 2020

thanks for helping us.

@asyraf-labs

This comment has been minimized.

Copy link

@asyraf-labs asyraf-labs commented Aug 3, 2020

Awesome explanations

@saadcse35

This comment has been minimized.

Copy link

@saadcse35 saadcse35 commented Aug 15, 2020

thanks a lot for your valuable information.....

@bethuy

This comment has been minimized.

Copy link

@bethuy bethuy commented Aug 17, 2020

Thanks

@Ishtiaq11

This comment has been minimized.

Copy link

@Ishtiaq11 Ishtiaq11 commented Aug 21, 2020

Thanks, very helpful.

@AndersonRamos07

This comment has been minimized.

Copy link

@AndersonRamos07 AndersonRamos07 commented Sep 16, 2020

Thank you for simple explanation about the "Arrow Functions"!

@RidhikGovind

This comment has been minimized.

Copy link

@RidhikGovind RidhikGovind commented Sep 18, 2020

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

I didnt know about this until I read it now ! Thanks for the explanation !

@hrshainik

This comment has been minimized.

Copy link

@hrshainik hrshainik commented Sep 19, 2020

💛

@g1na1011

This comment has been minimized.

Copy link

@g1na1011 g1na1011 commented Sep 21, 2020

👏 Thank you!

@devharishkumar81

This comment has been minimized.

Copy link

@devharishkumar81 devharishkumar81 commented Sep 28, 2020

+1 Thanks !

@ziaul-haque

This comment has been minimized.

Copy link

@ziaul-haque ziaul-haque commented Oct 8, 2020

appreciate the effort and sharing.

@N-Asadnajafi

This comment has been minimized.

Copy link

@N-Asadnajafi N-Asadnajafi commented Oct 26, 2020

Thanks a lot!

@camiblnpa

This comment has been minimized.

Copy link

@camiblnpa camiblnpa commented Oct 29, 2020

Thank you so much for the explanation and the explanations in the comments. This is so useful.

@boddy33

This comment has been minimized.

Copy link

@boddy33 boddy33 commented Nov 9, 2020

Thank you. @gaearon Two links need an update, please check my fork https://gist.github.com/boddy33/b0074de38d6116f42080dc1785eaf0db/revisions

@Steven-zion

This comment has been minimized.

Copy link

@Steven-zion Steven-zion commented Nov 27, 2020

am aware of the let and const but the arrow function seems fun and easy

@Felipeddn

This comment has been minimized.

Copy link

@Felipeddn Felipeddn commented Dec 4, 2020

i am reading from portuguese page and came here from a link, but i dont speak english, i just try, what i do now?

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.