JavaScript concepts you need to know before getting into React⬇️

My 8 handmade sketch notes you won't want to miss (learn web development for free):

1. What is semantic HTML

2. CSS Positioning

3. CSS Box-model

4. JavaScript Array Methods

Some of my handmade JavaScript notes and cheat sheets that can help you 🧵👇

1. JavaScript Function Anatomy

2. JavaScript Arrow Function

3. JavaScript Array Methods

4. JavaScript Date Methods

Top 10 websites to learn web development for FREE 👇

1. sololearn .com
2. freecodecamp .org
3. programiz .com
4. upskillcourses .com
5. geeksforgeeks .org
6. studytonight .com
7. hackerrank .com
8. codecademy .com
9. codementor .io
10. bitdegree .org

React Hooks are the functions which "hook into" React state and lifecycle features from function components. Hooks allows you to manipulate state and other React feature without writing a class. Let's talk about widely used hook

useEffect hook at a glance 🧵👇🏻

useEffect hook is the heart of React functional components

If you're familiar with class components then you might know that we have various lifecycle methods but in functional components, we don't have any lifecycle methods. Instead we have a powerful hook called useEffect

By using useEffect, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our “effect”), and call it later after performing the DOM updates

So let's start by understanding the syntax first

3/15

useEffect take two parameters, first is a function and second is an array.

The function inside the useEffect will run every single time component re-render. Consider this piece of code and check the output in next tweet

{ 4 / 15 }

As you can see in the output the function is executed every single time my component re-render

{ 5 / 15 }