ES6 and the road to react

UpdatedJuly 22, 2022

Comments (6)

I totally agree with you Rutik Wankhade. Understanding ES6 before delving into React will make it a lot easier to understand.

To be honest, ES6 can seem pretty weird at first but once you understand it, writing code with JavaScript becomes even more interesting.

Rutik Wankhade5y ago

Absolutely.😊

Dany Tulumidis5y ago

Awesome post! I think ES6 is one of the most important JS releases and features are used a ton on a daily basis by many JS developers. Nice Summary!

Rutik Wankhade5y ago

Thanks. I just covered a few main features. There are a lot more.

Shad Mirza5y ago

Good read. "You don't know JS" is definitely on my read list. What other JS books would you recommend to read?

Rutik Wankhade5y ago

Not sure. I just read eloquent javascript which was a good read for beginners. YDKJS series is next.

Shad Mirza5y ago

Rutik Wankhade Read The Pragmatic Programmer too. It's one of the best I have read so far.

hairi vicky5y ago

Mohd Shad Mirza

Awesome post! https://onlines-feedback.club/

Yogesh Chavan5y ago

Here is another one:

https://yogeshchavan.hashnode.dev/master-modern-javascript-skills-with-this-amazing-guide.

Tapas Adhikary5y ago

Good article, informative. Thanks for sharing!

I want to add something(in case someone reading this comment, haha!)

To do react, we probably don't have to worry about things like Promises much as we will hook into the async-await syntax sugar and move on.

However, it is important to know the story behind it. Simply, why do we await twice to get the final JSON from the fetch call? How does the premise play around there? Using aync with redux kind of concept is another area.

That's where the dearth will be seen if the concepts like, Promise is not learned well.

Thanks for your call out about promises. Btw.. I wrote about it here because I have faced that dearth recently in myself and in the correction path :)

Rutik Wankhade5y ago

Thank you so much for sharing your thoughts. Knowing the internals of these concepts and how they work is really important.

Hrithwik Bharadwaj5y ago

Nice article Rutik. Without knowing ES6 concepts individuals will scratch their head understanding concepts in react. Also those books are one of the best. There is also this channel called 'Namaste javascript' . Have a look guys

Shad Mirza5y ago

Thanks for suggesting, will checkout the channel.

Rutik Wankhade5y ago

Thanks Hrithwik Bharadwaj. will check for sure. 👍

Yogesh Chavan5y ago

Hrithwik Bharadwaj You can check out this also. Here, you will find all the ES6 and above features explained in detail.

https://yogeshchavan.hashnode.dev/master-modern-javascript-skills-with-this-amazing-guide.

Rahul5y ago

Best time for this post. Amazing writeup.

Rutik Wankhade5y ago

Thanks.Rahul. keep it up with your posts too. I read them on regular basis. They are concise and to the point.

Rahul5y ago

Omg SURE.Rutik Wankhade

Weekly Summary

Part 3 of 4

I took the challenge of writing a blog every week. I will write about the things I learned throughout the week, the resources I used, the ups and downs, and the whole process of learning.

Up next

Reflection of Week 4 at FullStack Camp

It's been 4 weeks since I joined the FullStackCamp program, an initiative to help students grow and level up their skills. And I can see the difference in the clarity of my thoughts. When you are starting your career, having a good mentor helps a lot...

More from this blog

Dev Retro 2022 - From feeling imposter to feeling confident

2022 was a year full of learnings for me. It was about solving problems, lots of iterations, making solid fundamentals, and growing up as a person. Even though it feels like this year went really fast and I have a very vague memory of it, this is my ...

Jan 4, 20236 min read164

Dev Retro 2022 - From feeling imposter to feeling confident

Say goodbye to boring new tabs

Finally, the wait is over. Last year I built and launched Tabwave, a mindful productivity chrome extension that replaces your browser's new tab. It has been my passion project for a long time. And now it has become even more mindful and beautiful. Af...

Dec 24, 20223 min read97

A beginner's guide to server-side rendering

The modern web has evolved over the years with new tools and technologies. We are introduced to new approaches to rendering websites and apps. With the rise of frameworks like NextJs and Remix, SSR has gained a lot of popularity in the last few years...

Dec 16, 20224 min read178

A beginner's guide to server-side rendering

I built an app to crowdsource internet's best side project ideas

If you are following me for a while you know I love building side projects. And every time I decided to build one, I didn't know how it will turn out in the end. But one thing is for sure, it all started with a half-baked idea. half baked idea? what...

Aug 1, 20226 min read1.5K

I built an app to crowdsource internet's best side project ideas

Building a bucket list ideas API with Hasura and GraphQL

