React.js Frequently Faced Problems

Samer Buna on February 20, 2018

At jsComplete, we manage a slack account dedicated to helping code learners get unstuck. We receive some interesting problems every now and then ... [Read Full]
markdown guide
 

It's very interesting that most of these problems aren't even React related.

Most are based on missing JavaScript knowledge (method binding, exports) or general lack of programming skills (case sensitivity, versioning)

 

Indeed.

A big advantage of React is that it has a small API. Most of the skills of a React developer is a reflection of their JavaScript skills.

 
Sloan, the sloth mascot Comment marked as low quality/non-constructive by the community View code of conduct

I agree with your point. React Js development company in India

 

I completely agree with you. When I started using reactjs I found a lot of issues because, literally, I tried to run before learning how to walk... Currently I still having a lot of things pending to learn or to implement in practice, but I'm really excited about using reactjs :D

 

Just start JS with JS. I think it is good to learn the old js first, go through the "you don't know javascript" serie of kyle simpson, then you take the ES6 book of Zakas. After that you will be ready for any JS and Node library/framework.

 

I didn't expect so many people start JS with React. I started 2011 with ExtJS and then Ember, so Reac was easier than everything I saw before xD

 

I found it pretty insightful to set up AirBnB linting and learning from what it flags up as issues, esp. since the app might apparently still work correctly with various anti-patterns or misuse without you realising you're doing something wrong.

A decent IDE would have flagged up some of these issues and not necessarily explained what was wrong, but the linter would have picked up pretty much all of these issues and explained exactly what's wrong and common best-practice solutions/alternatives.

 
 

hi, samer i had an one question that when i was going through various tutorials for react, i found out strings in a state component were all written in capital letters

for eg. (reference: image uploaded)
can you please help me by telling why letters are capitalized in string in this case

onDeleteClick = async (id, dispatch) => {
try{
await
axios.delete(https://jsonplaceholder.typicode.com/users/${id});

    dispatch({type: 'DELETE_CONTACT', payload: id});
    } catch(e){
        dispatch({type: 'DELETE_CONTACT', payload: id});        }
}; 

and this example which i have practiced

 

It's just a common practice to do for strings that are supposed to be unique fixed values in a program. There is no syntax significance to this. You can use lower case values and things will still work.

In modern JS, you can use the "symbol" primitive type to provide unique values and it's a much better deal than using just strings (regardless of their case).

 

Hi, this is a great article!

However, I don't agree with your suggestion in point 16. I think using auto-biding of JS arrow function class properties may not be such a great idea.
Take a look at this article: medium.com/@charpeni/arrow-functio...

 
 

Besides tagged string literals, what's so good about the backtick style strings vs concatenation?

'{ a: ' + a + ' b: ' + b + ' c: ' + c + ' }'
'{ a: '+a+' b: '+b+' c: '+c+' }'
`{ a: ${a} b: ${b} c: ${c} }`

In some cases it's even longer:

'' + a + b + c
''+a+b+c
`${a}${b}${c}`
 

Thanks for posting useful information.You have provided an nice article, Thank you very much for this one. And i hope this will be useful for many people.. and i am waiting for your next post keep on updating these kinds of knowledgeable things...Really it was an awesome article...very interesting to read..please sharing like this information......
phpinterview.in/web-development/ph...

 

phpinterview.in/web-development/ph...

Thanks for posting useful information.You have provided an nice article, Thank you very much for this one. And i hope this will be useful for many people.. and i am waiting for your next post keep on updating these kinds of knowledgeable things...Really it was an awesome article...very interesting to read..please sharing like this information......

 

Funny that I thought this was supposed to be an interesting analysis on why React can be very problematic sometimes.

 

I used to make such a mistake: import react from 'react';
In this sentence the first react must be React but I often forgot it.

 

Hey Samer, This is a great article. Are you planning on releasing an ebook version of your ReactJS books? I'd really like to buy them, but shipping to South Africa is a real pain.

 

Hey Barry, the digital versions of the books are available at jscomplete.com

 

Very interesting article Samer. May I also add, forgetting to use export a module when declaring a new component?

code of conduct - report abuse