5 Common React Beginner Problems 2018

In this video I give 5 common problems React beginners might face.
1. Adjacent JSX elements
2. Cannot call setState on undefined
3. Outdated React.createClass syntax
4. Incorrect imports / exports
5. Including Redux too soon
Video Links
React 16 For Everyone: goo.gl/MkRA11
Become a Pro: www.leveluptutorials.com/pro
Affiliate Links
Please use these links when signing up for services to help support Level Up.
Easy Hosting with Netlify: goo.gl/pychVP
Shared Web Hosting: goo.gl/pfC6uc
Level Up Links
Syntax Podcast ft Scott Tolinski & Wes Bos: goo.gl/7jDDxX
Subscribe to the Level Up Newsletter
eepurl.com/AWjGz

[@IncolasCopperfield]

i was a newb stuck on the "accessing this from inside a function" problem... i felt so fortunate that i watched your video ! now i can move on and get stuck on another easy problem soon enough xD

[@subvind]

also, if you only need to update a small part of the page put it in its own component and use setState, otherwise the entire page will need to render every time the small part needs to be updated; this has because more apparent as I've developed with >1 year of react building in next.js/react native. great vid btw.

[@darkclonii]

This is the best react explanation I've seen. You got a thumb and a new subscriber. Thanks a lot.

[@ArisFilms]

Straight to the point and very helpful!

[@bradt5426]

How did you restyle your inspector in Chrome?

[@guacamole456]

Here is another one, using { } when returning JSX in a map function instead of ( ). It generates no error, but nothing renders on the front-end.

[@npc73x]

mine one is, it's everything works by sredux and when user refresh aa page, boom, Uncaught TypeError: Cannot read properties of null

[@jessekrim9268]

Great vid and love the podcast!

[@logkdogk]

Awesome, love this video. Really removing roadblockers.

[@rinatvaliullov3247]

Why you don't use "return" statement in the "runFunc" function?

[@fatwaanugerah5354]

Please tell me your vsc theme name

[@ErikKubica]

this vid makes me feel like a pro. i would like to figure out what makes someone junior react developer vs and what makes them senior.

[@SergioArroyoSailing]

Thanks! do you have an updated one for 2020? thanks! :)

[@kvetoslavnovak423]

Great video and tips as always, Scott!!! Would it be posdible to share you advice regarding sharing code between React and React Native Apps using Meteor and Apollo/GraphQL? Thank you in advance!

[@a76i37]

Very Helpful Thanks

[@garfieldJian]

lol, your video is so clear. love it

[@roeelcohen]

What's your theme??

[@maxabzaloff6164]

Hello! I have only one question - what IDE theme do you use? thanx

[@syntaxfm]

Level Up official

[@soufianeibnouine]

I like the theme of your text editor :)

[@KidJV]

3:40 short-hand is good but bad for readability i still use the long-hand one

[@Ecdetails]

Hey sir what theme are you using and is it vscode? Also thanks for an amazing g course

[@syntaxfm]

Level Up Official for VSCode.

[@Ecdetails]

Just downloaded it, and man is it SWEET easy to see love it thanks sir

[@khamdamov]

I came here to say thank you for your amazing official theme for VSCode.

[@SunilKumar-fh6jk]

whats the name of the theme?

[@iblockdev7342]

Sunil Kumar level up official

[@alimorshidi9419]

What editor you use?

[@aWiseCoder]

visual studio code

[@jboxy]

Use them arrow methods to auto reference this, .eslint to 2018. Really you don't need classes if you use state going with function hooks

[@haroldpepete]

Fragment short syntax doesn't work well with key keyword, if you need key in fragment you can't use fragment short syntax

[@andreivedovato]

But can't you export like: "export Test extends...." and then import it like "import { Test } from ..."?

[@syntaxfm]

Yep! Any valid import / export. The point is that the error in React won't always tell you the issue is with your import.

[@leelandmill]

He kinda showed that in the video right at about 9:00.

[@andreivedovato]

yea, kinda :p

[@himanshupratap29]

Thank You !

[@miketkachenko5939]

Cool video, ty.

[@WebDevProfesh]

You can also import {Fragment} from ‘react’

[@aurelianspodarec2629]

WHy all the extra hassle? React.Fragment is just fine.

