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 ...
Collapse
 
kayis profile image
K

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)

Collapse
 
samerbuna profile image
Samer Buna

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.

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

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

Collapse
 
jjsantos profile image
Juan De los santos

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

Collapse
 
acmoune profile image
Chris Moune • 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.

Collapse
 
kayis profile image
K

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

Collapse
 
hdv profile image
Hussein Duvigneau • 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.

Collapse
 
kayis profile image
K • Edited

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

Collapse
 
hdv profile image
Hussein Duvigneau

interesting; have a link?

Thread Thread
 
kayis profile image
K
Collapse
 
anthonybrown profile image
Tony Brown

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

Collapse
 
rahulahire profile image
Rahul Ahire • 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

Collapse
 
samerbuna profile image
Samer Buna

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

Collapse
 
sunilku94128642 profile image
Sunil Kumar

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

Collapse
 
qm3ster profile image
Mihail Malo

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}`
Collapse
 
sunilku94128642 profile image
Sunil Kumar

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

Collapse
 
sad_macbook profile image
fka chadmadna

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

Collapse
 
zhaozhiming profile image
zhaozhiming

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.

Collapse
 
barrymichaeldoyle profile image
Barry Michael Doyle • 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.

Collapse
 
samerbuna profile image
Samer Buna

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

Collapse
 
anthonybrown profile image
Tony Brown

This is old hat, always use the prototype to share

Collapse
 
perigk profile image
Periklis Gkolias

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

Collapse
 
sunethpremarathna profile image
suneth-premarathna

Thank You Samer, this was very helpful.