Menu
Reactjs is javascript framework. But a begginer can struggle if they don't have solid javascript knowledge. In this blog, you will know about 11 concepts to understand before learning javascript.

11 Javascript concepts to understand before you learn Reactjs

Reactjs is a javascript framework. But a beginner can struggle if they don't have solid javascript knowledge. In this blog, you will know about 11 concepts to understand before learning javascript.

  • Pass by Value vs Reference: Primitive data like number, boolean, etc. are passed by their value. But non-Primitives like array and object are passed by their memory reference. This is a very important concept of programming. If you don't know about it, you won't be able to write good code.

  • Class & inheritance: Class and inheritance are very concepts of Object-oriented programming. And in React, You will use classes to write components. But it is disappearing because of react hooks. But you might find older codes where classes are used. So, learn it.

  • Spread and Rest operator: Spread and rest operators are very common in reactjs development. If you don't know you will get stuck.

  • Higher-order function and callback: Higher-order functions are the function that takes another function as an argument. And that function that you pass as an argument is called the Callback function. It is a very important concept. In react you will use them. Specially array higher order function. Or more specifically the map higher order function.

  • Asynchronous Javascript: Learning Asynchronous javascript can be time consuming and brain confusing. But it's worth it. Once you learn it, your life will be easier with js.

  • Destructuring: Destructuring simply means pulling your data from an object or array to a separate variable. It is a very common task for react props.

  • Arrow function: An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations. Arrow function makes your code clean. Once you understand it, most of the time you will use this. You will see plenty of code using the arrow function in react.

  • Data fetching: Data fetching is important. Most probably you will need some data from external sources. So you have to know how to fetch data.

  • Module system: It means splitting your code into different parts. You export and import code for code reusability. I believe it is the most common thing in reactjs development.

  • Npm: If you don't know how to use npm or yarn or package.json, then just do it. Without it, you won't even be able to use react locally.

  • This keyword: This 'This' is one of the scariest things of the universe. I still hate 'This'. But you have to understand it. But if you use react hooks then you won't have to worry about it much.

These are the things that I think everyone should learn. You might disagree with me. That's completely fine.

Shameless Plug

Want to create your own blog? Well, I am creating a video series where you will learn about how to create a JAMstack blog with Nextjs and Chakra-UI.

Lessons

Demo

You can demo the website from here

Features

  • Static Blog pages will make the website load faster.
  • Blogs will have code blocks with syntax highlighting and many embed components like youtube videos, GitHub gist, Tweets, and so many other things.
  • Autocomplete search feature for the blog posts.
  • Real-time view counter and so on.

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full-stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project. I am available on Upwork

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Previous PostWhat is Code Splitting?
Next PostTop animation libraries for ReactJS