• FrontendJoy
  • Posts
  • Struggling to Learn React Or Any JavaScript Framework? Here are 7 Mistakes Holding You Back (And What To Do Instead) 💪🎉

Struggling to Learn React Or Any JavaScript Framework? Here are 7 Mistakes Holding You Back (And What To Do Instead) 💪🎉

Author

Ndeye Fatou Diop
February 07, 2024

Struggling to learn React or any other JS framework?

If so, you're not alone.

You probably used every online resource, read countless blog posts, and watched hundreds of YouTube tutorials. And yet, nada 🤷‍♂️.

At this point, you're probably thinking, "Why can't I grasp this? Everyone else seems to get it. Maybe I should quit."

But let me tell you something: it's okay to feel overwhelmed. I've been there, and so have many others.

Here's the good news: it doesn't have to stay this way🌟.

Just avoid the 7 mistakes described in this article and apply the shared strategies.

Ready? Let's get started!

Mistake #1: You don't have the fundamentals.

Maybe you're like me.

You completed JavaScript projects that required a basic understanding of HTML, CSS, and JavaScript. Fueled by this false confidence, you decided to learn React, Vue, or Angular,...

But, you quickly got stuck, and progress was non-existent.

I felt that way while learning React since I was clueless about JavaScript concepts like destructuring, async/await, or "this" binding 😓.

As a result,

  • I couldn't remember the syntax since I didn't understand it.

  • Debugging was like searching for a needle in a haystack. The line between JavaScript and React issues was blurry, making it impossible to google the correct terms.

If that rings a bell, here's something to cheer you up: I eventually mastered React thanks to the following 3 strategies.

Strategy #1: Master the Basics of JavaScript

Remember the confusion I described earlier?

Well, it all boiled down to not having a firm grasp of HTML, CSS, and JavaScript.

So, make sure you're comfortable with those before continuing your React journey.

Here are some valuable resources:

I also highly recommend FrontendMasters!

Strategy #2: Understand the library/framework building blocks

Let's take React as an example.

React is about reusable components. Unfortunately, these can appear incredibly tricky for a newbie: the syntax may seem strange, the mechanisms unclear, etc. However, comprehending them is critical.

Here's how:

  1. Understand functional components: Try creating a few simple ones yourself. Find some examples here.

  2. Learn about props: Props allow data to move between components. Experiment by making a parent component that passes data to a child component. Find some examples here.

  3. Dive into the state: State allows components to track changing data. Study how to set an initial state, how to update it, and see how those changes make the components re-render. Read more about the state here.

  4. Unpack a component lifecycle: Know when a component re-renders, mounts, unmounts, etc. Understand the differences between each stage. This will boost your debugging skills.

  5. Play with effects and hooks: Hooks are special functions that let you "hook into" React features. Learn more about them here.

Once you've mastered these, you can consider advanced topics like context, refs, etc.

💡 Tip: I highly recommend the book Advanced React. Understanding React deeply will help you debug issues faster.

Strategy #3: Use an online code editor

Don't use your local code editor!

Although many people recommend installing the framework/library on your computer, avoid it as a beginner.

Why? Because local development can be a nightmare:

  • You need to deal with bundlers, a terminal, etc.

  • The setup can be challenging. For example, a tutorial that's a breeze for Mac users might not work for Windows ones.

  • Replicating your project on another computer could be difficult. This is incredibly annoying when the person helping you cannot reproduce the project.

The alternative?

Use online code editors such as Codesandbox or Stackblitz. They let you focus on writing code rather than dealing with local environment complexities.

💡 Side note

If you still want to work locally, learn a few concepts first:

Npm packages: Know how to manage them. Here is a guide that can help.

Terminal: Learn how to use it and the most valuable commands. Here is a comprehensive guide.

  • Transpilers and bundlers: Understand why you need them. Learn about transpilers here, and for bundlers, check out this link here.

Finally, you can leverage tools like Vite to set up your project effortlessly.

Mistake #2: You are stuck in tutorial hell

We've all been there.

You successfully follow a tutorial but can't remember anything once done.

Feeling frustrated, you tell yourself that rewatching the tutorial might help. So you rewatch it again and again. Eventually, after several reruns and no improvements, you abandon 🤷‍♀️.

At this point, you may try your luck with a different one. But the cycle repeats - initial confidence overtaken by the soul-crushing realization that, once again, you've retained nothing.

Alternatively, you may be hopping from one tutorial to another. You justify this by thinking, "I need this last concept for my project," or "That other tutorial wasn't clear enough."

These scenarios describe "tutorial hell," a state where self-learners endlessly consume tutorials without application.

So, what's the solution?

