ReactJS Course [3] - Ternary Operators, Lists in React, Css in React

[@vinaypatil8009]

Don't worry man Your course is perfectly on going just continue in this phase Medium length videos + exercises at end Awesome course You can add more important stuff at any time as per your experience in this series also , that could be great help for beginners like me Thanks brother for this Reactjs course

[@PedroTechnologies]

Thank youu!!

[@alexcruz8024]

@@PedroTechnologies learning lots thank you!

[@nk-hu7pt]

@PedroTechnologies thank you!

[@zoltanmolnar6956]

in my oppinion this playlist is standalone enough to be production-ready reactJS developer, very very good composition, thank you

[@kelechiuroko6562]

The exercises at the end of the videos standout for me. For someone like me who watch all through, it ensures i get to practice what i learned.. Nice work

[@crimsoncrap]

Pedro I am a intermediate python developer coming with no experience in Javascript. That said your videos are concise enough that I am easily understanding the concepts and using very minimal googling to fill in the gaps. This course is the best I have found for React and your hard work in putting this together is very much appreciated.

[@pocketacademy6371]

I struggled a bit at the start, took almost 3 days, but now got through it! And I've to say, your teaching is amazing!

[@achuntps0913]

You know what! I love your videos so much and I even watch them again and again instead of using social media in my spare time! Thank you, Pedro! Your videos let me know how to use my CSS & JavaScript skills in React! I've always been confused about how to change the syntax in React. I love the way you described the syntax in 'JavaScript first' -> shows the result and tells us how to write it in React, that's useful and understandable.

[@psydook]

Thanks! Great video , also a very Happy Birthdayy !! Keep educating us!

[@aabhasjain96]

Thanks you so much Pedro, I promised myself that I'll watch every video of this series. Also Belated Happy Birthday 🎂 I hope that you had a very good time anyway and that you’ve got an amazing year to come. Lots of Love from INDIA ❤

[@richardleungwoogabriel9317]

Pedro you are a BOSSSSSS!!! Thank you so much bro for everything you do!!, I'm starting to learn react now and i wish you can teach me everything. I learn so much through your style. Im changing careers from geologist and really need a mentor.

[@andalonds]

People take an hour to explain this. Weird. This is not long especially if you do it at 1.5 times the speed. Time saver truly. Thank you for your great work

[@i-001]

Awesome! I'm learning so much as I'm following along! Thanks Pedro!

[@notsurprised1537]

Good job bro. Nice explanations and keeping it short is good. Not making every lesson over complicated. Awesome work

[@verydifferentthought]

Yesterday I found u through ur react hooks tutorial and found this playlist. Omg bro ur gold

[@_soet]

Thank you Pedro for making my react journey a smooth one. It might interest you to know you're my mentor. Thanks for doing what you're doing .

[@gabrieloliveira3194]

Pedro, your videos are amazing. I'm looking for a good tutorial/course on React to recommend to some friends who are learning javascript and after watching your videos I will 100% recommend your channel! I wish I had seen this video 1 year ago when I started with React. I wish you all the best,

[@abahiduh3246]

Thank u very Pedro, This course is amazing. I will definitely follow, share and support your channel.

[@srikanthmedicherla3651]

Your course is going amazing! Will be watching for every upload here on out!

[@adamwohlberg3104]

Fantastic course!!! Thank you so much for creating this and presenting it so well. The only feedback is that I wouldn't call A && B a ternary operator - I would call it a hack using "short-circuit" evaluation. I like that you present it though since I had to dig in and try to understand it and I will start to use it, but I think it is best to not refer to it as ternary which involves three parts by definition: The expression A && B works to return B due to the way logical AND (&&) operations are evaluated in JavaScript and other similar languages. This behavior is part of the logical operators' "short-circuit" evaluation. The expression A && B is not a ternary operation because it does not follow the ternary operator's structure and does not serve the same purpose. Here's how they differ: Structure: A ternary operation in JavaScript and similar languages is structured as condition ? exprIfTrue : exprIfFalse. It consists of three parts: This course is so helpful! That would be the only update I would make in future courses.

[@dsouzaedson]

This was well explained. The exercise you give at the end of every video is truly helpful

[@RelaxingSounds-bl1dv]

Thank you for everything you do Pedro ! Just fixed so many mistakes I've made watching your videos.

[@hurleywflow2227]

Thanks for your knowledge and the ways you are conveying make me alert so much. Good Day 🇦🇺

[@PedroTechnologies]

