11 JavaScript concepts to understand before you learn React

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.

By the way, this blog is originally published on cules coding website. . I would be glad if you give it a visit.

• 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 an alternative to the traditional function. 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. So, do you know all of the concepts that I have talked about? Let me know in the comment section.

Shameless Plug

I have made few project based videos with vanilla HTML, CSS, and JavaScript.

You will learn about:

• Javascript intersection observer to add cool effects
• DOM manipulation
• Aligning elements with CSS positions.
• How to make responsive websites.

These will be great projects to brush up on your front end skills.

If you are interested you can check the videos.

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.

See my work from here

Contacts

• Email: [email protected]
• linkedin: @thatanjan
• portfolio: anjan
• Github: @thatanjan
• Instagram (personal): @thatanjan
• Instagram (youtube channel): @thatanjan
• twitter: @thatanjan

Videos might you might want to watch:

Blogs you might want to read:

• Eslint, prettier setup with TypeScript and react
• What is Client-Side Rendering?
• What is Server Side Rendering?
• Everything you need to know about tree data structure
• 13 reasons why you should use Nextjs
• Beginners guide to quantum computers