DEV Community

Cover image for JavaScript Basics Before You Learn React

JavaScript Basics Before You Learn React

Nathan Sebhastian on January 14, 2019

In an ideal world, you can learn all about JavaScript and web development before you dive into React. Unfortunately, we live in a not-perfect wor...
Collapse
 
kjessec profile image
Jesse Chung • Edited

Arrow functions, apart from their aesthetics, have this property called lexical scoping. This explains lexical scoping better than I ever will :)

In short, arrow functions follow the scope of the caller's scope, rather than having its own. function() {} functions' scope can change to whatever by calling .bind() - basically how JS prototype works.

Maybe you deliberately omitted this because in React world arrow functions are mostly used for shorter declaration. But hey, I figured the post might give a wrong impression that arrow function is only for cleaner code :P

Short test code:

class MyClass {
  constructor() {
    this.foo = 'foo';
    this.bar = 'bar';

    // `this` is defined
    this.someFunctionThatTakesACallback(() => {
      console.log(this.foo);
    });

    // In the following function's scope, `this` will be undefined
    // to mitigate this, we need to call .bind (essentially what arrow function does)
    this.someFunctionThatTakesACallback(function() {
      console.log(this.foo);
    });

    // forcing function's scope to be `this`
    this.someFunctionThatTakesACallback(function() {
      console.log(this.foo);
    }.bind(this));
  }

  someFunctionThatTakesACallback(callback) {
    callback();
  }
}

new MyClass();

Enter fullscreen mode Exit fullscreen mode


`

Collapse
 
nathansebhastian profile image
Nathan Sebhastian

Ah yes, sorry if I skip the part about this. Thanks for adding it here, Jesse :)

Collapse
 
miguelrodoma95 profile image
Miguel Rodriguez • Edited

Incredibly helpful for someone who's just getting into React and only knows the basics of JavaScript like me. I'm definitely going to keep practicing JS before actually building something with React, and all of these concepts help a lot
Thank you!

Collapse
 
flapstones profile image
David Johnson

'Both declarations are local, meaning if you declare let inside a function scope, you can't call it outside of the function.'

a var declared inside a function is also not global. this is not what is different about let. the difference is that let has block scope for example:

let x = 1;

if (x === 1) {
let x = 2;

console.log(x);
// expected output: 2
}

console.log(x);
// expected output: 1

Collapse
 
nathansebhastian profile image
Nathan Sebhastian

Oh sorry, what I actually meant is block scope not function scope. If you call x outside of the if scope it will return 2 with var. I'll fix that as soon possible. Thanks David :)

Collapse
 
budyk profile image
Budy

yap...its super important to Understand JavaScript Fundamental before using any frameworks. One should learn how JavaScript works, its life cycle, What Prototypal inheritance is, Classical vs Prototypal model, What Closure is etc...

Collapse
 
titungdup profile image
dhondup

Great post Nathan. Easy to understand. Only thing i couldn't get my head around is the Destructuring concept coz i haven't used or heard it before. Hopefully i'll get better understanding after some use.
Thanks.

Collapse
 
nathansebhastian profile image
Nathan Sebhastian • Edited

Thanks dan, don't worry too much about destructuring, in simple application, we used it for shortening the syntax for getting state value only. For example, if you have this state initialized

this.state ={
  email:'',
  username:''
}

Then when you want to get the value, do:

const {email, username} = this.state;

Instead of:

const email = this.state.email;
const username = this.state.username;

Now in my example tutorial, I have also included destructuring assignment into a new variable, like:

const { email:myEmail } = this.state;

But to tell you the truth, I never used this kind of assignment, so just consider it an extra knowledge that might be useful sometime 😆

Collapse
 
alfonsoarrieta profile image
Alfonzo

My friend, hello. You have an error in the section "class inheritance", Because when using extend in the ReactDeveloper class, you should use the constructor and super to pass the "Nath" object as an argument and return the Hello and installReact function.
A exceptión de eso, muy bueno tú post. Muchas gracias.

Collapse
 
franio68 profile image
franio68

Hi Nathan!
Great article. Helps to be focused on the fundamentals for learning React. I'm wondering if it's not necessary any previous knowledge of asynchronous JS, like promises or async/await.
Thanks

Collapse
 
atechnoz profile image
ATechnoz • Edited
Collapse
 
miionu profile image
Rospars Quentin

Thank you for this post! I am actually working on a new web project, and this time I decided to use React instead of JS vanilla. It helped me a lot :D

Collapse
 
nathansebhastian profile image
Nathan Sebhastian

You're welcome Rospars. Glad could help you out. Good luck with your project :)

Collapse
 
violetboralee profile image
Violet.Lee

Could I translate your post into Korean? I'm working as a front-end developer but mainly maintaining the old legacy. Next version would use React. So, I'm studying React.

Collapse
 
nathansebhastian profile image
Nathan Sebhastian

Sure, go ahead

Collapse
 
violetboralee profile image
Violet.Lee

Hi, Sebhastian. I've translated your article in Korean and posted on my Medium story. It became the most famous article among my stories. Thanks :)
medium.com/@violetboralee/react%EB...

Thread Thread
 
nathansebhastian profile image
Nathan Sebhastian

Hi Lee, wow that's great! Your welcome and thanks for translating the article :)

Collapse
 
violetboralee profile image
Violet.Lee

Thanks :)

Collapse
 
sjclemmy profile image
Steve Clements

Great selection of features. Great article! I would add the spread operator as well. It's useful for making shallow copies of arrays and objects.

I've used {...this.props} to pass a copy of props in react without naming them all, and then using destructuring to extract them in the component. See this stackoverflow question for a good description.

Collapse
 
nathansebhastian profile image
Nathan Sebhastian

Ah certainly Steve, spread and rest operator would be a great addition. I'm just afraid the article would be too long when I wrote this. Thanks for your comment :)

Collapse
 
ketanghumatkar profile image
Ketan Ghumatkar

@nathan Thanks for articles.

Can you put some light on below code

import React,  { Component } from 'react';
Enter fullscreen mode Exit fullscreen mode
Collapse
 
atiqulhaque profile image
Md.Atiqul Haque

Good article for the beginner who want to learn reactJS.
Thanks Nathan.

Collapse
 
ketanghumatkar profile image
Ketan Ghumatkar

@nathan Thanks for articles.

Can you put some light on below code

import React,  { Component } from 'react';
Collapse
 
layersofabstraction profile image
Jordan Nash

Thanks for donating your free time buddy.

Collapse
 
agredalex profile image
Alex Ágreda • Edited

Hey, great article, I knew most of this, but the part of modules have clarified me all I didn't have end up understanding.

BTW, I think there is an error here, no?

// in util.js
export default function times(x) {
return x * x;
}
// in app.js
export k from './util.js';
console.log(k(4)); // returns 16

That second export should be an import, shouldn't be?

Collapse
 
nathansebhastian profile image
Nathan Sebhastian

ah yes, thanks for the correction Alex :) glad could help you learn something

Collapse
 
eddsaura profile image
Jose E Saura

Hey thanks, I just have to jump right into React, and this was useful, although you come across with it daily you don't think the whys sometimes...

Thanks again.

Collapse
 
lysofdev profile image
Esteban Hernández

Great post!

I'd like to also mention .forEach() and .reduce() which are not quite as commonly used as .map() and .filter() but still worth noting. :)

Collapse
 
mikaeljansson profile image
Mikael Jansson

Thank you Nathan for a great and informative post

Collapse
 
abhishekpardeshi profile image
Abhishek Pardeshi

I am begginer to javascript and know some basics of it so from where should I start to learn react native. I mean prerequisite.