Thank you!!

[@sarahcalbez7104]

I'm definitely binge watching this, maratonandoooo :D

[@ahmednassar2536]

Very easy explanation, and it's a great way to deliver the message. Keep going, Pedro's

[@aleksandarbursac4274]

This is first course I listening on english, before this I was listened course on my native language and it was easy to understand. But I can't say this is hard, it's isn't! I understand you at almost everything man, and yeah, this course is helpful. I am new in react and I hope I will figure out this!

[@albertkolanko9571]

Your course is extra, super and you give me your good vibe to coding in react - a lot of thanks :D

[@NaveenTechzone]

Very good explanation

[@SusanWinters]

Cool! I didn't know you could conditionally set the colors this way: Company Name

[@ahmedabdi6941]

Exactly what I was looking for! Thanks Pedro!

[@m.c.rodriguez28]

I believe the video length is great. Thanks for the content.

[@newtontimos7913]

I love your teaching Pedro, you are the best of all ,you are so precise in your explanation

[@poojakamble3643]

episode 3 - conditional rendering import './App.css'; function App() { const planets = [ {name:"Mars" , isGasPlanet:false}, {name:"Earth" , isGasPlanet:false}, {name:"Jupiter" , isGasPlanet:true}, {name:"Venus" , isGasPlanet:false}, {name:"Neptune" , isGasPlanet:true}, {name:"Uranus" , isGasPlanet:true}, ] return ( {planets.map((planet,key)=>{ return {planet.isGasPlanet ? planet.name : null} })} ); } export default App;

[@lancemclachlan8657]

Awesome video! I also found that you can use quick actions to move a function to a new file and it automatically adds the necessary import and export code

[@Salah-YT]

thank u so much bro ill go to next video bro well done

[@yassinechritt8816]

You truly are a great teacher

[@ntandajohn6820]

kudos pedro

[@krisfafrowicz7542]

You are doing great on these videos! Really am learning alot! Thanks!

[@brighteyo2603]

Why do these variable names sound like kids from stranger things This course is very precise and straight to the point, easy to understand. Good job man

[@PedroTechnologies]

I was watching season 4 of stranger things during this course lmaooo

[@brighteyo2603]

@@PedroTechnologies 😂 😂 Cool! Whats the VS code theme extension you're using please?

[@xiangqiao1010]

const planets = [ { name: 'Mars', isGasPlant: false }, { name: 'Earth', isGasPlant: false }, { name: 'Jupiter', isGasPlant: true }, { name: 'Venus', isGasPlant: false }, { name: 'Nepyune', isGasPlant: true }, { name: 'Uranus', isGasPlant: true }, ]

[@ayeshaawan-fq3on]

finally i found a perfect course for me , Thankyou so much

[@navinkukreja1051]

You are Champ Man.. Keep going.. You are really doin good bro..

[@abcq1]

Hello, Pedro) Thanks for your hard work doing this tutorials. Is it possible to ask you to clarify some specific topics about React? There are some that aren't covered well in variety of other tutorials

[@PedroTechnologies]

Yes!! What topics do u want?

[@ИннаБогданова-к4щ]

@@PedroTechnologies Pedro, salut))) THANK YOU A LOT! in next topics we can cover hooks one by one)

[@abcq1]

​ @PedroTech Hi, Pedro, and thanks for your response)) Could you please talk in a bit deep details about optimization techniques available in React like useCallback and useMemo hooks. When to use them exactly, what is considered to be a "heavy calculation"? Is there any real reason to use class components in 2022? Is it ok to declare utility functions outside of the components? Could you make a separate deep tutorial on most common antipatterns we might use as React devs? Hope this list is somewhat ok)) Thanks in advance)

[@waleedsharif618]

Awesome like always !

[@gabrieleravene]

i really like the way you teach. thank you!

[@dionardomarques18]

Pedro, this way you are doing the videos it's awesome, make the learning more dynamic and with some exercises in the end will fix what we learned more easily. I have some question about the props, in the previous video you created the component inside the App.js file, but now you created a new file for the component and used the props it well. My question is about the usage of the props around the code, have some limitations or I can use in anywhere? Thanks a lot for the videos, you are a really good teacher :)

[@PedroTechnologies]

Heyy, you can use props in ny component. Think of a component as like a javascript function. You can put it anywhere you want as long as you export it so you can access it in another file. Now think of a prop as like a normal argument that a function has. You can pass anything you want as a prop, like strings, numbers, functions, objects, even other components. There are no limitations in that sense!

