React Tutorial For Beginners (React Testing Library) - Building a Newsreader (1/3)

[@CognitiveSurge]

💥 Hi everyone, thanks for watching and I hope you learnt a lot! Please remember to like and subscribe: bit.ly/CognitiveSurge - Have a great day! and keep on learning 👊 If you feel that my videos help you, take a minute to consider supporting via Patreon: www.patreon.com/karlhadwen 🙌

[@somerandomchannel382]

You are awesome. I will take a cop of tea then do this amazing video guide! Please, please don't cut the videos. The natural pauses, thinking sections, making comments why code are used, is really the way we're suppose to talk and listen to a conversation. The artificial way of "cuts", "removal of breathing pauses" - makes some video impossible to watch, and stressful. Also 1:15:30 - Reason I like prefer Styled-Components.I see where you coming from, I used css. Main reason I think styled components works better is continuity and flexibility, and primarily focusing on theming. Here is an example of dark/light theme: codesandbox.io/s/styled-theming-l3jiv

[@CognitiveSurge]

Apologies for the late reply Stephanie, I only just saw this, it was marked as spam :( thanks for the kind words, and I'll make sure I don't cut the videos :D I'm definitely a convert now, I won't be going back to CSS anytime soon! The app looks really good, great work on the dark/light theme!

[@CashCatz]

This and the todoist tutorial are outstanding - better than many of the paid tutorials. Please keep these react "clone" tutorials coming!

[@CognitiveSurge]

That’s so nice to hear, makes creating the videos worth it 😊 any particular clone you’d like to see?

[@CashCatz]

@@CognitiveSurge A social networking site comes to mind (Instagram, Twitter, Facebook, etc), Airbnb or some kind of listing/marketplace site, KZbin - basically the top type of websites that folks interact with on a daily basis.

[@CognitiveSurge]

@@CashCatz Awesome, you asked so you shall receive :)

[@OliverGomes]

@@CognitiveSurge do Twitter with React and GraphQL

[@mohithguptakorangi1766]

@@CashCatz and it's done now....

[@phantom7132]

What makes me feel that you are a competent developer is the fact that you make simple mistakes like we all do and correct them like a pro. That's facilitating for beginners. Thanks!

[@CognitiveSurge]

😂 I think most of my mistakes are either from being tired, misspelling, or just not reading something properly. Program isn’t hard, just people like to make things complex 🤷‍♂️

[@phantom7132]

@@CognitiveSurge :-) Looking forward to see another React project.

[@CognitiveSurge]

@@phantom7132 One coming soon :)

[@kwekukilu2196]

I have been looking for a testing course with a real app for a long time, you just made my day, I really learnt a lot from the testing part. Keep it up man, and bring more videos on react testing and react testing lib. You have earned a subscriber here. I can confidently start writing tests now.

[@CognitiveSurge]

That's great news, really happy to hear this video helped with you feeling confident in writing tests.

[@DuyTran-ss4lu]

This is KZbin's treasure

[@CognitiveSurge]

Thanks Duy!

[@ajricherson1099]

