Full React Tutorial #4 - Dynamic Values in Templates
Вставка
- Опубліковано 9 чер 2024
- In this React tutorial we'll see how to output dynamic values & variables using curly braces { } in our React JSX templates.
🐱💻 🐱💻 Course Files:
+ github.com/iamshaunjp/Complet...
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱💻 🐱💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstudio.com/
🐱💻 🐱💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja
Ive watched him so much that I say "Alright then gang" with him
Hahahaha! Same here, I even talk to my fam like that... 😅
😂
The best react tutorial series on the internet no cap, such a great teaching with concept instead of using big words with no use , thank you sir for this.
I will be joining this channel when i get i my first job. This guy here is teaching me a lot from the past 2 years ❤
Thanks so much :)
hii pakalu papito aka binod XD
@@vaishnavplays203 shh.
Best React Tutorial on UA-cam with Clear Concepts. Thanks The Net Ninja from my deepest heart.
This video is the perfect example of how understanding the basics is pivotal- I've understood how Props have worked for a while now, but I didn't get how simple it was until this video, it's just made React all fit into place for me. Thanks again Shaun another great playlist!
Thanks Danny 😃
My fav sifu coder... Finally... Thank u for your time to make this for us.. 🙏
My pleasure 😊
This is the best react tutorial on the internet. When I started learning React from other resources, I did not understand much and rather it was confusing, but you helped me clear my doubts and concepts. You have the best way of explanation, easy and simple. Thanks a lot 😊😊😊.
Great to hear that Yuvraj! :)
Finally someone who can explain and teach React ! Thanks🤘
I love his enthusiam it's infectious !
I've learned a lot from your Modern JavaScript course on udemy. Thank you Shaun for making it easy to understand.
Hi Shaun, thanks for taking the time again for creating this updated React tutorial. The previous ones were already great. Expectations are thus high for this new series. :-)
Hope you enjoy!
Hello, if you remember me I comment on your CSS tutorial and after that I came here to learn React because I have knowledge on js but not pro and I was amazed. You explained every single detail the react can do
Thank you so much Shawn or Sean whatever your name is called sorry. You really teach well and the professor from my school is no match from you.
I love your exlanation your are among many the best teacher of REACT I learn a lot with you and in a simple english.
The best explanation , easy, simple. Thanks again!
This is probably the most important 1st video a beginner needs -- after setting up all of react of course. Awesome video, and what a nice man for taking the time to show us the basics. THANK YOU!
Awesome, thank you for your kind words! :)
So far so good. I just started your tutorial. Your presentation is perfect.
this modern recap for react is so refreshing :D
This tutorial is expended my horizon !!!
This is by far the best react tutorial I’ve watched! Thank you!
Wow, thank you! :) glad it was helpful
I'm actually watching all the ads just for your sake ❤️ the least I can do for you
Good lessons with vivid examples which arise my motivation of study 😊
Short Clear Useful => Amazing Tutorial!
Oh no! I got to the 4th one and you haven't uploaded the rest! I know it's Christmas, but I hope you can. Enjoying it so far!
Working with Shaun as usual, watching TheNetNinja as usual ...
Shaun, your videos are perfectooooo
really nice. i wanna learn react from a long time
You are the Best. Thank you so much!!
Hi Shaun I make it sure to come and like your new videos. Every video is value addition to your courses here in UA-cam.
Thank you so much!
thanks for this amazing course sir
Passing classes with this Senpai. A-ni-ga-to....
Great explanation thank you sir :-)
Tnx For Basic Information ❤️
Recap
we can assign numbers, strings, etc to variables and output them within curly braces in template, it is called dynamic value. for example:
const greetings = 'hello world'
const num = 50
{ greetings }
{ num }
we can also output data directly inside curly braces such as
data { 10 }, string { 'hi, there ! },array { [1, 2, 3, 4, 5] }, or evaluation { Math.random() * 10 }, etc.
we can also assign dynamic value to attribute, for instance,
const link = '.google.com.tw'
about
you can't print object but you can definitely retrieve the object's value such as { person.name } or { person.age }
Yea totally
yeah exactly
Absolutely love and learning a lot from this series!
What's the frequency of upload going to be? By when can we expect this series to end?
PS:Not asking coz I want it to end asap, just wanna know the timeframe, cant wait to see myself come out as a React ninja by the end of it :P
i didn't know before that i'm able to print arrays like what you did I used to loop on them , Thanks sir
This was just an example. For a better overview you should loop through the array.
Nice workshaun
you my man. are awesome.
Great stuff! Will you have the full course on Udemy?
i have just subscribed for your awsome teaching and accent
Thank you! :)
Hi Shaun, thanks for this great tutorial. Are there any member specific courses or content? I want to join your channel.
Is there a need for Redux with so many new features in React relating to state management, what's your opinion ?
great video man
Great video. How did you comment at 2:35 with briskly?
Thank you sir
I have one Problem not in these Serie but with Reac-Native I will tell you more next Thank you so much
Nice simple🙂
I've been watching your tutorials for years here on youtube or on udemy and they are always to the point and well organized. But strange thing is that Yoshi is still 30 :)))
🤣🤣🤣🤣
Thanks 🙏
Thanks sir
thanks
Very good 🤠
Master shifu 🐰
I got a question. Why should we write the js code before the return value if we can just write it inside our div directly ? Couldnt we just write "Welcome to the new blog" above the "hello, ninjas"? why do the extra step?
Will you be releasing a full react course on udemy?
You can output object values, for example.. {person.name}, correct?
Sir please teach redux saga too please
Thank you for this! How many more videos are going to be released?
Hey Jomar, there will be a total of 32 videos in this course :)
The Net Ninja thank you again Shaun! Looking forward to the complete release
You can't render the person object but you can render it's data by doing something like {person.name}
is there a functional reason you put a space before and after the inputted variable in the curly braces? or is it purely for aesthetics?
It's just for readability and 'aesthetics'.
ty.
When I save the file the formatting goes skew. I have to go and physically change with settings select language, how do I get VScode to detect react?
one key point is React (JSX) ignores boolean & falsy values like null & undefined. Nothing is printed to the screen in that case.
you can print boolean values using value.toString() in that case boolean is converted to string & printed on screen.
or use String(value), this one can also be used for undefined & null.
In Django we use block title and block body.. How can we get same functionality in react???
Any future React course on Udemy, Shaun?
the net ninja is #1
what is the dynamic value here which you are taking about??...is it the value that is written and understood in java script??
nice
I hope the whole tutorial is detailed like that and still valid in 2024.
Maybe you can specify it in the comment section if it is still valid in 2024 or you can tell us the things that are changed.
Thank you for the video tho!
The main concepts are still relevant but there could be some syntax changes :)
I dont know how many times i clicked on that pending VS-Code update on your screen, ... thinking that its mine.
Hello Shaun , at 2:20 it shows error for you on the web page but for me it's displaying an empty web page and if I open the console to check for any errors then I can see the error you got over there . Why is it not visible on the webpage and is visible in the console ??
Please do reply . I wasn't able to figure it out until I opened the console .
I have this too :/
Sir, where can I download the JS server?
Why my react app not displaying the error?
Ninja i need to know who is yoshi.. Seen in all tutorials xD 😁😁
mern stack next?
I was surprised when you used the word "yoshi" because this word also exists in Uzbek and it means age 😂😂
Haha, I had no idea - brilliant!
Anyone getting a blank page for the error?
but aren't arrays objects? The part where ninja is going over dynamic variables inside of { }. So this must be a React thing because in javascript arrays ARE Objects so by rights arrays shouldn't work inside { } got me scratching my head a little..
2:23 can not output Object, boolean
After searching for tutorials and listening to various popular channels on this subject, I have came to settle on yours. Why? It's because you don't rush or speak too quickly, you speak at a pace I can code alongside. You also cover the material really well, but not at a level that's out of scope for the level being taught.
Thanks
brian design moment
Hello Việt Nam
who's here in 2024
Flutter