[@dionardomarques18]

@@PedroTechnologies Ohhh okay, now is more clarify to me. Thanks for the explanation

[@ranga3194]

Happy birthday pedro♥️♥️♥️♥️

[@PedroTechnologies]

Thank you!!!!

[@k303k]

Done! thanks a lot sir

[@ayyapparock]

super explanation by breaking into parts

[@doppel33]

Pedro thank you for the amazing content! The discord link in the description is not working by the way.

[@dginvestor6483]

thanks sir for this course I learn a lot from you

[@nthiwafelix7967]

The CSS modules ensures that your styles don't conflict especially in big projects.

[@yassiribrahim7521]

Thanks PEDRO

[@luckytechpro9537]

Keep it up man!!

[@saptarshibhattacharya2505]

just dont put the key attribute in your anonymous function for the same functionality. Otherwise prepending it with `_` is also fine. Therefore (name) => {return xyz} or (name,_key) => {return xyz} are both valid code which wont give any errors and are cleaner than adding useless html attribute too.

[@dragosp.7635]

Pedro, at 27:26 why don't we put planet.isGasPlanet in curly braces?? i can't understand why we must put {planet.name} but not {planet.isGasPlanet}

[@ViswanathCodes9999]

planet.isGasPlanet is condition {planet.name} is object property

[@durgfestivalvibes]

Awesome videos man, thanks a lot ❤❤❤❤❤❤❤❤

[@PabloReviews]

Did you mentioned why do you separate the opening html tags and the text inside them with 1 space? Example instead of Example

[@programingwithabhi2631]

Thank you bro for the Course ❤

[@MarianaMoscu-t6i]

Thanks you so much Pedro!

[@akhilac-sc3mz]

Thanks for the videos , how to pass key values while we export component using props

[@roman_k89]

hi, do you plan to include in your course (after basics) some libraries, like Formik? thanks, you're doing a great job helping other people to get new skills and to improve their lives!

[@aabhasjain96]

Hey, watch the 1st video of this series, there at the start he has mentioned all the topics he is going to cover. Also Yes he is going to teach formik library as well.

[@PedroTechnologies]

Yess!! I will teach some extra libraries including formik and YUP

[@aabhasjain96]

Hey Pedro, Please check my message on LinkedIn

[@bishalbhattarai9508]

Sir can you explain about class and functional component and also frontend design with react like creating real website with design

[@PedroTechnologies]

Projects will come later on in the course! The difference between class and functional component is the syntax and methods used. Dont use class components, they are outdated and obsolete

[@bishalbhattarai9508]

Thank you so much sir.

[@mahmoudrabbas]

I think "component.module.css" is better than the normal way of "component.css", because the normal ruins the style if you use same class name in another component it will override it at all.

[@harijapandi]

Really awesome bruhhh....!

[@dev_mastery43]

it is very hard to get like subscribe from me on youtube but your content force me to not leave without done that :) great effort

[@michaelnakis9594]

React bug maybe? Had a problem where no names was displaying when using "user" as the parameter ,only the ages were displaying. Changed "user " in the map section to "item" and started working

[@giorgigegeshidze9180]

Why we don't use the key attribute in ?

[@dharmeshgohil9375]

awesome .......

[@radimvlasak4157]

Thanks for tutorial, i have one question. Shouldnt we name the User component User.jsx instead of User.js when we work with jsx ? what is the difference between naming the files .js or .jsx ?

[@PedroTechnologies]

Both works the same way. Later on in the course i will go over best practices, i personally prefer to name pure javascript files with .js and components with .jsx (i technically use typescript but i will teach typescript later on)

[@raphaelrocha313]

Hi Pedro! thanks for the video ! my answer was like this return ( {planets.map((planet,key) => { return ; })} ); did i overdo it ? was it a good way of using components ?

[@leonardobalduzzi8613]

Your solution also works, but it's not clean. You are rendering all the planets even the ones that are not gas planets, you are just hiding the name; and you are passing a div as the name which is not recommended.

[@404statuscode]

I tried the import and use method for planets array as well. It worked but is it a good practice

[@limitless003]

Thanks bro

[@souratirera3388]

Thank u so much... Much love

[@wei7360]

hey pedro, very much thanks for the videos. I like your format and much easier to digest than other teachers. With that being said, I have a question in this episode: {{ color: isGreen ? "green" : "red" }}.... How does JS know that "green" string is the green color? Is it already a defined variable in JS? Thanks

