Code Your First React App | Beginner React App

Hi friends! Today we are building a React app together. I thought this would be a fun way to continue with the Code with me series where we build things together. Let me know in the comments other things you want to build together and what technologies you want to use!
0:00 What is React?
1:17 What we are building with React?
3:35 Getting started
21:38 Final React app
21:55 Coding tips
TUTORIAL TO FOLLOW ALONG WITH: reactjs.org/tutorial/tutorial...
❤️ Subscribe for more videos using this link kzread.info?su...
Business inquiries: info@thisistiffin.com
Instagram: / tiffintech
Tiktok: www.tiktok.com/@tiffintech?la...
SIGNUP FOR MY NEW MONTHLY NEWSLETTER at www.tiffintech.co
✅ Exclusive discounts
✅ Tips from people in the STEM world
✅ Stay up to date with the latest tech events and news
✅ And so much more!
Code Your First React App | Beginner React App
#CodeWithMe #TiffInTech

Пікірлер: 121

  • @Trinita1970
    @Trinita19702 жыл бұрын

    I recently decided to leave Vue for React because it's is more in demand. So you're tutorial is very timely. Thank you i have loved this small exercice !

  • @Nation-Of-Joe
    @Nation-Of-Joe2 жыл бұрын

    Love this content! Would look forward to seeing more this sort of series 👌

  • @aprilucid
    @aprilucid2 жыл бұрын

    Hi Tiff! i had been daunted by coding and burned out for a while yet blaming myself as I was not good enough(well coding will be always challenging tho!) then after some break i began to go step by step, little by little. Today morning I watched this video from the other side of the world, and got a really nice motivation as the video was calming and friendly as others mentioned in comment :) Thanks for this approach! your content really helped me out! :)

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Thank you! That makes me so happy to hear!💕💕

  • @AstonJay
    @AstonJay2 жыл бұрын

    I love this new series idea! This is a great way to try out different languages and build out your skills

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    I'm so glad! Thats what I was hoping for!

  • @bobitaakter7350

    @bobitaakter7350

    2 жыл бұрын

    @@TiffInTech Which laptop do you use. M1 or intel MacBook.

  • @mverma7845
    @mverma78452 жыл бұрын

    Hey Tiff Thanks so much for this, it's cool to see a developer like you actually reading the docs and coding along side, I see a lot of devs on YT create videos where it looks like its from memory. But good job.

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    thank you!! Really appreciate that! Yup just want to normalize going through documentation and taking tutorials! That no one has it all "memorized"

  • @catharsis222
    @catharsis2222 жыл бұрын

    Jack of all trades, master of ONE. Even if I am not the king in JavaScript libraries as a sysadmin/cloud/network engineer, I sure enjoy having an understanding of all things in I-T

  • @kitcat2449
    @kitcat24492 жыл бұрын

    React was really fun, thank you for sharing knowledge!

  • @ScientistIzaak
    @ScientistIzaak2 жыл бұрын

    So excited you posted this! I started learning React yesterday!

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    That's awesome! Great timing!

  • @hamadaparis3556
    @hamadaparis35562 жыл бұрын

    So awesome tutorial it really refreshes my react memories quickly after a long time with no using it.

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Great to hear!

  • @cryptician6113
    @cryptician61132 жыл бұрын

    I am currently in a FullStack bootcamp and we just started learning React yesterday! What a great coincidence with your tutorial! I'm definitely gonna take it and see what more I can come up with... already thought about some kind of function to select a winner, although I already feel like that idea could be a daunting task...

  • @cryptician6113

    @cryptician6113

    2 жыл бұрын

    Although mastering that would open the doors to a whole new idea: copy the squares 9 times and turn it into a sudoku game!

  • @HrissW
    @HrissW9 ай бұрын

    0:28 6 months in React and still feels this way 😭

  • @trewaldo
    @trewaldo2 жыл бұрын

    How I wish I had an instructor like you! This is a very beginner-friendly tutorial. Keep them coming! Cheers, Tiff! 😍🤓🥰

  • @Bri-Official-Selftalks
    @Bri-Official-Selftalks2 жыл бұрын

    Wow I like videos like this, she walks us through every step of the process. I wanna see more vids like this soon!!

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Yay! Thank you! More to come!!

  • @richie7898
    @richie78982 жыл бұрын

    Love these sort of tutorials... Thanks tiff

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Glad you like them!

  • @walter.hrnndz
    @walter.hrnndz2 жыл бұрын

    Recently I had to learn a bit of react for an application that I had to fix, I found it quite easy to use having some knowledge of js and programming in general. Good video!! 🙃

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Thanks for sharing!

  • @aliceelina1280

    @aliceelina1280

    2 жыл бұрын

    hello do you trade?

  • @dandiasabeyesinghe4890
    @dandiasabeyesinghe48902 жыл бұрын

    Just started learning React! This helps alot💯

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Glad I could help!

  • @aliceelina1280

    @aliceelina1280

    2 жыл бұрын

    hello do you trade?

  • @KAITOMORI875
    @KAITOMORI8752 жыл бұрын

    Always cheer me up. Thank you!!!

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    No problem 😊 thank you!!

  • @matthewdolan720
    @matthewdolan7202 жыл бұрын

    That was fun! Thank you, Tiff! :)

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Thank you!!

  • @asapbrianjr
    @asapbrianjr2 жыл бұрын

    I don't even have any plans on using React but as a fellow computer nerd, I really enjoyed this video!

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    yay! That made my day!

  • @fabh9010
    @fabh9010 Жыл бұрын

    I made it! Thanks.

  • @trtlphnx
    @trtlphnx2 жыл бұрын

    I Love React; Thanks Sweetie, Love Your Channel and Incredible Knowledge Base ~

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Glad you enjoy it!

  • @satyavivekanandbattula1091
    @satyavivekanandbattula10912 жыл бұрын

    Thank you very much Tiffany 😊.Really Useful video 😇 .

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    You're so welcome!!

  • @georgehammond867
    @georgehammond8672 жыл бұрын

    well done missy, its not easy coding React apps.

  • @elysiafilm6215
    @elysiafilm62152 жыл бұрын

    Enjoyed watching this and following along, Thank you!!

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Glad you enjoyed it!

  • @cakefunny5813
    @cakefunny58132 жыл бұрын

    I recently consider to find front-end job and found many job need the skill. However I didn't learn react at school. Thanks for this useful video 😄

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Forsure!

  • @gulshanmotala7959
    @gulshanmotala79592 жыл бұрын

    Great idea to do more tutorials better. However I feel like you could explain the steps in a bit more detail. we have the documentation open next to us, so I think your added value would be to comment on why we do things / reiterate the thought process / logic. Looking forward to more videos!

  • @JuanGabrielOyolaCardona
    @JuanGabrielOyolaCardona Жыл бұрын

    Thanks for sharing great tutorial easy to follow and clear instructions. 🥰🤩😃

  • @jbiraCR
    @jbiraCR2 жыл бұрын

    Great topic great content in this channel as always !!!! 🇨🇷🚀💯👨🏻‍💻

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Thank you so much!! :)

  • @alejandro-1667
    @alejandro-16672 жыл бұрын

    My Tech crush ❤️

  • @sohel-developer
    @sohel-developer2 жыл бұрын

    Just Awesome😍💕

  • @stevensong8784
    @stevensong8784 Жыл бұрын

    I'll make sure to brainstorm onward. Awesome if you could include how to exit from VSC terminal.

  • @yusufrazakhan2443
    @yusufrazakhan24432 жыл бұрын

    thats really helpfull

  • @BrendaMichellleTech
    @BrendaMichellleTech2 жыл бұрын

    Love the tutorial Tiff! I love React an their documentation is one of my favorites :)

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    thanks Brenda! and right!? They have awesome documentation!!

  • @aliceelina1280

    @aliceelina1280

    2 жыл бұрын

    hello do you trade?

  • @chilly2171
    @chilly21712 жыл бұрын

    Hi ! Would you want to do a bigger project, with multiple small video series and coding sessions? I think that'll be really cool, fun and educative!

  • @Quicknuggets
    @Quicknuggets2 жыл бұрын

    What theme icon did you use for vs code?

  • @ayoubelachab2412
    @ayoubelachab2412 Жыл бұрын

    Thanks for this video 🤩

  • @TiffInTech

    @TiffInTech

    Жыл бұрын

    💓

  • @connorskudlarek8598
    @connorskudlarek85982 жыл бұрын

    You could try making a folder called "desktop folder", then put anything in it that you would normally put in your desktop but doesn't actually need to be on the desktop. ;)

  • @aliceelina1280

    @aliceelina1280

    2 жыл бұрын

    hello do you trade?

  • @jeanniepaculba4839
    @jeanniepaculba48392 жыл бұрын

    This was super helpful

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Glad it was helpful!

  • @cambutchart
    @cambutchart2 жыл бұрын

    Hi Tiff, where is the Git repository - I cant seem to find a link

  • @mingyangli9171
    @mingyangli91712 жыл бұрын

    Try do the next tutorial on using GraphQL in React 🤩

  • @danielsladecek8258
    @danielsladecek8258 Жыл бұрын

    Hi Tiff! Please, Have u ever had problem with install react app and throw you this? Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts... node:internal/modules/cjs/loader:936 throw err; thank you for your help 🙂

  • @vathanahov5325
    @vathanahov53252 жыл бұрын

    soo i learn react a while ago and i make a lot of project using react hooks and custom hooks ... and now looking back at class components i feel like it much harder

  • @KalDillard
    @KalDillard2 жыл бұрын

    I created two react web apps but still have trouble hosting them on firebase!

  • @AMARNATH-em2sf
    @AMARNATH-em2sf2 жыл бұрын

    good stuff dude

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Thank you!

  • @johnpaulduavis8097
    @johnpaulduavis80972 жыл бұрын

    pleasee more on react tutorials

  • @codyfingerson743
    @codyfingerson7432 жыл бұрын

    Could you possibly do a video on object oriented programming? I always always struggle to write OO code 😂😂😭😭

  • @stevensong8784
    @stevensong8784 Жыл бұрын

    Thanks!

  • @TiffInTech

    @TiffInTech

    Жыл бұрын

    Thank you Steven!! Always makes me day to read comments / see support from you!

  • @stevensong8784

    @stevensong8784

    Жыл бұрын

    @@TiffInTech even tho I saw it 7 months later? 😅

  • @TiffInTech

    @TiffInTech

    Жыл бұрын

    @@stevensong8784 haha never too late :D

  • @banilamunasinghe6069
    @banilamunasinghe60692 жыл бұрын

    👍❤️💯

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    happy Tuesday!

  • @gopalks6437
    @gopalks64372 жыл бұрын

    Lovely but why class based and not hooks ??

  • @Ayoutubeaccount3
    @Ayoutubeaccount32 жыл бұрын

    first vid I'm about to watch on react...

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    yay!!

  • @zanmarcusbiyer
    @zanmarcusbiyer2 жыл бұрын

    Hi tiff this is Zan. I know nothing about Code. I was wondering if you might consider picking a code for beginners and teaching from the beginning. I didn’t know what was going on in this video but I thought it was so cool that you could create the tic-tac-toe game. And I would really like to be in the know of creating code thank you

  • @aliceelina1280

    @aliceelina1280

    2 жыл бұрын

    hello do you trade?

  • @zanmarcusbiyer

    @zanmarcusbiyer

    2 жыл бұрын

    @@aliceelina1280 I don’t understand the question? I am just looking to learn how to code.

  • @aliceelina1280

    @aliceelina1280

    2 жыл бұрын

    @@zanmarcusbiyer i mean trade crypto

  • @Wanderer2035
    @Wanderer2035 Жыл бұрын

    I cant find the css link for it

  • @hexadecimalhexadecimal5241
    @hexadecimalhexadecimal52412 жыл бұрын

    I generate a new app and it loads with pre loaded code, i then proceed to do what i see tutorials videos do....and that is delete some of the uneccesary files bam app crashes in cmd. i cant delete any of the pre loaded files without the app crashing...wtf

  • @connorskudlarek8598
    @connorskudlarek85982 жыл бұрын

    This tutorial could be "added onto" by creating a back-end for tracking an account's win/loss history, maybe adding the dates of played games with their outcomes as a graph. Or you could go as simple as just ending the game when one player causes a 'win' condition. Or add a refresh button in the site and track X wins and O wins below the gameboard. That way instead of refreshing the browser, you can just reset the game.

  • @remylebeau9947
    @remylebeau99472 жыл бұрын

    Can you give me further reading on more React projects for beginners?

  • @TiffInTech

    @TiffInTech

    Жыл бұрын

    there is so many great resources online that I would just search for what specifically you are looking for!

  • @AvinashSingh-vj3rk
    @AvinashSingh-vj3rk2 жыл бұрын

    Nice video 👍

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    Thanks 👍!!

  • @AvinashSingh-vj3rk

    @AvinashSingh-vj3rk

    2 жыл бұрын

    @@TiffInTech welcome 🙏

  • @ihteshamulhaq5499
    @ihteshamulhaq54992 жыл бұрын

    2nd view love u❤️

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    thanks for your support!!

  • @dharaa9387
    @dharaa93872 жыл бұрын

    is this React.JS or React Native?

  • @137dylan
    @137dylan2 жыл бұрын

    Thanks for sharing...shame however you did this in class components as they're now deprecated. The React documentation is out of date.

  • @vitaliisyvashchenko7641
    @vitaliisyvashchenko76412 жыл бұрын

    Almost first))

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    haha yay! still in the first few minutes :D

  • @SesTonuu
    @SesTonuu2 жыл бұрын

  • @transcendcapitalism
    @transcendcapitalism2 жыл бұрын

    We didn't add the 'winner' code at the end.

  • @zzzzzz-fn1kx
    @zzzzzz-fn1kx2 жыл бұрын

    :)❤

  • @marti.2718
    @marti.27182 жыл бұрын

    Not to hate, but you're missing explaining the react lifecycle and how hooks

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    I am following the very intro react tutorial! As you get further into the react docs it gets into it:) only so much can be fit into one video!

  • @khizrshaikh9902
    @khizrshaikh99022 жыл бұрын

    First

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    yay!!!

  • @sheikshemo6447
    @sheikshemo64472 жыл бұрын

    Second

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    yay!!

  • @nrn285
    @nrn2852 жыл бұрын

    Wouldn't it be better had you created your own tutorial or at least bring tutorials about skills you are familiar with?

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    I thought this would be a fun way to motivate others to go through documentation/tutorials and learn together :) Yes creating my own tutorials is another great idea! I have limited time between a very busy full time career and working on videos so I thought finding a happy medium of taking tutorials together would be fun. thanks for your thoughts!

  • @body_web_life8497
    @body_web_life84972 жыл бұрын

    Why you are using class based components ..As you can use hooks and functional components .I think that is no reason for this

  • @TiffInTech

    @TiffInTech

    2 жыл бұрын

    this is a tutorial going through the official React documentation :) Agreed Hooks are amazing! The purpose of this is a code along to go through the React docs and make it more friendly to others going through it for the first time :)

  • @arturb5152
    @arturb51522 жыл бұрын

    Do You know what i found moust intersting about Your...

  • @squ34ky
    @squ34ky2 жыл бұрын

    While I appreciate the effort you've put into this, I have to ask what the point of this video was, We could just as well follow the documentation on the React site. If you're not going to be presenting something original, why even bother?

  • @hamxsolo1039
    @hamxsolo10392 жыл бұрын

    damn baby take me out to dinner

  • @art1373
    @art13732 жыл бұрын

    Sorry but Hooks?!!!!

  • @keyOfSoul88
    @keyOfSoul882 жыл бұрын

    React is shit I like only native JavaScript... =(

  • @khizrshaikh9902
    @khizrshaikh99022 жыл бұрын

    First