[@ZakiWasik]

Don't think it's a hazzle at all. You have to type "Fragment" once more, but saves writing "React." twice. Besides that I think it looks much cleaner and easier to the eye to have a tag than a .

[@kanonbolt100]

You can actually just use now for fragment

[@osamaayub6004]

​@@kanonbolt100 yes this works fine

[@Zzzzzzzzzzzzzzzzzzzzr]

class app extends React.Component but I see you have export is that the es2015 style

[@syntaxfm]

What is the "es2015 style" export you are referring to?

[@zacktonature]

This is not really related to React, but more to VS Code. At 4:10 when you're making the this.setState({ open: true }) you write ({open: true}) and then it spaces it out automatically. What's the setting or keyboard shortcut to do this? Would save me a ton of time and I'm not even sure what to google. Besides my VS Code question, I want to thank you for making this video! I'm only a week into React and this has really helped me out.

[@yuyutsu]

I am not sure but most probably it is a package called 'prettier'.

[@zacktonature]

Adam Wall New in general. I've been learning JS for about ~2 months now and feel confident enough to start learning React and then RN.

[@BarryMichaelDoyle]

Your runFunc arrow function isn't very performant (I know it's very clean But it has the same performance issues as having a callback function in the render). The most performant is the bind the function in the component constructor :)

[@syntaxfm]

What are the numbers like between the two? Is it an optimization or a micro optimization? I personally use class properties myself, but will still use an arrow function in the even from time to time. I doubt it's an optimization that makes a huge difference in most cases.

[@jeytii]

Am I no longer a beginner if I'm not struggling with those problems you mentioned? ^_^

[@alexmachin1785]

#ReactExpert lol

[@quigley61]

To the point, how it should be!

[@jameskobe1716]

What's the name of your theme ? I'm colorblind and this looks nice :)

[@jameskobe1716]

🐈

[@faahkoo]

One time I wrapped a component with Fragment and I had a big issue, React Router Dom crashed in production build because of it (Seems like it doesn't render a container/components very well in this case) hahaha, since than I started using my own HOC to make it happen

[@lewis6590]

nice video, but... are these really beginner problems?! if so then i guess i am a beginner... but surely a beginner would just wrap everything in a div and live in blissful ignorance of new React features?

[@emredikmen276]

visual studio code theme pls

[@yuyutsu]

Level Up Theme Official

[@angeldiapernashik]

Great day

[@k4l4sh77]

Import/export explained stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import/36796281#36796281

[@ankurleonardo]

Hi Dude! This is probably going to be the biggest drawback for React that I have been seen a hell of a change from initial react version to latest React version. The moment you choose to work on the current version, finish the project in a couple of months, BOOM! you are outdated..lol

[@syntaxfm]

None of it is meaningless change though. React is constantly improving and that part of the benefits of using it.

[@Denvercoder]

No other option is any better. I started learning Angular 2 like 1 year ago and now they are about to release Angular 6. 😜

[@mykelchang846]

@@Denvercoder Angular 7 is out :p

[@wixnarara]

Vue never had this issue ;) One of the reasons why I love it

[@davidsoto8445]

Niiice

[@jaycobbs]

Or instead of

[@syntaxfm]

returning an Array was an older and IMO less elegant solution especially compared to the syntax.

[@Daijyobanai]

had better come with a comment explaining it or else *someone* will delete it down the line. I prefer to be explicit so would go with as it looks like it is meant to be there!

[@shilangyu]

not only returning an array is uglier but also it forces you to have a key property on all children. Not recommended

[@pianowhizz]

@@Daijyobanai Code is for humans, not machines. You should be able to type but your IDE or WebPack should automatically replace those with prior to git commit :)

[@HDChif]

IMO implementing Redux is about the same amount of effort than the Context API.. And once you get the hang of it, it is always the same and you get quicker and quicker

[@andreivedovato]

agreed

[@hughmann9097]

React feels like one giant workaround sitting on top of workarounds. Why would anyone use this?

[@hhskladby1596]

Well documented and consistent workarounds are a more maintainable help than smart ass code golfings.

[@yairvsync]

so annoying JSX doesn't add a wrapper automatically (for multiple child nodes) There's pre-processing going on anyway so why not make it a bit smarter..

[@thedevhassan]

🐁