How many of these common mistakes are you making in your React journey?

A thread on the top 10 React mistakes people make when learning React

(including 3 personal mistakes I've committed)

Read below! 👇 1. Skipping the basics:

This is a general tip that applies to things beyond React as well.

The progressive overload approach works well in React & if you skip A, you won't understand B fully.

You'd feel you do, but you really won't.

Better spend time mastering it early on!

"HTML is for newbies"

It is surprising how many people think "HTML is beneath them" and don't use its full capability.

Here are 10 HTML attributes to unleash the full power of HTML! 1. Hidden:

This attribute, as the name suggests, lets you hide elements from being rendered on the client screen.

No longer, do you need to fiddle with 'display: hidden' in CSS to hide something anymore.

ChatGPT has revolutionized the world.

And there's no reason why we web developers should not benefit.

That's why today, I'm sharing 10 ChatGPT prompts that web developers can use to make their lives easy! 👇 1. Code Debugging Assistance:

🐛 "Hey ChatGPT, I'm struggling with a bug in my code. Can you help me identify and fix it? Here's the relevant code snippet: <add code snippet>."

JavaScript powers unlocked! 🔓🧙‍♂️

Ever since I started learning JS, I've read code written by seniors.

Reflecting on my code, I could see that my code lacked finesse.

I started learning & using techniques that made it 'smarter'.

Here are 5 tips I wish I'd known 👇 First, let me clarify that I'm in no way suggesting that these should be used all the time and if you aren't using them, you're lacking in any sense.

This is just a reflection of introspection & I'm learning as well so I'm not an expert by any means.

Let's begin now:

There's a world beyond React

Let's dive into it! 👇 While React has revolutionized the way we build user interfaces, it's always good to explore other options.

Let's take a look at some noteworthy frameworks in this thread.

Javascript mastery without making rookie mistakes is possible.

Here's how you do it in 5 steps as a beginner👇 1. Underestimating the importance of fundamentals:

Many devs rush into learning frameworks without understanding the fundamentals first.

This is a grave mistake that will haunt you.

Spend time learning the basics and you'll be surprised how fast you progress.

🏗️

Javascript one-liners that will save you 100s of hours.

Do more, with less code! 1. Use template literals for string concatenation:

Javascript is a vast language.

It takes a lot of difficulty to master it.

Here are 10 books to make it easier! 1. JavaScript: The Good Parts by Douglas Crockford

As the name suggests, this is a book that focuses on the best parts of Javascript.

It covers the essential concepts without the unnecessary ones.

🔗 amazon.com/JavaScript-Goo…

Javascript is the language of the web.

Learn it well and you'll have a thriving tech career.

Here are 10 courses to help: 1. JavaScript by Pluralsight

This course has been designed to get you up and running with Javascript quickly.

It is a great one to get started with

Link: pluralsight.com/courses/javasc…

Javascript is a vast language with many concepts to learn.

But you learn it better by building projects.

Here are some projects you can try: 1. A Responsive website:

This sounds cliched I know but there's a reason behind it.

This is almost a must-have in your portfolio.

💡 You can take it further by incorporating parallax scrolling, micro-animations and 3D illustrations.

Difficulty: 2/5

According to Netcraft, the internet has over 1,800,000,000 websites

But most aren't useful for web developers.

Here are 10 websites that actually are: 1. Frontend Mentor

It has a variety of real-world design challenges for web developers to work on.

They provide detailed designs, style guides & assets for each challenge too.

Best for: Front-end devs looking to improve their design skills.

🔗 frontendmentor.io

📌 Object Oriented Programming is used in big projects with a large codebase.

Here's the second pillar of OOP in Javascript, explained in easily digestible language.

A thread on Abstraction 🧵 🌟 Abstraction is one of the four fundamental pillars of OOP (Object Oriented Programming).

🎁 It basically means hiding out unnecessary details and showing just what's necessary.

Let's take an example to understand it better...👇

📌 Object Oriented Programming is used in big projects with a large codebase.

Here's the first pillar of OOP in Javascript, explained in easily digestible language.

A thread 🧵 🙅 In non-OOP (Object Oriented Programming) languages, we've data in variables and functions that operate on them.

🥲 There isn't anything wrong with it till the code base is small.

🥲 However, things become difficult when the codebase becomes large.

Async and await are powerful tools in the arsenal of any JavaScript developer.

But even experienced developers can struggle with these concepts.

Here's a simple explanation: 👉 Async keyword:

This keyword tells Javascript that the function being declared is an async one.

It is usually paired with the await keyword (inside the function)

The use of the async keyword means that the function always returns a promise.

Are you a Web Developer?

Is keeping up with rapidly changing technologies hard? 🤔

Don’t worry!

Here's a collection of some of the top five cheat sheets to master web development! 1. CSS cheat sheet

This is the best CSS cheat sheet you'll find. It covers all aspects of CSS from flexbox to positioning to animations.

What I like about this website is that it has illustrations to demonstrate the properties being discussed.

🔗 cssreference.io

Mastering Javascript is difficult but it doesn't have to be!

🧵 10 FREE resources for you: 1. Eloquent Javascript:

If there's one book, you absolutely must read in your Javascript journey, it is this one.

In fact, it is one of those books that requires you to go through it multiple times in order to fully comprehend it.

Find it here: eloquentjavascript.net

Javascript explained:

findLast() and findLastIndexOf() array methods! The findLast and findLastIndexOf methods are used to search an array for the first element that satisfies a specific condition & return its value or index, respectively.

In this thread, we'll discuss these methods in more detail, code examples and their use cases.

Javascript explained!

indexOf and findIndexOf methods in Arrays Hey folks, in today's thread, we'll take a look at two prominent array methods in Javascript - find and findIndexOf.

These are two of the most important array methods used to search an array.

Let's take a deep dive:

Javascript explained:

splice() method in arrays! 👋 Hey friends, today let's talk about one of the lesser-known methods of manipulating arrays in JavaScript - array .splice()

So what is .splice()?

Simply put, it's a method that allows us to add or remove elements from an array.

Javascript explained:

map() method in Arrays 🤔 Are you tired of writing long loops to modify each element of an array?

With Array. map(), you can now do it with just a few lines of code!

Javascript explained:

reduce() method in Arrays! If you're a JavaScript developer, you've likely come across the reduce() method of arrays at some point.

But do you know how to use it effectively?

Let's explore what it does and how it works!