Getting frustrated with React, what am I doing wrong?

#1

Recently I’ve finished the React lessons on freecodecamp and have been doing the frond end projects. Unfortunately, with every project I’ve done so far I had some really big difficulties and consequently frustrations. For example, the quote machine project(i’ve even done a topic on this one) I’ve had a twitter button that would not render properly. I googled for hours trying to make it work, when it was a matter of a simple copy-paste of a link source in a regular non-react project. I finally gave up and customized the button manually. Another time, I made the mistake of using a non-arrow function in the body of a component. Apparently, using non-arrow functions in the component body deletes the reference from ‘this’ and can’t call functions (unless you bind, I guess). After spending an hour trying to fix this, I was fuming, so I decided to take a break. On the third project, I had to trigger a soundfile to play, googling revealed a library called ‘react-sound’. I downloaded the library, made sure it was installed and used the documentation code. Of course I couldn’t make it work, read the documentation over and over figuring out what’s wrong but I couldn’t crack it. Finally, I used Ref to make the sound play.

I don’t want to sound too whiny about this, but it seems to me that React just over complicates things over regular Javascript. I’m not sure how to tackle this, as either my react lessons were not thorough enough or my problem-solving skills are severely lacking. Should I take a different approach? Where else should I study? Does anyone else confront these problems and how did they fix them? I really don’t wanna drop react because I’m commited to it but it seems I’m just banging heads on walls. Thanks for read and have a nice day.

#2

You are doing a good job,
By failing and achieving success after that means that you are learning.

How would you learn without trying, failing, getting tired and feeling happy each time you achieve small challenges?

By doing a whole project using react means that you’ve assimilated a big amount of knowledge in the past and it’s time to put them into work in a whole new way and you only need time to master it as you’ve done with previous challenges.

Not feeling confident with previous challenges? it’s preferable to go back and try to work on them again; especially ES6 Section.

A good thing to do now is probably to learn React from another source like codecademy which provides some great lessons that contain 2 parts, and the second is very important as it shows you some programming patterns that you can follow to build your projects.

It will help a lot in building knowledge of how to think in react, or you can also try Thinking in React, found on the official website of the library.

I hope these will be helpful,

Good Luck & Happy Coding.

#3

Thanks for the links, I’ll use them ASAP.

#4

If you are having trouble with a specific project or even just a section of a project, post a link to your code (Codepen, JSFiddle, or codeSandBox work well), so we can review and give you some guidance on any questions you may have.

I have found that most campers’ issues with React are not really related to understanding React. Instead, it is typically a basic JavaScript feature/method (think Class syntax or binding functions) which they do not understand which makes figuring out what is wrong more difficult. I see many cases where camper’s still do not understand how to use map, reduce, or filter correctly, so they struggle with tutorials which reference they methods and think that they do not understand React. Again, it is about basic JavaScript functionality, so if you are struggling with React, it could be you still have not worked enough with some of the JavaScript features/syntax which React used through it’s library.

1 Like
#5

Congratulations on getting this far!

I’m just beginning on React, but I understand what you are saying. It can be confusing.

One thing that has been helping me is to understand the roles that small components can play and how the state works. Rendering is still an issue, but I’m almost starting to feel that I may soon make progress.

One thing that has helped me are the freeCodeCamp Medium articles. Some of them are very good on helping to resolve an issue.

And it has helped to understand that CodePen doesn’t require the “import” statement.

Now, Redux is requiring more of my focus too. But I still feel that React will be easier to work with than Angular or Vue.

You may also want to check the freeCodeCamp guides, and Gitter Rooms. Finding someone to pair with may help too. Sometimes two can cover each other on finding solutions.

#6