Introduction

Okay so apparently gone are the days when vanilla JS was the coolest kid on the block but even if times have changed this piece of code right here, still appeals well to some chosen one's among us.

var button = document.querySelector('.btn')

Now for some of you fundamental enthusiasts, the topic of this blog and even content for that matter may be absurd to begin with and I absolutely get the notion.

I mean who are these people, where do they come from?

Learning react without fully understanding JavaScript, HUH, well good luck with that endeavor!

just to make things clear, I have always believed in writing for problems that are unique to me and having spent almost 3 years entangled between DOM methods and the normal functional programming, even I have at times played with the fire myself of going ahead and learning react, because why not?

So let me help those folks who want to be the non-fundamentalists as I once was, and project my 2 cents about how much JS was in reality useful to me while building more than 20+ react projects last year.

Let's get started

Let's handpick from the fundamental concept basket and talk with respect to those concepts only for the context of this blog.

ES6+

• Arrow Functions
• Destructuring
• let/cost variables
• Rest Parameters
• Modules
• Shorthand Object
• Computed Property Names
• Import/Export

Now I will not waste time trying to sound cool in my writing, let's get done with this as quickly as we can. I am not writing with the intention of teaching these topics, it's a projection of concepts that were particularly useful to me.(and remember it's totally my personal opinion, Internet Invaders please🥺🥺 I am on your side🤨)

Arrow Functions

let sum = (a, b) => a + b;

Fat arrow functions are totally useful, I use them all the time, I can't remember the last time I used function keyword while defining a function and it's absolutely okay to avoid those sage syntaxes, just remember the tiny details (actually one) that it doesn't have the lexical this object.

People in the react ecosystem use fat arrow functions almost all the time, apparently if you want to be the cool kid, get used to it (Just Kidding, you guys).

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello') :
  () => alert("Greetings!");

welcome();

Another cool thing is the use of ternary operators, in the code and I had a hard time adjusting to this syntax, but irrespective of the trivialness of the syntax, I can't stress more on the fact that these are used almost every time, every codebase you see or tutorial you watch will have used ternary operator somewhere. So from my experience understanding these are a must!

Destructuring

Now destructuring is perhaps one of the most important concepts that you need to carry with yourself while shifting to react, so don't even think about missing these, I will be highlighting some of the most useful one's here but still do your fair share of work and be updated on these.

// second element is not needed
let [firstName, , title] = ["Aman", "Tulsyan", "Developer", "of React"];

alert( title ); // Developer

This is a slightly uncommon case but you might need it while destructuring array of objects in a shopping cart or user posts data sometimes.

let guest = "Jane";
let admin = "Pete";

// Let's swap the values: make guest=Pete, admin=Jane
[guest, admin] = [admin, guest];

Oftentimes your logic will require you to swap values between two variables, this method will come handy those times.

Object Destructuring

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

Array destructuring methods are useful but not as useful as object destructuring methods, while building applications you will mostly require properties within an object instead of the entire object itself especially with react applications, for example:

const SomeComponent = (props) => {
    console.log(props.children)
}

const SomeComponent = ({children}) => {
    console.log(children)
}

even

evt.target.value

can be written as

const {value} = evt.target

let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

It may also happen that while building your application some values are needed to be added, in such cases also object destructuring comes in handy, so I would say that object destructuring in general is a very important topic for react.

let/cost variables

To be honestly speaking while building applications I don't care much about whether I am using let or const, I am more of a const kind of guy just like Ben.

While I was starting with my development journey I was unaware of the basics related to scoping and the infamous tdz(Temporal Dead Zone) but nonetheless It is never a hurdle, provided your goal is to ship(efficiency and good software design goes into dustbin).

Rest Parameters

Now rest parameters are not the coolest kids on the block but they definitely have some use cases which makes the cool kid depend on them, let's see what those traits are

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(1, ...arr1, 2, ...arr2, 25) );

This right here is very important peeps, and I mean it!

Having personally struggled with the use case of this particular syntax, I can surely say that you will see this in your journey, but how?

Let me..

Often times we have to update the state variable in react keeping all the previous items intact, and at that time, this piece of code right here my friend, will save you from the invasion of the logical errors.

setArray((prev) => [...prev, obj]);

setArray((prev) => [...prev, {}]);

So I will say that rest parameters are also probably important going through them should be a starter before jumping straight to react.

Modules

I will come straight to the point with this, up until now I didn't even properly know what were modules in vanilla js but again this is my own personal experience and I am not that experienced as a developer so don't hang on my words do your own homework, If I were you I would probably talk to some senior engineers about the use of it, to gain more clear perspective, sorry If I couldn't be of any help to you here.

Shorthand Object

It is nothing but some modern ES6+ syntaxes which are actually very useful while writing programs and you will also see them quite a lot while making user objects or shopping cart objects, for example

let a = 'foo',
    b = 42,
    c = {};

let o = {
  a: a,
  b: b,
  c: c
}

can also be written as:

let o = {a, b, c}

These are just syntactical sugars, the more you know the lesser your code and these are used quite a lot in the react ecosystem.

Computed Property Names

I haven't used computed property names much in my building journey so currently inexperienced to project any views on these. All I would say is, it will be a good thing to just go through it

Import/Export

Imports/Exports are a common thing in react so I would consider it important to understand when to use what, still it's a preferential thing and people have their sides for these, for me I don't really care about it that much I was just acquainted with the basic syntax when I was starting.

End

With everything being said and projected, here are my two cents on this subject matter it's completely fine to jump directly to react without going through vanilla js or with just the bare bones of syntax, people have done it in the past and are still doing it and it's working fine for them but I'd be lying here if I told you I didn't go through a fair share of fundamentals before starting up react, I find it absolutely necessary to be well versed with fundamentals and am a firm believer of first principles thinking. I like to classify myself as a builder and aspire to become a better engineer in general therefore I am a pro fundamentalists but hey that's just my view.

I have tried learning react many times without the fundamentals of vanilla js but found myself entangled every time I started hence I personally would never recommend learning react without JavaScript.

One more thing that I would like to add here is that, even though it may seem like not much JavaScript is needed but that was not the case for me I have been stuck with many doubts and the fundamentals were very handy at that time.

I would love your feedback on this blog even if you absolutely disagree with me do let me know in the comments section or reach out to me on twitter :)

Thank you for coming this far, extra brownie points for you awesome folks 😄