If you are having the same problem as in the video where the zoom will disrupt the infinite scroll, it is probably due to rounding or comparison errors, or issues with the document. Try this in handle scroll: const handleScroll = debounce(() => { // IF THE USER HAS SCROLLED TO THE BOTTOM OF THE PAGE const scrollDistToBottom = Math.floor( document.documentElement.offsetHeight - (window.innerHeight + document.documentElement.scrollTop) ); if ( scrollDistToBottom > 5 || loading ) return false; setLoading(true); }, 300);

[@CognitiveSurge]

Thanks for adding this, hugely appreciated :D

[@harrylyod3402]

thank you for the code

[@Peter-ur8nv]

This is my second tutorial after the "Todoist" one. Another great one though ! Very helpful explanations. Keep it up ! Thanks 😊

[@CognitiveSurge]

Thanks so much Peter :D

[@aman7555]

Loved it, I have been doing react for sometime and missed a couple of points too. But it really felt warm when the author said don't be harsh on yourself even I forget.. Just tells how humble the author is!

[@tiGer86]

Thanks, mate. Awesome tutorials.

[@CognitiveSurge]

Kevin Quoc Truong thanks Kevin, glad you like them :)

[@tendies]

Thank you so much for the value you add to my life!

[@CognitiveSurge]

Unknown LastMate thank you for watching, I hope I could help!

[@martinbenavides1932]

By far the best tutorial I've come across, good job bud. If you have tutorials with Redux that will be amazing!

[@CognitiveSurge]

So many people want Redux but I just don't see it being used much in big production apps anymore :( maybe I'll show 'how to Redux without Redux?' haha

[@thechief4568]

@@CognitiveSurge what are they using for state management then?

[@adamtak3128]

At 1:14:18 when you hover over the title, how did you get that box to appear???

[@MrFckingninja]

I'd love to know it too :)

[@CognitiveSurge]

Just a dev tools box I believe?

[@MrFckingninja]

@@CognitiveSurge I don't get it

[@adamtak3128]

@@CognitiveSurge I don't understand ;o

[@CognitiveSurge]

​@@adamtak3128 Sorry just seen the response! It's a feature in Chrome (I believe...) when you hover over a title when dev tools is open

[@animanamit7543]

Hi, my goal from these tutorials is mainly to learn some testing whilst getting some practice with React - between this and the paid section of your Instagram course which I got, which is better to start off with if I'm totally new to testing in React?

[@CognitiveSurge]

Instagram is the easier one to understand as I got more time to put into testing being that it's paid content, it covers a lot of testing. Also here's my Jest cheatsheet: github.com/karlhadwen/jest-playground - it should help

[@okoiful]

Thanks man, nice tut! :)

[@CognitiveSurge]

Thanks Giorgio :)

[@phantom7132]

1:11:16 you forgot the semicolon and the end of the line 'content'. I feel you haha

[@CognitiveSurge]

Phantom Code story of my life 😂

[@ItsRageYT]

Would you be able to demonstrate your terminal setup? I am new to iTerm2 and your terminal theme does look very fancy - kind regards

[@CognitiveSurge]

Of course, my entire terminal setup is demonstrated in this video: kzbin.info/www/bejne/g4SzpmCijqtgd5o and here is my config: pastebin.com/UWHMV2QF

[@CognitiveSurge]

@Jack Rong I'm just glad I can help :)

[@nilmendes7710]

Congratulations on the tutorial, it helped me a lot! Your tips are excellent. I want to make some tutorial suggestions: webpack, node.js, typescript, react + typescript, express.js, Mern. I believe you will answer many questions for those who are learning (like me 😃). Looking forward to the GraphQL tutorial. Success in your projects.

[@CognitiveSurge]

Apologies, KZbin doesn't always notify me about comments! I've only just seen this. I've noted down your suggestions and will create videos around them (project based), the GraphQL video is now live! 🎉

[@nilmendes7710]

@@CognitiveSurge All well. KZbin sometimes fails to warn about new videos. I didn't understand: "GraphQl videos are already live!". I searched your channel and didn't see it. I look forward to new videos. Success in your projects! Happy Holidays!

[@CognitiveSurge]

Nil Mendes hey if you look at the first video on my new videos list it should be there, the GQL with Apollo server 2 😊

[@nilmendes7710]

@@CognitiveSurge That's right. I'm sorry for my inattention. Your tutorials are great. Looking forward to the next tutorials. Success in your projects. Happy Holidays!

[@CognitiveSurge]

Nil Mendes don’t worry, easy to miss 🙂 happy holidays to you too!

[@juliuscecilia6005]

Hey Karl! Great video! For the App.spec.js file, it appears that the "waitForElement" has been deprecated by the testing library. What alternative testing can I use to replace that?

[@CognitiveSurge]

I think anything waitFor related should work :)

[@roobs456]

Hope I'm not spamming the comment section, but for some reason the useEffect in my (non-memo) Story component doesn't seem to invoke multiple times after the map function in StoriesContainer is re-triggered (talked about around 2:29:00) - I searched the network tab for a number of Ids and added a console.log(storyId) to the useEffect. 🤷. Good to know the general rule though 🙂

[@CognitiveSurge]