Simply put, you must escape from it because:

  • You aren't making any meaningful progress.

  • Your procrastination increases with every new tutorial followed.

  • You risk getting bored since all tutorials look alike after a certain point.

The following 3 strategies will help you escape.

Strategy #1: Build Projects

This is a must.

You can either find project ideas online or come up with your own. Building projects will solidify your understanding of concepts, help you identify knowledge gaps, and, most importantly, boost your confidence.

You can find some on platforms like:

Tips to get started

  • Start simple: Begin with the most straightforward project to build confidence.

  • Choose Meaningful Projects: Privilege projects that are meaningful to you. In fact, the more invested you are in a project, the easier it is to stay motivated. For example, when I shifted from tackling random projects (and failing to complete them) to projects that mattered to me (e.g., a personal app or a contribution at work), I found it easier to persist, learn effectively, and see progress.

Strategy #2: Teach

Ever explained a complex concept to a friend?

If so, you'd know it deepens your understanding and exposes knowledge gaps.

You can apply this insight to your Front-End Developer journey and use teaching to solidify your learning.

So share your knowledge with friends on social media (e.g., Twitter, Reddit) or in developer communities such as this one.

Strategy #3: Find an accountability partner

"Tutorial hell" often impacts self-learners because there are no teachers/schools to keep them on track.

To overcome this issue, find an accountability partner. This could be a friend, a family member, or a colleague. Regular check-ins with this person can create a sense of classroom-like accountability.

With someone monitoring your progress, you will feel more motivated to deliver results, helping you escape.

Mistake #3. You Jump Between Frameworks (React, Angular, Vue…)

When I was struggling to learn React, I would switch back and forth between it and Angular, which only led to more frustration.

Are you also guilty of this? Switching constantly to another framework/library only to discover that the grass isn't always greener.

If yes, please STOP.

Pick one library or framework (React, Angular, Vue, etc.) and commit to it using the following 5 strategies 👇.

Strategy #1: Take Social Media Recommendations with a Grain of Salt

Platforms like X/Twitter are great for networking, gaining inspiration, and staying updated. However, they also flood you with information about new frameworks, trying to convince you to abandon your current one. As a beginner, resist the urge to switch.

Strategy #2: Pick a Well-Established Library/Framework

Not all frameworks are created equal. They differ in structure, usage, and, crucially, community support. As a newcomer, you don't want to invest in a new framework only to find no help online.

Choose a well-established library/framework like React, Angular, or Vue. They have robust communities, making finding assistance and resources easier.

Strategy #3: Focus on Your Desired Outcome

Your "desired outcome" is the primary goal you wish to achieve with your learning, such as landing a job, building a project, etc.

The framework you choose should align with this goal. For instance, if you're applying for jobs, check their prerequisites and pick the most in-demand library/framework.

Strategy #4: Try out Different Ones

If you're still uncertain about which library/framework to commit to, give several of them a short trial. Then, choose the one you enjoy most. After all, it's easier to persevere with something you like.

Strategy #5: Join the Library/Framework Community

This strengthens your connection with the tool and helps you stay updated, find help, and learn handy tips. Here are some community links:

Mistake #4. You are learning too many concepts at once

Are you trying to learn Redux, React-Router, or Typescript while learning React?

If so, then you have made the same mistake that I did.

Learning one difficult concept is hard. Learning many at the same time? Extra hard. You have to understand each one individually and then how they interact.

Additionally, even if you succeed, you risk assuming that some tools are mandatory. For instance, you may believe that Redux is an obligatory companion to React.

In our defense, it's easy to fall into this trap for 3 reasons.

Three reasons why we fall into this trap

Reason #1: Online Courses Marketing

Many online courses teach extra concepts with React to justify their price. By doing this, they inaccurately suggest that all these concepts are essential for using React effectively.

Reason #2: Non-Beginner-Friendly Recommendations for Installing React

Unfortunately, many suggested approaches for installing React require understanding additional concepts.

Even the React team recommends starting React projects with frameworks like Next.js.

While these are excellent, troubleshooting can become a nightmare due to numerous concepts in play: server components, bundlers, etc.

Reason #3: Fear of Missing Out (FOMO)

The fear of falling behind or the desire to maximize your job search chances can push you to learn multiple concepts simultaneously.

Unfortunately, this tends to slow your progress rather than accelerate it.

Three-Step Plan To Learn the Proper Way

Step #1: Study with "pure" resources

Let's take React as an example again.

As I mentioned earlier, many React courses are bloated. So, pick one that will teach just React.

You can use any of the following resources :

Step #2: Choose the lowest lift way to add React to your project

Pick the simplest way to set up a project: online editors such as CodeSandbox or Stackblitz. They allow you to focus on React by providing ready-to-use projects.

Step #3: Introduce Concepts One by One

