Components, Props and JSX in React | Sigma Web Development Course - Tutorial

Поділитися
Вставка
  • Опубліковано 17 гру 2024

КОМЕНТАРІ • 1 тис.

  • @CodeWithHarry
    @CodeWithHarry  10 місяців тому +406

    React OP bolte

  • @rahulpaul12
    @rahulpaul12 10 місяців тому +75

    "Sir, this course is exceptional. Please don't assume people aren't watching it. You're covering so much valuable content, and it's not realistic to grasp it all in just two to three months. You're aware of that. We need time to fully comprehend and dedicate ourselves to it. I'm among those consistently following your videos, and I acknowledge it takes time. I'm watching your new videos, knowing I'll revisit them because I want to solidify my understanding of previous topics. So, please don't doubt the success of this course; it's truly the best course. i just feel bad whenever you say people are not watching it and people are loosing their energy noooo its not I'm not loosing my energy

    • @sadi404
      @sadi404 10 місяців тому +2

      Yes I agree with you this course is exceptional !

    • @devanshupadhyay2658
      @devanshupadhyay2658 9 місяців тому +1

      same , like after learning express i needed to crate a fully fledged web app to understand how post and get request were working.

    • @rahulpaul12
      @rahulpaul12 9 місяців тому

      @@devanshupadhyay2658 yess

    • @ydkms
      @ydkms 4 місяці тому +1

      I finished this course in 2 months though and I'm going to repay harry bhai with the money I earned.

  • @Hafijur0211
    @Hafijur0211 9 місяців тому +5

    🎯 Key Takeaways for quick navigation:
    00:00 *🚀 Introduction to Official React*
    - Introduction to components, props, and JSX syntax in React.
    00:36 *📁 Understanding Create React App (CRA)*
    - Explanation of the folder structure provided by Create React App (CRA).
    - How to use the folder structure and why it's beneficial for modern web development.
    01:32 *🛠 Setting up a Basic React App*
    - Setting up a basic React app using npm commands.
    - Understanding the project structure and running the development server.
    03:46 *🔧 Working with Function Components*
    - Exploring function components in React and their role in app development.
    - Emphasizing the importance of focusing on the function component's structure.
    04:13 *📚 React as a library vs. framework*
    - React is a library, not a framework; it targets specific functionality.
    - Frameworks, like Next.js, provide everything required to create an app.
    05:06 *🧰 JSX basics and rules*
    - JSX allows embedding JavaScript expressions inside curly braces.
    - JSX tags must be closed, and only one root element can be returned from a component.
    06:54 *🏷️ Using className instead of class*
    - In JSX, use `className` instead of `class` to avoid confusion with JavaScript's `class` keyword.
    - This ensures clarity between HTML and JavaScript contexts.
    08:17 *🛠️ Creating a navigation bar component:*
    - Demonstrating the process of creating a basic navigation bar component.
    - Using HTML tags like `

  • @coolcyberlife2425
    @coolcyberlife2425 10 місяців тому +112

    Now I am a developer it's been 1 year but I started my career by your video

    • @telebrains
      @telebrains 10 місяців тому +1

      How you get your first project and what did you done after it.

    • @coolcyberlife2425
      @coolcyberlife2425 10 місяців тому +2

      @@telebrains i am not freelancer i qualified an interview !

    • @skymaxgamingofficial
      @skymaxgamingofficial 10 місяців тому

      Can you tell us, which thing you have learn for job, pls

    • @Mysteriousking24
      @Mysteriousking24 10 місяців тому

      Dude without the degree you got job?

    • @coolcyberlife2425
      @coolcyberlife2425 10 місяців тому +3

      It's no achievement it industry is at ugliest stage, i sometimes start to think about selling Pani Puri or momose better 😅

  • @areebnadir5778
    @areebnadir5778 10 місяців тому +4

    00:01 Introduction to Veet and its usage in creating React app
    01:57 Creating a React app using JavaScript and modern tools
    06:17 Using class name instead of class in JSX
    07:53 Creating a navigation bar and explaining components
    12:03 How to center a div using CSS
    13:57 Styling with JSX and creating components in React
    17:55 Using props and styling in React components
    19:40 Understanding components, props, and JSX in React
    22:55 Using props to pass data in React components.
    24:32 Pass data as props and receive in another component
    Crafted byAI.

  • @ChinmayKaitade
    @ChinmayKaitade 10 місяців тому +8

    As we know harry bhai is #GOAT in Programming...
    Talking about this course, this course is totally free of cost as always and the quality of course is too good.
    Hat's of to you harry sir for such a valuable content.
    I request you friends please do share this course with your friends that they also will watch this and CodeWithHarry army will grow more fastely in this year❤
    Features of Course👇
    1. Absolutely Free of Cost Quality Content
    2. Handwritten Notes for Revision
    3. Projects Included
    4. And Many Other things to Come...
    Ratings:- 5/5 ⭐⭐⭐⭐⭐
    #SigmaBatchOp❤

  • @muhammadrehmankhattak
    @muhammadrehmankhattak 10 місяців тому +12

    Harry Bhai lots of love from Pakistan... Expressing my gratitude to you!!!
    your Sigma Web Development series played a pivotal role in securing my job. Thanks for your guidance, I've learned a lot from this and be able to secure a job. Thank you!"

    • @Shafi242
      @Shafi242 5 місяців тому

      Bro, in which company have you got job
      Is DSA important

    • @thelunatiK
      @thelunatiK 3 місяці тому

      Wow Yr congrats

  • @HyperOfficialGaming
    @HyperOfficialGaming 3 місяці тому +1

    "Sir, this course is exceptional. Please don't assume people aren't watching it. You're covering so much valuable content, and it's not realistic to grasp it all in just two to three months. You're aware of that. We need time to fully comprehend and dedicate ourselves to it. I'm among those consistently following your videos, and I acknowledge it takes time. I'm watching your new videos, knowing I'll revisit them because I want to solidify my understanding of previous topics. So, please don't doubt the success of this course; it's truly the best course. i just feel bad whenever you say people are not watching it and people are loosing their energy noooo its not I'm not loosing my energy
    ❤😻🧡💛💚💙💜

  • @workprabhsingh6038
    @workprabhsingh6038 6 місяців тому +3

    24:57 "recap kr lete hai if you are lost" hit personal 😂😂. BTW amazing session. keep it up. #sigmabatchop #JSXop

  • @codewithraghavsethi
    @codewithraghavsethi 4 місяці тому +1

    Harry Bhai apki ye hi bat sabse ache hai ki app apne course ko pura complete karte ho bhale se koi dekhe ya na dekhe. Bhai main ek saleman ki job karta hun but mujhe coding main intrest hai ajj apke free courses se maine bhot kuch sikha hai Thank You Bhai ! abb mujhe apne upper pura bharosa hai ki mujhe web dev ki job mil jaygi > padosi Moradabad

  • @gouravbakshi2061
    @gouravbakshi2061 10 місяців тому +4

    This course is ultimate and bar is keep getting raised. And it is better than any paid course.
    #sigmabatchop
    #reactOp

  • @dcsalim4384
    @dcsalim4384 10 місяців тому +3

    It's a million dollar content! guys so please toda sa support dikhao bhai ko 🙏

  • @sonalidash8841
    @sonalidash8841 3 місяці тому

    I have seen a lot of videos to understand the props concept, but this is the only video in which I got the concept, with the example. Thanks, Harry Bhai👍👍👍👍👍👍

  • @RpForever77
    @RpForever77 10 місяців тому +4

    Bhai ek hi to dil h kitni brr jitoge yrr ek hi playlist m sato janam le aoge bhai real m bht mst h next js aur le ana m sari dekhunga vid jo mujhe nhi ata hoga isi se
    Love u bhai ❤️

  • @rabithapa1821
    @rabithapa1821 10 місяців тому +2

    Thank you so much, Harray Bhai, for the incredible MERN Stack free course! Your generosity in sharing your knowledge is truly commendable. Your clear explanations and hands-on examples have been invaluable. Grateful for your efforts in making learning accessible to all. 🙏 #HarrayBhai #MERNStack #SIgmaBatchOP #ReactOP

  • @TMKOC2512
    @TMKOC2512 10 місяців тому +2

    This course is ultimate and salute to harry bhai's consistency. Thank you so much for this series.

  • @MuskanSingh-h7s
    @MuskanSingh-h7s 4 місяці тому

    I love the energy level you have seriously , hats off to you . " God bless you dear "

  • @tarunboddeda4884
    @tarunboddeda4884 3 місяці тому +1

    Enjoying ur video....i love how much effort u have provided for making such wonderful content....

  • @hiphop861
    @hiphop861 10 місяців тому

    Extremely Happy with this Harry Bhai. I have followed your previous react series. It is outdated now. I have been following this series from the first video and eagerly waiting for the react part to come. Thank you bringing. God bless you.
    #SigmaBatchOp
    #ReactOp
    #HarryBhai

  • @GauravRaj-bi9kg
    @GauravRaj-bi9kg 4 місяці тому +2

    Sigma Batch op and plz create this type of content helpful for those who can't afford paid course

  • @owaisahmadshah6744
    @owaisahmadshah6744 10 місяців тому

    Watching CodeWithHarry is all fun... Bohot maza ata hy bhai k videos dekh kar time ka pata hi nahi chalta...

  • @kiranmal8856
    @kiranmal8856 10 місяців тому

    this course is actually exceptional knowing us about how mordern web development is advancing by coving makin web pages with css javascript to short your code and easy way to deliver the web site is in itself a good experience
    Thankyou for this good amount of course
    #sigmabatchop #youalwaysrockharrybhai

  • @Code_with_harry_fan_pqge
    @Code_with_harry_fan_pqge 10 місяців тому

    Full stack web development course hoga and bhot majs aa rha h padne me thanks bhai maja aa gya and actual me koi iski price rhak bhi nhi skta ye bhit jyada valueable h coding me. Maja ane laga❤❤❤❤

  • @MrDeveloper-ql3sk
    @MrDeveloper-ql3sk 10 місяців тому +1

    Thanks Harry Bhai for not only this course but all courses and Videos you have done for us.Again thanks Harry Bhai❤️❤️

  • @aadharjain313
    @aadharjain313 10 місяців тому +2

    WHOEVER IS FACING ISSUE OF COMPONENTS NOT SHOWING ON HOME PAGE.
    "The name of react component should start with a capital letter"
    eg -> Card.jsx
    card.jsx won't be detected
    For any other files like css , you can start with lowercase as well

  • @krupathakkar4372
    @krupathakkar4372 2 місяці тому +1

    React OP...Thank you sir for awesome explanation

  • @here_krsna
    @here_krsna 6 місяців тому

    Very informative and easy to understand. One of the best tutorials on topic. Keep up the good work ❤

  • @ExamEaseIndia
    @ExamEaseIndia 2 місяці тому

    harry bhai you are the best teacher for web development

  • @abdulrehman_jiwani
    @abdulrehman_jiwani 5 місяців тому

    Sigma batch OP 🔥
    One of the best teacher😎 in the world acc to me ☺
    What a way to teach 🤌🏻
    Love it ♥

  • @HatrixEdits
    @HatrixEdits 9 місяців тому

    Best Web Dev Course ever. Rating: ⭐⭐⭐⭐⭐. #ReactOP #SigmaBatchOP #HarryBhai

  • @shantanu_saraf
    @shantanu_saraf 28 днів тому

    10/10 clarity of concepts, thnk u sir 🙏🙏

  • @ujjwalchoudhary7219
    @ujjwalchoudhary7219 10 місяців тому +1

    hey harry
    follow karra hu kaafi year se. now finally i'm doing your sigma web devlopment course.
    i have lot of qustions.
    ki?
    Tumne kabhi apni team ......apni work profile k bre m discuss nhi kra?
    most of people jaan n bhi chahty honge.
    kya kya side works h?
    kya timing h?
    kya team work h?
    editor?
    n all things.

  • @sameershahidbutta
    @sameershahidbutta 17 днів тому

    React OP. Harry Bhai OP aur Sigma Batch bhi OP!

  • @manas_13_16
    @manas_13_16 Місяць тому +1

    i start web dev. course from today harry bhaiya

  • @jai_ram108
    @jai_ram108 10 місяців тому +2

    Whoever wants Harry Bhai to create a Full Mern Stack project video , Please like and comment so that it reaches our Harry Bhai. 👇🏼👍🏼

  • @LsEagle18
    @LsEagle18 Місяць тому

    SIGMA BATCH OP!!!! Thank you so much Bhaiya for this series!

  • @itsMohak
    @itsMohak 9 місяців тому

    React OP... You are magical.

  • @ahfvastav450
    @ahfvastav450 10 місяців тому +1

    harry bhau ki video ek number hai bhai sigma op bolte

  • @shubhamrathod9249
    @shubhamrathod9249 9 місяців тому

    very very easy explanation. I understood it completely. I first thought that reactjs will be hard but it is simple. Thanks to you!

  • @thor3830
    @thor3830 4 місяці тому

    #SIGMABATCHOP🎉❤
    Lots of respect and love from Kolkata❤

  • @Anuragk_2625
    @Anuragk_2625 7 місяців тому +1

    I am 3rd year Bca student Thankyou for this react.js

  • @notoppergamers1510
    @notoppergamers1510 10 місяців тому +1

    Sigma Batch OP❤❤❤❤❤❤🤞🤞🤞🤞🤞🤞👍👍👍👍🔥🔥🔥🔥🔥🔥

  • @Coder_daksh
    @Coder_daksh 4 місяці тому

    Harry Bhaiya, this is the best course ever. when I get a job, i will definitely pay you, bhaiya

  • @surazblogs2714
    @surazblogs2714 10 місяців тому

    Thank You Harry Bhai for this incredible course for free.... to value Add in our life.

  • @abhishekjha5877
    @abhishekjha5877 9 місяців тому

    Maja aagaya harry bhai ye vdo dekh k bhaut kuch sikha

  • @aimanfatima1218
    @aimanfatima1218 10 місяців тому

    Best ja raha hai ye course great effort sir ❤

  • @yosayaan7013
    @yosayaan7013 8 місяців тому +1

    #SigmaBatchOp
    Best teacher ever ❤

  • @solojusticegamer
    @solojusticegamer 10 місяців тому +2

    Hello sir 👋🏻 I am very happy 😃 of your course like 100 days of Python code and Sigma web development 💻 but I quit Sigma web development course 🎓 because exams 📚 are closer ⌛ so I quit for 1⃣ month. I will be back at one month and complete this epic course 💪🏻. I am in 11th class 🎓 so sorry for quitting 😔, I will be back.

  • @ishaishabashir161
    @ishaishabashir161 10 місяців тому +1

    Amazing harry ❤.... You are love 😍♥️

  • @rahulkushram2895
    @rahulkushram2895 5 місяців тому

    Your Course is best Harry Sir❤

  • @Soulcode-k
    @Soulcode-k 19 днів тому

    I am learning so much vro thanks thanks thanks thanks.
    I really love your videos.
    I really enjoy every video u upload bro.
    Thank you so much.
    Hope you are doing well.
    (My brain is hanging right now 😅)
    Op bro op ❤❤❤❤❤❤❤
    ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

  • @Shivanshdutt-g6t
    @Shivanshdutt-g6t Місяць тому

    Sigma batch op
    Understand all the concepts of components

  • @SheikhJee-d2h
    @SheikhJee-d2h 9 місяців тому

    awesome i mean wow. if you really want to learn full stack this playlist is enough but if youu want to become a pro than you have to practice yourself

  • @SarveshKumar-bl9in
    @SarveshKumar-bl9in 10 місяців тому

    Amazing Content and i am learning much more from your videos ..thanks harry bhai keep it up .

  • @sarkina962
    @sarkina962 10 місяців тому

    Sigma op , harry op , dhingana op, maut daal dete op , kiraaakkkk op bolte❤

  • @HarshGandharva
    @HarshGandharva 3 місяці тому

    Sigma batch op , Maza aa raha hai boss

  • @aditya3525
    @aditya3525 9 місяців тому

    loved your energy!!

  • @5h4ddu
    @5h4ddu 9 місяців тому

    React Op Bolte Harry bhai Love from Aurangabad Maharashtra...

  • @Alkane051
    @Alkane051 7 місяців тому

    sigma batch op, and lots of respect for harry bhaii..

  • @samirjani8392
    @samirjani8392 9 місяців тому

    Best react tutorial in the universe ❤️ 🫡

  • @MemeWala90
    @MemeWala90 10 місяців тому

    Who are following this course from very first video till here write this 👇👇
    Harry Bahi Sigmabatch OP , React OP.

  • @hassanqamer6695
    @hassanqamer6695 10 місяців тому

    sigma batch op, we love you Harry

  • @siamahmed199
    @siamahmed199 9 місяців тому

    Sigma batch wow🤗🤗 Harry Bhai Love you Bangladesh

  • @keppubgpc
    @keppubgpc 10 місяців тому

    HARRY BHAI NE mujhe 13 saal ki umra mai hi python aur js sikha di

    • @Custom-Tkinter
      @Custom-Tkinter 10 місяців тому

      Mujhe bhi main ab 16 years ka hu lekin harry bhai ki wajah se mai bahut acha programmer ban chuka hu... 😅 😅 😅

    • @keppubgpc
      @keppubgpc 10 місяців тому

      @@Custom-Tkinter Bhai harry bhai op bolte

    • @Custom-Tkinter
      @Custom-Tkinter 10 місяців тому

      @@keppubgpc Ekdum bhai

  • @hinazeeshan3961
    @hinazeeshan3961 6 місяців тому

    SIGMA BATCH OP HARRY BHAI...!!!🔥💙

  • @CosMIcAkaSh1111
    @CosMIcAkaSh1111 9 місяців тому

    now I know why we use react thanks harry bhai for this awesome video. #sigmabatchop

  • @ViswasSukhdare
    @ViswasSukhdare 10 місяців тому +1

    Ye playlist dekh ke frontend dev bana paka hai bass interview crack karna baki hai 😅

  • @rajharsh3739
    @rajharsh3739 10 місяців тому

    sigma batch OP Harry Bhaiya ji 🔥🔥🔥🔥

  • @hossain9410
    @hossain9410 9 місяців тому

    it was really worth watching.

  • @i_am_batman_2.0
    @i_am_batman_2.0 10 місяців тому

    Thank you Bhaiya..
    Totally loving this course❤🎉

  • @kartikmahato
    @kartikmahato 10 місяців тому

    Aapka purana react ka video se Sikh rahe the
    Tabhi aapne react Sigma ka video upload kar diye❤

  • @anujpal574
    @anujpal574 10 місяців тому +1

    sigma batch op 🔥🔥🔥🔥

  • @Sidharthsaini-s1o
    @Sidharthsaini-s1o 10 місяців тому +1

    sigma batch op ❤❤✨✨✨✨

  • @gautamprasad3700
    @gautamprasad3700 10 місяців тому

    React OP Harry Bhaiiiiiii
    Love You Bro
    Mast sikhaya yaar react js❤

  • @microsoftian
    @microsoftian 7 місяців тому

    #Sigma Batch Op & #CodeWithHarry Rocks 🤟👍

  • @surazblogs2714
    @surazblogs2714 10 місяців тому

    I have never seen before such like that course in free.

  • @aizajsamani8894
    @aizajsamani8894 10 місяців тому +1

    #SigmaBatchOP // Energy Level High Hai Bhaiyya

  • @5h4ddu
    @5h4ddu 9 місяців тому

    Thank You So Much For This Amazing Course❤

  • @JsxSnippet
    @JsxSnippet 10 місяців тому +1

    Thanks bro 🥺❤️ for helping us 🥺❤️

  • @Irfan-kakar
    @Irfan-kakar 10 місяців тому

    Harry Bhai is our lucky Bhai, React op ❤🎉

  • @middle_class_boy_story
    @middle_class_boy_story 10 місяців тому

    From this video i will start my MERN STACK journey. ❤🎉

  • @im-Arslan
    @im-Arslan 9 місяців тому

    Sigma Batch OP Live Long Harry Bhai

  • @code.priyam
    @code.priyam 10 місяців тому +1

    24:53 image ko bhi props ke through bhej skte hai??

  • @iamkmsyed
    @iamkmsyed 10 місяців тому

    Bhai Paid Courses ka Game Over 😂❤❤❤

  • @ChandanKhuntia-f2c
    @ChandanKhuntia-f2c 9 днів тому

    Excellent video ❤❤

  • @adi-yadav
    @adi-yadav 10 місяців тому

    bawal hai bhaiya ji dil se dhanyawaad

  • @supremeleader5516
    @supremeleader5516 7 місяців тому

    sigma batch OP, energy level high

  • @Mr-jz8ts
    @Mr-jz8ts 10 місяців тому

    react js op,thanks a mllion for this course brother,love from Bangladesh

  • @SanketPaliwal-z4n
    @SanketPaliwal-z4n 10 місяців тому

    Sigma Batch ओपी 🔥

  • @omkarbhagwat3840
    @omkarbhagwat3840 10 місяців тому

    aree energy level jafi high he.keep it going..
    Sigm BathcOP

  • @victorb22622
    @victorb22622 8 місяців тому

    11:11 अभी तक की वीडियो से तो ये लगा की nav bar करते वक्त जो करते थे वो ही करना पड़ा ,अलग से CSS file बनाकर कॉल करनी पड़ी।14:58 JS me style. Css link करते थे यहा import , लेकिन किया तो वो ही जो पहले की वीडियो में किया था nav बार बनाते वक्त।23:31 js मे class लिखते है यह classname।बाकी class की property तो लिखनी ही पड़ी।या css file मे लिखना पड़ा ,तो फर्क क्या हुआ,मुझे तो ये रिएक्ट कॉम्प्लिकेटेड लगता है ,unnessasary भीं।

  • @p.r.s8675
    @p.r.s8675 7 місяців тому

    can someone explain jab footer.css mei div pe style lagaya toh navbar pe kyu lag gaya ? hamne toh footer.css siraf footer.jsx mei import kia tha na.

  • @MANMINDERSINGH-j2j
    @MANMINDERSINGH-j2j 6 місяців тому

    14:06 how does the footer element moves to bottom with this css? Can anyone explain

  • @mrshoya.28
    @mrshoya.28 10 місяців тому

    Aaj se roj attendance lagegi bhiyya !

  • @ayushuniyal2586
    @ayushuniyal2586 10 місяців тому +1

    react looks tough initially,hope i could learn it from furthur videos

  • @Anonymous67418
    @Anonymous67418 4 місяці тому

    Thank you Harry bhai for this course

  • @Himanshushekhar01
    @Himanshushekhar01 5 місяців тому

    harry bhaii but ek mistake aapne nhi bataii ki react me component bnaane time captal letter se start karnaa hota hai nhi toh voh nhi work karta eg, Footer.jsx not footer.jsx. ,
    i have done this mistake that is why i am telling and thank you so much fo making such entire contents sigma web dev op

  • @funhourswithyash
    @funhourswithyash 9 днів тому

    sigma batch op and react also op and and harry bhai doub👌👌le op

  • @tahakhan2838
    @tahakhan2838 9 місяців тому

    You are great teacher ❤

  • @yogeshwarkalpande
    @yogeshwarkalpande 4 місяці тому

    Harry Bhai it's an amazing course but I have one query that if we go this way then how bulky is our file system of app is there any way to reduce the files of app because as the files more it will be so hectic to move from one to another we want and also we have to import every file as we want