[@leonardobalduzzi8613]

Hi! In CSS there are actually predefined colors that you can use as strings (instead of HEX or RGB), you can just search online for "CSS valid color strings"

[@mehdibenzzine9746]

Thank you Pedro you're a beast...i have a question thou XD! how can we make that logic reusable (I'm talking about the last exercise) i tried to make it as a separate component but I failed! can you help with that !

[@rogeclash2631]

Amazing many thanks

[@dimasnytin]

Thanks you from your work

[@dharansa3347]

Thanks much for awesome videos.. Can you upload videos every alternate day if possible

[@PedroTechnologies]

I will try my best! I couldnt this week because it was my birthday week. Starting next week I will post 3-4 times a week

[@dharansa3347]

@@PedroTechnologies Thanks for the response. Belated happy birthday

[@bhuvanvarma7326]

in [eslint] src\App.js Parsing error: Invalid parenthesized assignment pattern. what is this error

[@2ameridiem]

i tried displaying the list by using forEach method but it does not render the names on my page. function App() { const names = ["john", "jessica", "mike", "dustin"]; return ( {names.forEach(function (name) { return {name}; })} ); } here is the code i wrote. can someone please explain why is this not working?

[@vishwasgupta605]

can anyone please explain why we didn't use function with props in Planets exercise? can we not use conditionals statements within Planets element if used with props : return like this? in this statement somehow fit ternary operator. Help me out guys cant figure when to use props and when not to.

[@rakshapadiyar]

import styles from './App.module.css', and implementing classname with styles as styles.name, I dont think this is working anymore... Also, what is it trying to import as "styles", there is nothing exported in the file './App.module.css'.

[@newagecoder5417]

Will this only make me beginner sir?

[@brajagopalmukherjee1588]

Man can u make 1 hour long video if possible ,till today i completed all lectures,can u share more task ?

[@readbeforeyoureply64]

Hey man thanks for the course, my code works fine but console has these errors React errors, 24 of them how can i remove them?

[@PedroTechnologies]

Can you paste the errors here?

[@readbeforeyoureply64]

@@PedroTechnologies Thanks for responding i think when i played around the code i fixed it cause I can't find them anymore.

[@ry902]

hi Pedro amazing series . one issue i have is that react autocomplete is not working for my .js file like style or color .is there any solution for that . thanks again for this series .

[@bluewonk9232]

Just......thanks !

[@srinathsri6975]

nice pedro 😊😊👌👌👌👌👌👌

[@АлександрГринёв-г5я]

Why intellisense does not work when I typing styles?

[@ducouteausect3231]

const planets = [ { name: "Mars", isGasPlanet: false }, { name: "Earth", isGasPlanet: false }, { name: "Jupiter", isGasPlanet: true }, { name: "Venus", isGasPlanet: false }, { name: "Neptune", isGasPlanet: true }, { name: "Uranus", isGasPlanet: true }, ];

[@kyureikim6507]

return ( {planets.map((planet, key)=> { if (planet.isGasPlanet) return {planet.name}; })} ); it's not working in my own code for the exercise

[@ViswanathCodes9999]

i think i am also facing same problem bro..

[@leonardobalduzzi8613]

@@ViswanathCodes9999 it's cause we are missing an "else" statement. here is the correct code: {planets.map((planet, key) => { if (planet.isGasPlanet) { return {planet.name}; } else { return null; // or any other value you want to return for non-gas planets } })}

[@VijayVijay-bi8mj]

❤️

[@VinciJeremy789]

you are professor Oak for me...if I am Ash :D

[@washinerdev4355]

Pedro are you Brasilian???

[@vanditdubey]

if I want to conditionally render user whose age is above for eg 21, how will we do that ? can somebody please tell me ?

[@ViswanathCodes9999]

const age = 29; { age >= 21?Over age :Under age } output = Over age.

[@vivekanand5900]

Stranger things character 😁

[@_saudi9]

i see that components it replacing 1,000 lines of code with 1,000 file of code

[@bilal5488]

❤️🤭

[@augischadiegils.5109]

❤️❤️❤️

[@rakeshgarlapati3965]

function App() { const planets = [ {name:"Mars", isGasPlanet:false} {name:"Eartth", isGasPlanet:true} {name:"Jupiter", isGasPlanet:false} ] return ( {planets.map((planet,key) => { return {planet.isGasPlanet} ? {planet.name} : ""; })} ) } My Sol

[@abdessamade6995]

😍😍😍😍