Once comfortable with your library/framework of choice, introduce new technologies one at a time (e.g., Typescript, Redux, etc.). This makes it easier to understand the unique benefits of each one.

If you're looking for a platform to guide you through this process, I recommend Frontend Masters again.

Mistake #5. You don't understand the problem solved by JavaScript libraries or frameworks

Imagine signing up for a marathon because your friends did without understanding its purpose.

The journey, including the preparation and the actual race, will likely be more challenging as you lack a personal connection to the finish line.

The same goes for learning a library/framework without understanding the problems it solves. If you've never encountered performance, maintainability, scalability, or state management issues with Vanilla JS, it's hard to stay motivated. In fact, the benefits of your suffering are unclear.

Two-step plan to overcome this issue

Step #1: Build a complex project with Vanilla JS

Choose a project complex (but not so much as to deter you from starting) and build it using only Vanilla JS. You can find some examples here.

Step #2: Recreate the same project with React or your framework of choice

Now, rebuild the same project with your chosen tool. This will help you:

  • see how more straightforward it is to build with that tool (hopefully)

  • compare the performance of a Vanilla JS project and a library/framework one

Mistake #6. You suffer from severe impostor syndrome - deep down, you think this is not for you

Do you hear that nagging voice, too?

That voice telling you that React isn't your thing? Or that you're not made for Frontend development?

If so, you're not alone.

Most developers, including myself, experience this.

Frontend development moves at such a fast pace that it's quickly overwhelming. However, it's one thing to have impostor syndrome and another to have a debilitating one. The latter paralyzes and prevents you from trying new things.

If you're struggling with it, GET RID OF IT.

You don't need to eliminate your impostor syndrome completely (if you know how to, please share 😉); instead, you must keep it manageable. Otherwise, thoughts like "I don't have what it takes" and "I'm not good enough to learn this" will cloud your mind, making it harder to understand and retain anything.

Five Tactics To Keep Your Impostor Syndrome At Bay

Overcoming impostor syndrome may take some time. But the following 5 tactics will help:

Tactic #1: Measure your progress

Regularly track and review your progress - concepts you've learned, projects you've built, bugs you've solved. This will boost your confidence.

You can leverage any of the following Notion templates below to track your progress 👇:

Tactic #2: Build real-world projects

Building and seeing a project go live can be a fantastic morale booster. So, build any project, make it public, and share it with family, friends, and online communities.

Tactic #3: Find some help

Impostor syndrome feels lonely.

However, many in the dev community grapple with it.

So don't hesitate to join a community like (dev.to, Hashnode or Reddit). You can ask for help and meet people experiencing the same issue.

Tactic #4: Choose projects that match your skill level

Don't attempt to build something like a YouTube clone when you're just starting.

Instead, assess your current level and choose a suitable project. If you're eager to tackle more complex projects, consider some great YouTube tutorials like the ones from Javascript Mastery.

Tactic #5: Mentor others

You may think, "I'm a new developer. How can I mentor anyone?".

Trust me, there's always someone you can help: either a friend, family member, or random person online (e.g., Reddit channels like r/learnjavascript, r/learnreact have constant new learners asking for help).

It's a rewarding experience and gives meaning to your journey.

Mistake #7: You are learning with the wrong format.

Trying new learning resources (e.g., Udemy, FreeCodeCamp, The Odin Project,...) is like trying on clothes. Some resources will fit you well and flatter you, while others won't.

There's no one-size-fits-all resource. What works great for one person may not work for you. The key is to pick one that suits your learning style and your specific needs at the time.

This realization profoundly influenced my journey. In fact, initially, I struggled to connect with learning platforms like FreeCodeCamp and Treehouse. I thought I was the problem since everyone loved these resources.

However, everything changed when I stumbled upon the 'You Don't Know JS' book series. They made Javascript click for me. This discovery encouraged me to explore other resources, further fueling my progress.

So, don't force yourself if you're struggling with a format. Try different ones and opt for the most comfortable.

Mastering React or any JS framework may seem like an insurmountable mountain. It might feel like everyone else is sprinting uphill while you're stuck at the bottom.

But here's the thing. You've got what it takes. You may be just guilty of one of the mistakes mentioned in this post.

The good news? You now have multiple strategies to deal with them and ace React.

If you're unsure where to start, pick the mistake most holding you back and combat it using any of the strategies shared. And remember, it's about progress, not perfection.

So, don't stop. Keep learning. Keep growing. Keep coding. Before you know it, React won't just be a tool; it'll be your best friend.

Thank you for reading this post 🙏.

Leave a comment 📩 to let me know what you think.

And Don't forget to Drop a "💖🦄🔥".

If you like articles like this, you’ll love the daily tips I share on X/Twitter.

Reply

or to participate.