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

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

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.

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.

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.

Samer Buna Pluralsight • Mar 19 '18

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

Periklis Gkolias • Mar 3 '18

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

Tony Brown • Feb 23 '18

This is old hat, always use the prototype to share

suneth-premarathna • Jan 29 '20

Thank You Samer, this was very helpful.

pushker modepalli • Nov 25 '24

These frequently facedproblems are deprecated. I think it's better to update with functional components. Most of questions are not related to reactjs.