If the story component gets the same exact props, it won't re-render, unless it'a like an object and the reference changes, which can be fixed by using something like immutable.js - I think in the case of this video, it goes ahead and goes through the life-cycle (which doesn't re-render but it does called useEffect...I can't fully re-call if this is right actually as I'm on mobile atm), but using Memo prevented the useEffect being called again which means we weren't hitting the API when we already had the data

[@roobs456]

@@CognitiveSurge Yes. The expected behaviour, as you talk about in the video too, is as you describe: in a non-memo component, the JSX doesn't re-render unless props change but the useEffect does. For some reason this doesn't seem to happen with my Story component. Not to worry though, just thought I'd mention it as it's strange.

[@CognitiveSurge]

@@roobs456 Hmm that is strange, I wonder why though...would you be able to do a Git compare against the master branch and see what is different?

[@roobs456]

@@CognitiveSurge I cloned your repository, changing only the Story to a non-memo component, and got the same behaviour as in mine - no re-triggering of the useEffect. Really strange. Tried it in Chrome and Firefox.

[@CognitiveSurge]

@@roobs456 Hmm that is very strange. Are you using the same dependencies in package.json?

[@ajricherson1099]

Thank you for leaving the errors in. I feel like at least half of my development time is spent fixing stupid mistakes I made. On a side note, have you found that create-react-app takes forever? It usually takes between 6-10 minutes on my decent machine. I suppose it could be because of my HDD, because my antivirus is off, and I have really good ethernet.

[@CognitiveSurge]

I'm not sure if I replied to this as YT is playing up a lot with comments recently...CRA takes about 1 minute on my 2017 MBP to init. Yeah if you're running yarn/npm, make sure your anti-virus is turned off and it will be much quicker!

[@adamtak3128]

Is there anywhere we can recommend what the next video should be about? I was thinking a crud application with react/type script.

[@CognitiveSurge]

Adam Tak hmm that’s a good idea, for now just send me a message here but I’ll put together a link that can be used for suggestions

[@adamtak3128]

@@CognitiveSurge Awesome! Thanks dude. You've got the best web dev channel btw. I would even pay for a Udemy course if you were to make one.

[@CognitiveSurge]

@@adamtak3128 thank you so much! I will avoid Udemy for now just because they take too much money :)

[@adamtak3128]

@@CognitiveSurge I did not know that. That's pretty lame of them. The creators should be benefiting from their hard work not some hosting platform...

[@roobs456]

Thanks a lot for this! I'm learning a lot. I was wandering why you use air-bnb eslint config? Also, if you could provide a setup guide that'd be awesome ; ). I've tried a number of guides and failed.

[@CognitiveSurge]

No problem! Setup guide is coming 👍 I guess I just got used to it and quite like it, I’ve found a nice easy way to set it up too so it works well for me now

[@roobs456]

@@CognitiveSurge omg thanks Karl :D. I've been losing hair trying to set it up so an easy way will be awesome.

[@CognitiveSurge]

@@roobs456 Haha no problem, I've had to re-install ESLint multiple times and it's such a pain, now I have it locked down though :D - video will be released within the next few days!

[@mohammadrasel1271]

nice

[@roobs456]

A little tip - use 'Wrap Console Log' VSCode package so you don't have to type out console.log('variable:', variable) each time.

[@CognitiveSurge]

mista rsv I know have this on a ‘cl’ keybind :) and cln for a normal log

[@nilokillian]

Hi, Karl. I might be asking a stupid question, nevertheless, the debounce function takes a bunch of args. The very two are defined ( func and wait) what about others? callNow is always false as immediate is undefined. if(!immediate) you're applying (calling) to the passed function and providing "this" and args... they are undefined all the time. Could you make it clearer please

[@compteprivefr]

Does anything happen on clicking one of the stories? Is there any routing or commenting being implemented?

[@CognitiveSurge]

It just takes you to the story

[@nimitbhandari2859]

In the Story component I am seeing a warning in the console if I leave the dependency in the useEffect as an empty array. I have been seeing that pattern everywhere but seems like react does not like it. What is the best way to handle that in case you want it to run only once ?

[@CognitiveSurge]

I've had issues like this too, I'm not actually sure why it does it, if you find out please let me know