DEV Community

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 post

K • Feb 21 '18

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)

Samer Buna • Feb 21 '18

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.

Comment marked as low quality/non-constructive by the community. View Code of Conduct

jacklinj066 • Jul 5 '18

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

Juan De los santos • Feb 21 '18

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

Chris Moune • Feb 22 '18 • Edited

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.

K • Feb 21 '18

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

Hussein Duvigneau • Feb 21 '18 • Edited

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.

K • Feb 21 '18 • Edited

Haha, just today I read AirBnB lint rules aren't best practise and you should use the config react rules xD

Hussein Duvigneau • Feb 21 '18

interesting; have a link?

K • Feb 21 '18

mobile.twitter.com/ryanflorence/st...

Tony Brown • Feb 23 '18

That's not entirely true if you read what Ryan is saying

Rahul Ahire • Jun 24 '19 • Edited

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

Samer Buna • Jul 5 '19

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).

Sunil Kumar • Dec 23 '18

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...

Mihail Malo • Aug 29 '18

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}`

Sunil Kumar • Dec 23 '18

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

fka chadmadna • Feb 21 '18

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

zhaozhiming • Feb 28 '18

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.

Barry Michael Doyle • Mar 15 '18 • Edited

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.