Full React Tutorial #4 - Dynamic Values in Templates

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

[@shubhang2877]

Ive watched him so much that I say "Alright then gang" with him

[@JonsonNcube]

Hahahaha! Same here, I even talk to my fam like that... 😅

[@codedynamics1]

😂

[@sandrinjoy]

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 ❤

[@NetNinja]

Thanks so much :)

[@vaishnavplays203]

hii pakalu papito aka binod XD

[@sandrinjoy]

@@vaishnavplays203 shh.

[@belzeebub6022]

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.

[@nextjs123]

Best React Tutorial on KZbin with Clear Concepts. Thanks The Net Ninja from my deepest heart.

[@dannyman2200]

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!

[@NetNinja]

Thanks Danny 😃

[@onrjs]

I've learned a lot from your Modern JavaScript course on udemy. Thank you Shaun for making it easy to understand.

[@rin0422]

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.

[@allanregista4422]

My fav sifu coder... Finally... Thank u for your time to make this for us.. 🙏

[@NetNinja]

My pleasure 😊

[@codedynamics1]

I love his enthusiam it's infectious !

[@konulaliyevaa]

The best explanation , easy, simple. Thanks again!

[@eugenentamack5023]

I love your exlanation your are among many the best teacher of REACT I learn a lot with you and in a simple english.

[@csereal100]

Finally someone who can explain and teach React ! Thanks🤘

[@pieteromt8121]

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. :-)

[@NetNinja]

Hope you enjoy!

[@yuvrajs8080]

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 😊😊😊.

[@NetNinja]

Great to hear that Yuvraj! :)

[@BizzaroBrainBoi]

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!

[@NetNinja]

Awesome, thank you for your kind words! :)

[@redMaple_QC]

So far so good. I just started your tutorial. Your presentation is perfect.

[@matthewbeardsley7004]

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!

[@stwarrior9983]

This tutorial is expended my horizon !!!

[@kinstar]

this modern recap for react is so refreshing :D

[@chertsfieldminos2881]

Good lessons with vivid examples which arise my motivation of study 😊

[@lockborethdevid3533]

Short Clear Useful => Amazing Tutorial!

[@akromxujaniyozov7050]

Shaun, your videos are perfectooooo

[@ccc23892]

This is by far the best react tutorial I’ve watched! Thank you!

[@NetNinja]

Wow, thank you! :) glad it was helpful

[@hristoplamenov1942]

Working with Shaun as usual, watching TheNetNinja as usual ...

[@Biotoxic510]

You are the Best. Thank you so much!!

[@maskman4821]

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

[@beinyourguard]

really nice. i wanna learn react from a long time

[@jasper5016]

Hi Shaun, thanks for this great tutorial. Are there any member specific courses or content? I want to join your channel.

[@shanny104]

thanks for this amazing course sir

[@troymitchel4790]

Great stuff! Will you have the full course on Udemy?

[@sayemarg]

Tnx For Basic Information ❤️

[@janduna9187]

Is there a need for Redux with so many new features in React relating to state management, what's your opinion ?

[@veekay5195]

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?

[@veekay5195]

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

[@daothientoan]

Passing classes with this Senpai. A-ni-ga-to....

[@GiancarloCarccamo]

great video man

[@saadafzal7844]

Great explanation thank you sir :-)

[@mohammadabdelrahman786]

I'm actually watching all the ads just for your sake ❤️ the least I can do for you

[@nnn039]

Hi Shaun I make it sure to come and like your new videos. Every video is value addition to your courses here in KZbin.

[@NetNinja]

Thank you so much!

[@yagami-light]

you can't print object but you can definitely retrieve the object's value such as { person.name } or { person.age }

[@nnanadavid9676]

Yea totally

[@nileshshetty2496]

yeah exactly

[@tea936]

Great video. How did you comment at 2:35 with briskly?

[@kingprecious5783]

Nice workshaun

[@tarekghosn3648]

you my man. are awesome.

[@nobeltheinsider]

i have just subscribed for your awsome teaching and accent

[@NetNinja]

Thank you! :)

[@officerdoofy6693]

Will you be releasing a full react course on udemy?

[@eugenentamack5023]

I have one Problem not in these Serie but with Reac-Native I will tell you more next Thank you so much

[@uzair004]

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.

[@moustafamahmoud4948]

i didn't know before that i'm able to print arrays like what you did I used to loop on them , Thanks sir

[@JohnnyBigodes]

This was just an example. For a better overview you should loop through the array.

[@luyolopondo9934]

Nice simple🙂

[@giorgi23]

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 :)))

[@tenc6491]

🤣🤣🤣🤣

[@leodragonheart754]

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?

[@AccessCode101]

Any future React course on Udemy, Shaun?

[@nandopookey9195]

Thank you sir

[@spinorapps3334]

Very good 🤠

[@BobstyleLiving]

Master shifu 🐰

[@jomarrumbawa6176]

Thank you for this! How many more videos are going to be released?

[@NetNinja]

Hey Jomar, there will be a total of 32 videos in this course :)

[@jomarrumbawa6176]

The Net Ninja thank you again Shaun! Looking forward to the complete release

[@sueholder703]

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?

[@irfk4173]

You can output object values, for example.. {person.name}, correct?

[@Se.mu01]

Thanks 🙏

[@aayushpatil7514]

Thanks sir

[@therichardchannel]

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?

[@shr1han]

It's just for readability and 'aesthetics'.

[@Soap_js]

You can't render the person object but you can render it's data by doing something like {person.name}

[@abhayrana4955]

what is the dynamic value here which you are taking about??...is it the value that is written and understood in java script??

[@abdulrehmanrais1077]

In Django we use block title and block body.. How can we get same functionality in react???

[@yadneshkhode3091]

Sir please teach redux saga too please

[@Mahmudulhasan-ts5hm]

thanks

[@realtorBG]

the net ninja is #1

[@bharadwajsaibandaru4323]

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 .

[@roschellemr2228]

I have this too :/

[@ardavural4649]

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!

[@NetNinja]

The main concepts are still relevant but there could be some syntax changes :)

[@henrywang2516]

Sir, where can I download the JS server?

[@ridl27]

ty.

[@akujin19]

Why my react app not displaying the error?

[@PriyanshuRaj-oc4tk]

nice

[@mtshgaming292]

mern stack next?

[@mtsurov]

I dont know how many times i clicked on that pending VS-Code update on your screen, ... thinking that its mine.

[@karthifairhawn9825]

Ninja i need to know who is yoshi.. Seen in all tutorials xD 😁😁

[@RustamRustamov-eu1dv]

I was surprised when you used the word "yoshi" because this word also exists in Uzbek and it means age 😂😂

[@NetNinja]

Haha, I had no idea - brilliant!

[@codedynamics1]

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..

[@roschellemr2228]

Anyone getting a blank page for the error?

[@TheScottishDad]

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

[@russellkirkpatrick9603]

brian design moment

[@toannew]

2:23 can not output Object, boolean

[@tranxuanbac7013]

Hello Việt Nam

[@rajgautam3621]

Flutter