Did you know you can create GraphQL APIs within minutes without writing a single line of code? Well, I didn't. Thanks to the Hasura X Hashnode hackathon. Now I know and so you will. Hi there, In this blog post I will talk about why and how I built a ...

Apr 1, 20224 min read757

Building a bucket list ideas API with Hasura and GraphQL

Rutik Wankhade

29 posts

The thing with JavaScript is that it takes a week to learn the basics but ages to understand it completely. Even though I have worked with JavaScript a lot, I still get stuck and feel uncomfortable sometimes. So this week I decided to dive deep into it.

📔 I don't know Js yet

Tutorials are great but they don't provide a deeper understanding of the language. So I picked a book series called "You don't know Js" by Kyle Simpson. It focuses on the core mechanisms of the JavaScript language. After going through a few chapters I had to say that I don't know Js yet.

screenshot (67).png

Its first edition is free to read on GitHub. And I would highly recommend for anyone who wants to deeply understand JavaScript. Not recommended for complete begineers.

⚛ ES6 and react

If you have spent enough time with JavaScript and want to jump straight to learning react, Wait. Have you learned about ES6? Because If you haven't, you might want to change your mind. Let's see why.

🤷‍♂️ What is ES6 and Why it's important?

ES6 is the 6th version of ECMAScript, (a standardized name for JavaScript) which was released in 2015 with new features and enhancements. And react uses some of its features like classes, modules, destructuring, etc. So if you don't want to scratch your head and wonder what's happening while learning react, Take some time and learn ES6. It will help you understand react better and easily.

I will give you a brief idea about some of its features.

let and const

Earlier we used var for declaring variables which is function scoped, but ES6 introduced two new ways. i.e. let and const which are block-scoped. Anything inside { } is a block. for ex. for loop, if-else.

// value can be changed.
let someVariable = 12; 

// read-only, value cannot be changed
const PI = 3.14;

Template literals

Template literals are another way of creating strings. You can create multiline strings and can embed variables and expression using ${expression} syntax.

let age = 20;
console.log(`Hi, I am Rutik, I am ${age} years old.`)   
// Hi, I am Rutik, I am 20 years old.

Arrow functions

Arrow functions are mainly syntactic sugar for defining function expressions.

// Regular function
function sum (a,b){
return a+b;
}

//Arrow Function
var sum = (a,b) => { return a+b; }

The primary use case of arrow functions is for functions that get applied over and over again to items in a list. For example, if you have an array of values that you want to transform using a map, an arrow function is ideal. But we can't use arrow functions in every situation. There are certain limitations. read more

In arrow functions, the behavior of this is different. Arrow functions do not default this to the window scope, rather they execute in the scope they are created.

Modules

A module is nothing but a JavaScript code written in a separate file. Before ES6 we had to use libraries like CommonJS, requireJS, etc to work with modules. But now with ES6, JavaScript has its own built-in modules. The idea is to access a piece of code, only when needed.

Import and export

If we want something declared in a module to be available somewhere else, we export that module using an export statement. You can export any top-level function, class, var, let, or const.

// utils.js
export const pi = 3.14;
export function add(x, y){
    return x + y;
}

All this exported code will be available where we import it.

// app.js
import {pi, add} from utils;

We will use the same concept while dealing with components in react.

Class

ES6 introduced a new syntax for creating a class.

class Person { 
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }

   sayHi() {
    return ('Hi ! I am ' + this.name + ', I am a ' + this.role);
  }
}

let person1 = new Person("Rutik", "Frontend developer");

person1.sayHi(); 
// returns "Hi ! I am Rutik, I am a Frontend developer"

Destructuring

Destructuring, the name itself suggests breaking down a complex structure into small individual parts. We can break down an array or object into individual variables.

Array Destructuring

let a, b;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

Object Destructuring

const student = {
    firstname: 'Jhon',
    lastname: 'Doe'
};

// Object Destructuring
const { firstname, lastname } = student;

console.log(firstname, lastname); // Jhon Doe

You will use these concepts in useState hook or while sending props to a component in react.

And there are more such features like

promises
default function parameters
rest operator
spread operator
and many more.

A good grasp of these concepts will help you in the early stages of learning react. Next, I started with react fundamentals and brushed up a few basic concepts like components, props, state, etc. I Will talk about it more in the next week. Till then goodbye.

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

Command Palette

Comments (6)

Weekly Summary

Reflection of Week 4 at FullStack Camp

More from this blog

📔 I don't know Js yet

⚛ ES6 and react

🤷‍♂️ What is ES6 and Why it's important?

let and const

Template literals

Arrow functions

Modules

Import and export

Class

Destructuring

Array Destructuring

Object Destructuring