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

commented Jun 23, 2018

+1 for simple explanation for Arrow function. thanks!

@VeromcaChang

This comment has been minimized.

Copy link

commented Jul 4, 2018

This article is very considerate!

@Rathilion

This comment has been minimized.

Copy link

commented Jul 8, 2018

Thank you for information !!

@bamoha

This comment has been minimized.

Copy link

commented Jul 9, 2018

This is very explanatory, THANK YOU!

@f4bo

This comment has been minimized.

Copy link

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

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

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

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

commented Jul 26, 2018

it's good!

@deryda

This comment has been minimized.

Copy link

commented Aug 7, 2018

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

@mossiiiiiii

This comment has been minimized.

Copy link

commented Aug 26, 2018

thanks for summary and useful article bro !

@mixj93

This comment has been minimized.

Copy link

commented Aug 28, 2018

Thanks!

@gajulamahesh8143

This comment has been minimized.

Copy link

commented Sep 5, 2018

thanks you

@gnprice

This comment has been minimized.

Copy link

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

commented Sep 7, 2018

+1

@lokesh1729

This comment has been minimized.

Copy link

commented Sep 12, 2018

+1

@ademircarvalhojr

This comment has been minimized.

Copy link

commented Sep 22, 2018

Thanks!

@Meghdad

This comment has been minimized.

Copy link

commented Oct 18, 2018

👍

@305curtis

This comment has been minimized.

Copy link

commented Nov 1, 2018

Dope...thanks for the info..

@shiyaow

This comment has been minimized.

Copy link

commented Nov 1, 2018

+1

@YossOviedo

This comment has been minimized.

Copy link

commented Nov 12, 2018

++ Super handy! Thank you.

@PRASHANTPR7

This comment has been minimized.

Copy link

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

commented Dec 16, 2018

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

@abukharoub

This comment has been minimized.

Copy link

commented Dec 20, 2018

Thanks

@shankar524

This comment has been minimized.

Copy link

commented Dec 26, 2018

Very helpful, short and sweet review.

@CarGod

This comment has been minimized.

Copy link

commented Dec 26, 2018

Thanks

@aalaap

This comment has been minimized.

Copy link

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

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

commented Jan 18, 2019

+1 Very helpful, simple and well explained!

@leandrorichard

This comment has been minimized.

Copy link

commented Jan 26, 2019

+1 Thanks!

@caprica-Six

This comment has been minimized.

Copy link

commented Jan 26, 2019

Great, thank you!

@cmmash

This comment has been minimized.

Copy link

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

commented Feb 5, 2019

+1 for the simple and clear explanation!

@Gunasekaran92

This comment has been minimized.

Copy link

commented Feb 18, 2019

Thanks for this update

@marif964

This comment has been minimized.

Copy link

commented Mar 13, 2019

Thanks for the nice recommendations..set well..

@react-ram

This comment has been minimized.

Copy link

commented Mar 24, 2019

nice 👍

@usatosi

This comment has been minimized.

Copy link

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

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

commented Apr 13, 2019

👌

@ajaymarathe

This comment has been minimized.

Copy link

commented Apr 27, 2019

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

@shijiatongxue

This comment has been minimized.

Copy link

commented May 6, 2019

Awesome article.

@Krina28

This comment has been minimized.

Copy link

commented May 8, 2019

Thank you for easy and simpler explanation.

@oslboreal

This comment has been minimized.

Copy link

commented May 27, 2019

Thnx

@hygull

This comment has been minimized.

Copy link

commented Jun 1, 2019

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

@SinghOmkar

This comment has been minimized.

Copy link

commented Jun 7, 2019

thanks for the simplar explanation.

@chenjianniu

This comment has been minimized.

Copy link

commented Jun 12, 2019

thanks

@kounkou

This comment has been minimized.

Copy link

commented Jun 16, 2019

Good !

@Ayushmahajan51

This comment has been minimized.

Copy link

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

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

commented Jul 13, 2019

Super simple, very concise. Thank you!

@joe960913

This comment has been minimized.

Copy link

commented Jul 18, 2019

Thank you!

@sachinnegi

This comment has been minimized.

Copy link

commented Jul 18, 2019

Nice short notes.

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.