For anyone who wonders why can we put jsx element inside a variable without it being a string, it's because jsx elements are just wrappers for function calls. so: let message = hello is the same as: let message = document.createElement('div'); message.innerHTML = "hello";
For those who are watching this in 2022 and are unhappy that Vishwas is using classes instead of functions, you can code along using functions. make sure that instead of creating a constructor with this.state={someProperty: "someValue"}, you just create a useState hook like this: const [someProperty, setSomeProperty] = useState("someValue"). Make sure you import {useState} from 'react'. Also whenever Vishwas is using this.setState("anotherValue") to change this.state, you simply uset setSomeProperty("anotherValue") and the state/someProperty changes. And last thing I want to mention is you don't need render (), just return.
Thank you so much! You're an inspiration, I follow your tips, tricks, and suggestions wherever applicable and feel grateful for your presence on TH-cam!
Thank you for the great full course Vishwas bro. I have tried to explore all of the popular tutorials on TH-cam. Almost all of these videos do not attempt to provide full instructions. They just cover the basics and say if you want to get the full tutorial click the link below and get it with a discount. So it is a sorta advertisement. But your course is better than theirs. Even Mosh Hamedani's react course cannot provide as clear details as yours can. I APPRECIATE YOU BROTHER. THANKS FROM UZBEKISTAN.
00:05 Conditional rendering in React allows showing or hiding HTML based on conditions. 01:39 Adding conditional rendering in ReactJS 03:12 Conditional rendering in ReactJS with if-else statement 04:49 Conditional rendering in ReactJS using if-else statements and element variables 06:26 Implement ternary conditional operator for simpler JSX rendering 08:00 Conditional Rendering in ReactJS using ternary operator 09:19 Conditional rendering in ReactJS using short-circuit operator. 10:38 Four approaches to conditionally render UI in React
Hey dude, I am very happy about this your tutorial! :) You helped me to find a way to solve some of my own ideas in coding in some advances from the previous lessons. GREAT JOB!!! (Y)
Creating a new file in the components folder every time we switch to another concept is just an amazing choice to keep track of our previous work and come back to it later if we need to! thank you very much for the amazing content. keep it hight and up !!!
You can also: ( this.state.condition && outcome A || outcome B ). Or : ( this.state.condition ? outcome A : null ). Not really important, in general these operations do the same thing, just good too know that.
The tutorial is super. My only concern is related with return statements in the render method, it is no clear when we use parenthesis, when we use curly braces and when nothing. For example in this video when element variables used as an option, the {message} variable can't used without div's, this is strange because the {message} is already included in div tags at the if/else statements.
I know this is a relatively old comment but I'll just input what I understood so that it might give others an idea. Regarding the element variables method, remember that returned JSX elements always have to be enclosed within a single tag (usually div). In the example code the final message variable returned does not actually require an outer div tag before returning because it is storing only one tag inside, but if the message variable stores multiple tags like maybe a div tag and a button outside the div, then enclosing the message variable within an outer div tag before returning ensures errors do not happen. Regarding the return statements, we use parenthesis when we have more than one executing statement. So if you are using Ternary operator methods, the whole a ? b : c or a && b are single executing statements and hence do not require parentheses, whereas each JSX tag are individual executing statements so better to enclose them in parentheses if you have more than one JSX tag. To avoid confusion you can opt to use parentheses all the time.
I've noticed that throughout the whole course you've never used a semicolon to break your statements... I wonder if it makes a difference and why would we use it sometimes? thank you
Java script treats every line break as an "implicit" semicolon. This is called java script "automatic semicolon insertion". In most cases new line implies a semicolon but every new line does not mean a semicolon. Hence only seasoned developers should omit semicolon as they are aware of its pros and cons.
in jsx (return) part - can't write if/else but in render method outside jsx, can write if/else, variable decla&usages, ternary operator, logical && - to conditionally render UI in react:
./src/components/UserGreeting.js SyntaxError: C:\Users\Dell eact app\hello\src\components\UserGreeting.js: super() is only valid inside a class constructor of a subclass. Maybe a typo in the method name ('constructor') or not extending another class? (5:2).....What kind of error is this?
@milan poudel : you get error because you missed to extend it from component Write class UserGreeting extends Component {} instead of class UserGreeting {}
fuckin right i thought i should give react a try i am from vue background and the way react handles iterative elements and conditional rendering its disgusting
@@KanecoV its a bit different in a sense but you get hold of it after working in it Not harder but comparing to Vue .React conditional renedering and iterating syntax is inferior 😂
1:35 - IF/ELSE
5:07 - Element Variables
7:06 - Ternary Conditional Operator
9:20 - Short Circuit Operator
For anyone who wonders why can we put jsx element inside a variable without it being a string, it's because jsx elements are just wrappers for function calls. so:
let message = hello
is the same as:
let message = document.createElement('div');
message.innerHTML = "hello";
I think this is partially correct. My guess is that it compiles to:
let message = React.createElement('div', 'hello');
ooooh thank youu i always felt weird typing it but now i know what it means :D
For those who are watching this in 2022 and are unhappy that Vishwas is using classes instead of functions, you can code along using functions. make sure that instead of creating a constructor with this.state={someProperty: "someValue"}, you just create a useState hook like this: const [someProperty, setSomeProperty] = useState("someValue"). Make sure you import {useState} from 'react'. Also whenever Vishwas is using this.setState("anotherValue") to change this.state, you simply uset setSomeProperty("anotherValue") and the state/someProperty changes. And last thing I want to mention is you don't need render (), just return.
Vishwas has also taught React hooks though in the later part of the series..
Thank you so much! You're an inspiration, I follow your tips, tricks, and suggestions wherever applicable and feel grateful for your presence on TH-cam!
After going through so many different paid and unpaid tutorials, I can this one is the best among all.
you make complex stuff, very simple , thank you.
this guy is really doing great things..am i right???
@@fennecLens Of course you are right, hope to complete the series
Thank you for the great full course Vishwas bro. I have tried to explore all of the popular tutorials on TH-cam. Almost all of these videos do not attempt to provide full instructions. They just cover the basics and say if you want to get the full tutorial click the link below and get it with a discount. So it is a sorta advertisement. But your course is better than theirs. Even Mosh Hamedani's react course cannot provide as clear details as yours can. I APPRECIATE YOU BROTHER. THANKS FROM UZBEKISTAN.
I literally watched the first 3 minutes of your video and was able to write my first if/else statement in react...thank you!
0:35 frou kinds of conditional rendering
4:40 JSX is syntactic function of ...
5:10 2nd approach: element variable approach
7:58 3rd approach: ternary condition operator (recommended)
9:10 4th short-circuit operator approach (recommended)
The best teacher i've ever seen.
This course is unbelivable. It worth a lot
Sir this react series is best series in TH-cam now.
thanks a ton for your effort.
00:24 - different types
00:35 - If / Else
05:07 - Element Variables
07:06 - Ternary Conditional Operator(? :)
09:20 - Short Circuit Operator(&&)
Thank me later.
00:05 Conditional rendering in React allows showing or hiding HTML based on conditions.
01:39 Adding conditional rendering in ReactJS
03:12 Conditional rendering in ReactJS with if-else statement
04:49 Conditional rendering in ReactJS using if-else statements and element variables
06:26 Implement ternary conditional operator for simpler JSX rendering
08:00 Conditional Rendering in ReactJS using ternary operator
09:19 Conditional rendering in ReactJS using short-circuit operator.
10:38 Four approaches to conditionally render UI in React
Hey dude, I am very happy about this your tutorial! :)
You helped me to find a way to solve some of my own ideas in coding in some advances from the previous lessons.
GREAT JOB!!! (Y)
Creating a new file in the components folder every time we switch to another concept is just an amazing choice to keep track of our previous work and come back to it later if we need to! thank you very much for the amazing content. keep it hight and up !!!
Dear Vishwas,
Hats off to you for all the video tutorials. I've learned a lot from this channel. Keep up the good work. 👍
You are an amazing tutor
¡Amazing! It has helped me a lot, thanks.👏🏻
old but good, You guy make my learn so easily ❤️❤️❤️
Is it ok to use first/second approach? I really don't respect 3rd and 4th and never used it before, I should get familiar with it through time.
This is incredible content - thank you for all of your hardwork in creating such an easy-to-follow tutorial!
How is he immediately able to change the closing tag to an auto-closing tag. Like to . Is there any keyboard shortcut for this?
Man, you are awesome. A terrific tutorial indeed. Love you buddy!
reallythanks alot you have excellent way to explaine
completed video 16. Thank you 🙂
return this.state.isLoggedIn && Welcome Logged || Guest Please add || condition, so that it will have both condition which is better approach
im stuck in vanilla javascript... but this makes sense much much more
Awesome very good explanation, Thanks
U are doing grt sir...can you tell me which snippet you are useing for code in react
1:33 - IF/ELSE, 5:05 - Element Variables, 7:07 - Ternary Conditional Operator, 9:22 - Short Circuit Operator
Is there any difference other than the syntax ?
// Type3: Ternanry Operator
return this.state.isLoggedin ? Welocme Vignesh : Welocme Guest
// Type4: ShortCircuit Condition
return this.state.isLoggedin && Welocme Vignesh || Welocme Guest
Thanks for the video. Really helpful
You can also: (
this.state.condition && outcome A || outcome B
).
Or : (
this.state.condition ? outcome A : null
).
Not really important, in general these operations do the same thing, just good too know that.
in case of short circuit approach how can we print something in UI if the first condition is false
The tutorial is super. My only concern is related with return statements in the render method, it is no clear when we use parenthesis, when we use curly braces and when nothing. For example in this video when element variables used as an option, the {message} variable can't used without div's, this is strange because the {message} is already included in div tags at the if/else statements.
I know this is a relatively old comment but I'll just input what I understood so that it might give others an idea.
Regarding the element variables method, remember that returned JSX elements always have to be enclosed within a single tag (usually div). In the example code the final message variable returned does not actually require an outer div tag before returning because it is storing only one tag inside, but if the message variable stores multiple tags like maybe a div tag and a button outside the div, then enclosing the message variable within an outer div tag before returning ensures errors do not happen.
Regarding the return statements, we use parenthesis when we have more than one executing statement. So if you are using Ternary operator methods, the whole a ? b : c or a && b are single executing statements and hence do not require parentheses, whereas each JSX tag are individual executing statements so better to enclose them in parentheses if you have more than one JSX tag. To avoid confusion you can opt to use parentheses all the time.
Hi bro, your tutorials are really helpful for learning ReactJs. Thanks a lot for your help
Extraordinary explanation , thank you Sir.
Awesome explanation
awesome explanation 🙏
Saw a free react course...
Here goes my subscribe
hello sir what is container and presentation component
This is just awesome buddy.
Needed to let you know that you have saved the day for me
You are tutorials so good,why are you not posting in udemy so we can buy from you
I wish that would be more with functions than classes :D
can we get code snippets for every lecture ?
nice tuturial
I've noticed that throughout the whole course you've never used a semicolon to break your statements... I wonder if it makes a difference and why would we use it sometimes? thank you
Java script treats every line break as an "implicit" semicolon. This is called java script "automatic semicolon insertion". In most cases new line implies a semicolon but every new line does not mean a semicolon. Hence only seasoned developers should omit semicolon as they are aware of its pros and cons.
We MUST use it for CSS in javascript.
Your explanation is just amazing Sir :)
Clean and clear better than paid tutorials
bu güzel anlatım için çok teşekkür ederim. ingilizce bilmediğim halde yinede anlıyorum. sizin gibi değerli insanlara ihtiyacımız var.
Thanks!! Vishwas. I think it's better than paid...
Amazing Video
Better then any paid course
How can we return welcome guest with the fourth approach?
how to set render condition in my form is data is not there see "add button" and data is there in databse see "update button"
Love from Bangladesh
How can I use this kind of condition inside map function ,it does not support inside map .
Thank you .. Good Job
By now, I already love welcoming Viswas 🤣
why did we use return {message}, not return {message} ?
Becoz message variable holds the result of both the cases
This stuff cannot be nested. It has to be toplevel inside the return statement.
render() {
if(this.state.isLogedin){
return(
Welcome Lijo)
}else{
return (
Welcome Guest)
}
This is correct format
Thank you
Why does React don't have directeve like v-if or v-show to conditionaliy render data just like in Vue ???. it is much simpler and easer
8:26 What key was pressed to format the code?
@Gabriel Daniluk Thank you. :)
thank you so much
what is your plugin in mnt 8.25 for complete your coding
in jsx (return) part - can't write if/else
but in render method outside jsx, can write if/else, variable decla&usages, ternary operator, logical &&
- to conditionally render UI in react:
Its so weird that we can't use `if...else` but can use ternary.
this is great. I only wish this can be updated to react hooks.
He has a course on React Hooks as well
I love you, Vishwas.
amazing !
what's the name of the fourth approach again?
Noor, fourth approach is short circuit operator
Thnx loads...
But how does the component know if its logged in or not?
At 8.29 you adjusted the code, what is the shortcut to do so?
i guess its code formatter prettier
It's VS Code extension
./src/components/UserGreeting.js
SyntaxError: C:\Users\Dell
eact app\hello\src\components\UserGreeting.js: super() is only valid inside a class constructor of a subclass. Maybe a typo in the method name ('constructor') or not extending another class? (5:2).....What kind of error is this?
@milan poudel : you get error because you missed to extend it from component
Write class UserGreeting extends Component {} instead of class UserGreeting {}
thanks
{this.state.isLoggedIn ? (Welcome Vishwas) : (Welcome Guest)}
I'm coming from Vue/Angular. I wanna kill myself after discover how React manages conditional rendering.
I'm dead.
Why man??
In Angular, we have coolest directives , right;)
Live with that
fuckin right i thought i should give react a try i am from vue background and the way react handles iterative elements and conditional rendering its disgusting
@@dawoodchaudary8736 Does that mean its a lot harder?
@@KanecoV its a bit different in a sense but you get hold of it after working in it
Not harder but comparing to Vue .React conditional renedering and iterating syntax is inferior 😂
I totally agree. Angular is way more elegant but I have to learn this because unfortunately it's more popular in the industry
nice tutorial
thank you!! great tutorial series!!
please update it usi g functional component ,It's becomes too difficult to understand
What theme are you using for VS Code Editor? Really loved that Theme..
Should be the default one, at least its for me
Thanks!
is your name vishwas?
Great basics explanation !!! Thx !!!
but if else it also works in jsx
I found another way to this
Welcome {this.state.isLoggedIn?"Ashish":"Guest"}
in angular we just use *ngIf within the element haha
yaa and in Vue just use V-if, don't know why react is so complex for conditionl rendering
if state changes after initial rendering
@vishvas i am very thankfull to u. greate job
it will be great if you upgrade your course to react 2021 you surely will get lots of views
10:00 Short Circuit Operator double ampersand operator
Good day wishes
going through this playlist like snacks
🎓
what about jsx file
that's good
I had a doubt I am unable to remember this all in react i might remember what is what but not the syntax can you tell what to do?plz help
how to comment multiple lines using // with a single try?
select the lines and click ctrl + '/'
install the Babel Javascript extension in VS Code!
and then select the lines and hit this shortcut key : ctrl + '/'