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
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 !
Love this content! Would look forward to seeing more this sort of series 👌
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
2 жыл бұрын
Thank you! That makes me so happy to hear!💕💕
I love this new series idea! This is a great way to try out different languages and build out your skills
@TiffInTech
2 жыл бұрын
I'm so glad! Thats what I was hoping for!
@bobitaakter7350
2 жыл бұрын
@@TiffInTech Which laptop do you use. M1 or intel MacBook.
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
2 жыл бұрын
thank you!! Really appreciate that! Yup just want to normalize going through documentation and taking tutorials! That no one has it all "memorized"
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
React was really fun, thank you for sharing knowledge!
So excited you posted this! I started learning React yesterday!
@TiffInTech
2 жыл бұрын
That's awesome! Great timing!
So awesome tutorial it really refreshes my react memories quickly after a long time with no using it.
@TiffInTech
2 жыл бұрын
Great to hear!
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
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!
0:28 6 months in React and still feels this way 😭
How I wish I had an instructor like you! This is a very beginner-friendly tutorial. Keep them coming! Cheers, Tiff! 😍🤓🥰
Wow I like videos like this, she walks us through every step of the process. I wanna see more vids like this soon!!
@TiffInTech
2 жыл бұрын
Yay! Thank you! More to come!!
Love these sort of tutorials... Thanks tiff
@TiffInTech
2 жыл бұрын
Glad you like them!
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
2 жыл бұрын
Thanks for sharing!
@aliceelina1280
2 жыл бұрын
hello do you trade?
Just started learning React! This helps alot💯
@TiffInTech
2 жыл бұрын
Glad I could help!
@aliceelina1280
2 жыл бұрын
hello do you trade?
Always cheer me up. Thank you!!!
@TiffInTech
2 жыл бұрын
No problem 😊 thank you!!
That was fun! Thank you, Tiff! :)
@TiffInTech
2 жыл бұрын
Thank you!!
I don't even have any plans on using React but as a fellow computer nerd, I really enjoyed this video!
@TiffInTech
2 жыл бұрын
yay! That made my day!
I made it! Thanks.
I Love React; Thanks Sweetie, Love Your Channel and Incredible Knowledge Base ~
@TiffInTech
2 жыл бұрын
Glad you enjoy it!
Thank you very much Tiffany 😊.Really Useful video 😇 .
@TiffInTech
2 жыл бұрын
You're so welcome!!
well done missy, its not easy coding React apps.
Enjoyed watching this and following along, Thank you!!
@TiffInTech
2 жыл бұрын
Glad you enjoyed it!
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
2 жыл бұрын
Forsure!
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!
Thanks for sharing great tutorial easy to follow and clear instructions. 🥰🤩😃
Great topic great content in this channel as always !!!! 🇨🇷🚀💯👨🏻💻
@TiffInTech
2 жыл бұрын
Thank you so much!! :)
My Tech crush ❤️
Just Awesome😍💕
I'll make sure to brainstorm onward. Awesome if you could include how to exit from VSC terminal.
thats really helpfull
Love the tutorial Tiff! I love React an their documentation is one of my favorites :)
@TiffInTech
2 жыл бұрын
thanks Brenda! and right!? They have awesome documentation!!
@aliceelina1280
2 жыл бұрын
hello do you trade?
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!
What theme icon did you use for vs code?
Thanks for this video 🤩
@TiffInTech
Жыл бұрын
💓
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
2 жыл бұрын
hello do you trade?
This was super helpful
@TiffInTech
2 жыл бұрын
Glad it was helpful!
Hi Tiff, where is the Git repository - I cant seem to find a link
Try do the next tutorial on using GraphQL in React 🤩
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 🙂
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
I created two react web apps but still have trouble hosting them on firebase!
good stuff dude
@TiffInTech
2 жыл бұрын
Thank you!
pleasee more on react tutorials
Could you possibly do a video on object oriented programming? I always always struggle to write OO code 😂😂😭😭
Thanks!
@TiffInTech
Жыл бұрын
Thank you Steven!! Always makes me day to read comments / see support from you!
@stevensong8784
Жыл бұрын
@@TiffInTech even tho I saw it 7 months later? 😅
@TiffInTech
Жыл бұрын
@@stevensong8784 haha never too late :D
👍❤️💯
@TiffInTech
2 жыл бұрын
happy Tuesday!
Lovely but why class based and not hooks ??
first vid I'm about to watch on react...
@TiffInTech
2 жыл бұрын
yay!!
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
2 жыл бұрын
hello do you trade?
@zanmarcusbiyer
2 жыл бұрын
@@aliceelina1280 I don’t understand the question? I am just looking to learn how to code.
@aliceelina1280
2 жыл бұрын
@@zanmarcusbiyer i mean trade crypto
I cant find the css link for it
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
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.
Can you give me further reading on more React projects for beginners?
@TiffInTech
Жыл бұрын
there is so many great resources online that I would just search for what specifically you are looking for!
Nice video 👍
@TiffInTech
2 жыл бұрын
Thanks 👍!!
@AvinashSingh-vj3rk
2 жыл бұрын
@@TiffInTech welcome 🙏
2nd view love u❤️
@TiffInTech
2 жыл бұрын
thanks for your support!!
is this React.JS or React Native?
Thanks for sharing...shame however you did this in class components as they're now deprecated. The React documentation is out of date.
Almost first))
@TiffInTech
2 жыл бұрын
haha yay! still in the first few minutes :D
We didn't add the 'winner' code at the end.
:)❤
Not to hate, but you're missing explaining the react lifecycle and how hooks
@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!
First
@TiffInTech
2 жыл бұрын
yay!!!
Second
@TiffInTech
2 жыл бұрын
yay!!
Wouldn't it be better had you created your own tutorial or at least bring tutorials about skills you are familiar with?
@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!
Why you are using class based components ..As you can use hooks and functional components .I think that is no reason for this
@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 :)
Do You know what i found moust intersting about Your...
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?
damn baby take me out to dinner
Sorry but Hooks?!!!!
React is shit I like only native JavaScript... =(
First