React 18 Fundamentals Crash Course

📘 Courses - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support Paypal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
⚡️ Checkout Taskade! www.taskade.com/
To upgrade any workspace, login and visit www.taskade.com/billing
Use coupon code: CodevolutionKZread for any workspace upgrade. Select "Add promo code" on checkout, enter the code, then hit "Apply". This will apply a 100% one year subscription discount. Enjoy and feel free to invite others to your workspace!
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
React Fundamentals Crash Course
React 18 Tutorial
React 18 Crash Course
Timestamps
00:00 Intro
00:29 Before we begin
03:02 What is React?
04:05 Why learn React?
05:48 Setup
07:16 Creating a new React app
09:18 Understanding files and folders
15:58 Updating to React 18
17:30 What is a component?
19:12 Function components
21:07 Creating a new component
24:16 Default and named exports
26:08 JSX
29:24 props
38:52 state
46:28 Hooks at a glance
47:40 Event handling
52:53 Parent child communication
59:20 Conditional rendering
01:03:37 List rendering
01:08:28 Styling
01:17:17 Forms
01:23:44 HTTP GET & POST requests
01:36:50 useTransition hook
01:48:39 Further learning

Пікірлер: 159

  • @Codevolution
    @Codevolution2 жыл бұрын

    For a more complete deep dive into React, watch the full playlist at kzread.info/dash/bejne/g3qVqKucd8u2n7A.html&ab_channel=Codevolution

  • @mrrishiraj88

    @mrrishiraj88

    2 жыл бұрын

    Great thanks 🙏👍

  • @miketennison9208

    @miketennison9208

    2 жыл бұрын

    We need redux also

  • @NiteshKumar-zy7gl

    @NiteshKumar-zy7gl

    2 жыл бұрын

    I am new to React. after using react 18 would it be easy to understand the recommended playlist of yours as you have used v16 there I guess or should I go through that playlist first in order to get the concepts thoroughly here ?

  • @mrrishiraj88

    @mrrishiraj88

    2 жыл бұрын

    @@NiteshKumar-zy7gl.

  • @pankajkulkarni6456

    @pankajkulkarni6456

    Жыл бұрын

    why we need NodeJS for react or Angular?

  • @worldinnumbers00
    @worldinnumbers002 жыл бұрын

    I learned React using Vishwas tutorials and still referring to those tutorials. This channel is actually one stop place for frontend development. I love the way he explain the concepts. Thank you for your effort. Much love :)

  • @panomapet9441

    @panomapet9441

    2 жыл бұрын

    hv u landed on some job?

  • @user-bh6mc8pd8g
    @user-bh6mc8pd8g2 жыл бұрын

    you are that Indian guy, whom I can clearly understand in English :D thanks for your work

  • @dorinstanciu5209
    @dorinstanciu5209 Жыл бұрын

    Your Crash Courses are absolutely amazing. you are explaining everything nicely and give concise examples. I really like you teaching style and please do more arrow function based React projects(membership web-apps, recurring payments, online payments, restricted content to be visible only if a person is a member and paying a monthly subscription etc). Thank you and keep up the good work! Well Done!

  • @vinoopb
    @vinoopb2 жыл бұрын

    You sir, are a GOD. For the first time today, in a year, I felt like ReactJS talked back to me, through your voice. The murky clouds of confusion have cleared up a lot. There is a long way ahead of me, but this crash course has set the pace properly for me. Such a fine channel for learners. Please keep up the good work. Many thanks again!

  • @kenkioqqo
    @kenkioqqo2 жыл бұрын

    Vishwas, I've learned how to build projects with Angular by watching your tuts, and I've been able to build several projects with those skills, and now, out of curiosity, I am watching this React tutorial just as an overview as I plan to learn the library in the near future. I just like the way you teach complex subjects and make them easy-to-understand for "non-A" students like me. Keep up the outstanding work bro.

  • @victoria-exito
    @victoria-exito2 жыл бұрын

    I have learned so much, thank you! I did like this: export const Form = () => { const [username, setUsername] = useState(''); //username state variable and with an initial value of empty string const [description, setDescription] = useState(''); const [country, setCountry] = useState(''); const handleSubmit = (event) => { event.preventDefault() //to prevent the page refreshes alert(`Form data is: username= ${username}, description= ${description} and country = ${country}`) console.log('Button clicked', event) } return( Username { setUsername(event.target.value) }} /> Description { setDescription(event.target.value) }} > { setCountry(event.target.value) }} > --Please choose an option-- Sweden Rumania Venezuela Submit )

  • @noeldunienville199
    @noeldunienville1992 жыл бұрын

    Runnning create-react-app with potential errors npx create-react-app myapp You are running create-react-app 4.0.0, which is behind the latest release (4.0.1). We no longer support global installation of Create React App. The current solution is simple - run create-react-app and target the latest version. Run creact-react-app using the latest version npx create-react-app@latest myapp Different versions of npm may help as well, and you can upgrade using the following command. Please note that this may affect other projects on your system. Upgrading npm npm install -g npm@latest ( just wanted to post this for anybody who is having issues with npx create-react-app myapp.) I found this solved my problem

  • @JonnyLove
    @JonnyLove9 ай бұрын

    Best video for fully understanding react so far. I have learned some, but many others skip important steps or tell you to ignore a bunch of stuff which left me with a lot of questions which were all answered here in this video. Cheers!!

  • @hemanthkr537
    @hemanthkr537 Жыл бұрын

    This is by far the best ever tutorial on React JS that I have come across. Thank you so much Vishwas, more strength and power to you :-)

  • @dastyni13
    @dastyni132 жыл бұрын

    This was great to get me up to speed on the latest react conventions, coming from very old versions.

  • @81ghosh
    @81ghosh2 жыл бұрын

    Hi Vishwas, I have learnt React by watching your React Fundamentals as well as React Hooks and Redux videos. It was really nice. I will request you to please launch a series in React Redux Toolkit as well as in React Hook Form and JEST, React Testing Library since those are in real demand in current JOB Market

  • @beto5720
    @beto57202 жыл бұрын

    This was a great overall tutorial, specially by adding the transition hook at the end 👍

  • @utkukaanarasan6034
    @utkukaanarasan60342 жыл бұрын

    This type of knowledge in just 2 hours is really good. Keep it up mate

  • @jasonako8813
    @jasonako88132 жыл бұрын

    I found it difficult to understand some concepts of react but Vishwas tutorials made everything so simple for me to understand...keep it up!!!

  • @sumitkumarsharma4004
    @sumitkumarsharma40042 жыл бұрын

    Your tutorial are great , easy to learn & quick catchup. Request for react testing library & cypress. Thank you in advance. And your great fan 🧡

  • @JJ-ot3ps
    @JJ-ot3ps Жыл бұрын

    so glad there is a crash course version I was about to watch your react course that has over 100 videos lol, hopefully all stuff is covered here too! thanks for your amazing course!

  • @priyabajaj8060

    @priyabajaj8060

    11 ай бұрын

    Does it cover everything or there will be need to watch the playlist

  • @paulomorais5245
    @paulomorais52452 жыл бұрын

    Goodnight. I am Brazilian. I live in a city of beautiful beaches in the northeast of Brazil called Natal. Thank you for sharing your knowledge with people who, like me, are entering the world of programming. Sorry for the mistakes. I don't master the English language.

  • @deindedawodu1563
    @deindedawodu15634 ай бұрын

    This was a GREAT refresher! Thanks for the awesome work!

  • @Curpop
    @Curpop Жыл бұрын

    One issue some might be facing is at 1:27:50 the empty array on line 13 [], should be an empty object instead {} . I tried changing it back to an array and it works?!? Great tutorial!!! thank you

  • @viniciusm.m.7822
    @viniciusm.m.78222 жыл бұрын

    Excelente curso, brother! Obrigado! God bless you!

  • @marlinjai
    @marlinjai Жыл бұрын

    Thank you a lot for releasing and giving away all that knowledge for free! Its highly appreciated :) Enjoy to keep creating ^^

  • @Mrsudhakar229767
    @Mrsudhakar229767 Жыл бұрын

    Wonderful tutorial... great presentation... thanks a lot for your clear cut guidance...

  • @abisankabhattacharya4079
    @abisankabhattacharya40792 жыл бұрын

    I earnestly request you to please make an updated video of Angular, as I do genuinely follow your videos which truly helped me to learn.

  • @dub161
    @dub1612 жыл бұрын

    Thanks for this video. Its really great for revising. Please make React crash course series as you did for Javascript. It will be so dope.

  • @frankenbeans6930
    @frankenbeans6930 Жыл бұрын

    Excellently presented. I subscribed and looking forward to more of your material.

  • @kedarpethe
    @kedarpethe Жыл бұрын

    One of the best React dev channels on youtube.... keep it up!!

  • @hamedderiis8553
    @hamedderiis85532 жыл бұрын

    Thanks, you make life easier 💐 Please make a advance react crash course . Thanks a lot ❤️

  • @Amitdaware
    @Amitdaware2 жыл бұрын

    Hi Vishwas, Thank you for the tutorials , if it wasn't for your react series I would not have got the concepts of react. There is a little request though, Please make the tutorials for the REACT UNIT TESTING .🙏🏽🙏🏽

  • @bobbyjaswal2384
    @bobbyjaswal2384 Жыл бұрын

    I needed this!! Thank you so much!

  • @mohammedshahed3432
    @mohammedshahed34322 жыл бұрын

    Vishwas Sir ! Need more tutorials from MUI. please go a bit advance in MUI please. and try to bring in REDUX TOOLKIT please that's the MUST. Please facing issues in production toolkit can help a lot as well as bring in React Native tutorials.

  • @clementnnamdi4985
    @clementnnamdi49852 жыл бұрын

    Thanks for putting this together, it is quite helpful

  • @sirijarmale
    @sirijarmale Жыл бұрын

    By far the BEST react tutorial on the internet.

  • @martinirungu2381
    @martinirungu23812 жыл бұрын

    This is the channel foe every react developer out there, I mean his explantion can make a beginner go pro

  • @prabhakarmishra2182
    @prabhakarmishra21822 жыл бұрын

    Dear Vishwas I have been learning from your videos and I kindly request you, please launch a new series on React as it is four years since your last React videos, Now it is v18 and this is the proper time to launch a new series on React, please consider it, fro a new learner like me it is little tricky to differentiate between new changes and do the fine reading between new and old versions and the changes they bring along, I am very happy with your videos, lots of love and respect to you dear

  • @aldolhitlercondensation1363

    @aldolhitlercondensation1363

    2 жыл бұрын

    um isn't this the new react video or were you referring to one which goes over more advanced topics?

  • @adhy612000151
    @adhy612000151 Жыл бұрын

    Hello Sir! Your Video very clearly explaining step by step. Thanks a lot! God Bless You!

  • @ApexModi6000
    @ApexModi60005 ай бұрын

    I was able to achieve creating the other two form inputs and fetch the data successfully

  • @anubisai
    @anubisai Жыл бұрын

    Fantastic work here. Excellent. 🍾🥂🎉

  • @maxitomix
    @maxitomix11 ай бұрын

    this was excellent. Thank you so much!

  • @eliuddyn
    @eliuddyn2 жыл бұрын

    This is amazing bro.. Thanks for sharing your knowledge 🔥🔥

  • @inversionmiami
    @inversionmiami Жыл бұрын

    Great Course. Best I have seen so far.

  • @transcendentalpleasure1382
    @transcendentalpleasure13822 жыл бұрын

    Thank you very much I was in need of his Course 😘

  • @MrRiteshkumar
    @MrRiteshkumar Жыл бұрын

    This crash course series is great for seasoned developers making their headway into React. Kudos for the effort. By the way love the theme and icon packs. Can someone tell which theme is he using?

  • @SamuelBortle

    @SamuelBortle

    Жыл бұрын

    Nord and Material Icon Theme

  • @manoharam9037
    @manoharam90372 жыл бұрын

    Very Useful and easy to understand. Thanks for sharing the useful info.

  • @poornishams6338
    @poornishams6338 Жыл бұрын

    thank u . got precise understanding of the concepts😄😄

  • @JuanityTV
    @JuanityTV Жыл бұрын

    I able to achieve your assignment. Thank for you awesome tutorial.

  • @jimaustin3608
    @jimaustin3608 Жыл бұрын

    Any newbie (like me) who makes it to the end: the site Vishwas gets his data file from (1:37:41) is mockaroo (KZread won't allow the full address with .com)

  • @dq9342

    @dq9342

    Жыл бұрын

    thanks

  • @athygiannopoulos2634

    @athygiannopoulos2634

    6 ай бұрын

    exactly what I was searching for....thanks

  • @universal4334
    @universal43342 жыл бұрын

    Woah! Eagerly waiting for this.

  • @Misc_useful
    @Misc_useful2 жыл бұрын

    super vishwas ... Keep up your good work

  • @nouchance
    @nouchance2 жыл бұрын

    Hello Vishwas! I wanted to ask you if it makes sense to learn the class component of React? I'm a beginner developer. I'm waiting for your answer, thank you very much in advance.

  • @jonarieln.maravilla4663
    @jonarieln.maravilla4663 Жыл бұрын

    cant believe this is free. thank you

  • @Sacrifice97
    @Sacrifice97 Жыл бұрын

    So much thanks it was really help full !

  • @coderjag8828
    @coderjag88282 жыл бұрын

    Great tutorial! Thank you bro

  • @bhaveshgohel
    @bhaveshgohel Жыл бұрын

    Hi Vishwas, Thank you for the wonderful explaination. It would be great if you can share the slides. :)

  • @monarchgam3r
    @monarchgam3r2 жыл бұрын

    Hello sir, thank you for all you do… please consider a nestjs course in the future 🙏🏾

  • @ShubhamPatil-rr4on
    @ShubhamPatil-rr4on Жыл бұрын

    Can we refer this tutorial for beginners..? Or check another playlist of your

  • @arianitonline8748
    @arianitonline8748 Жыл бұрын

    is it possible to code jsx files when importing react via the cdn and not as a node module?

  • @wingmann3632
    @wingmann36322 жыл бұрын

    can you exlain why does react strict mode fires useEffect twise?? How can we write code which happens only if state changes ???

  • @user-ek7cx3js1q
    @user-ek7cx3js1q2 жыл бұрын

    Excellent. Any plans to update Next JS course with Next 12 features ?

  • @ikresimir9364
    @ikresimir9364 Жыл бұрын

    Thanks for taking your time to explain React.

  • @mariammagdy9839

    @mariammagdy9839

    Жыл бұрын

    The last update in that video or not?

  • @7th.convict
    @7th.convictАй бұрын

    Is this must watch first before your NextJS tutorial?

  • @DK_iTech_1906
    @DK_iTech_1906 Жыл бұрын

    nice content with broader clarity

  • @portiseremacunix
    @portiseremacunix2 жыл бұрын

    really good contents for react! thanks.

  • @oyewaletayo4026
    @oyewaletayo40262 жыл бұрын

    Hi, please what's the name of the plugin that auto import components in the video?

  • @chowdhury7796
    @chowdhury77962 жыл бұрын

    in one word just awesome❤❤❤

  • @priteshmayekar2707
    @priteshmayekar2707 Жыл бұрын

    Wonderful content brother!! GBY

  • @pakliksiu9539
    @pakliksiu9539 Жыл бұрын

    This channel is gold mine

  • @Mpc_youths
    @Mpc_youths4 ай бұрын

    Task in the form handling section import { useState } from "react"; export const Form=()=>{ const[country,upDateValue]=useState('India'); function update(event){ upDateValue(event.target.value) } return {event.preventDefault();alert(`Your Country is ${country}`)}}> Select Your Country : India USA France Pakistan Dubai Other Submit }

  • @melstadevosyan
    @melstadevosyan Жыл бұрын

    after this vid my life is up and running ;D

  • @nadicadizdarevic2835
    @nadicadizdarevic2835 Жыл бұрын

    Thank you, great.

  • @imikhan83
    @imikhan832 жыл бұрын

    Thank you!!!

  • @ragucool9468
    @ragucool94682 жыл бұрын

    How to make reusable component in angular ? Kindly make video bro.... thanks advance . Videos simply super

  • @Gourab__paul
    @Gourab__paul2 жыл бұрын

    I was curious, on why did you remove the strictMode

  • @findmyreligion
    @findmyreligion Жыл бұрын

    Excellent course brother ❤❤❤❤❤❤❤❤

  • @WarframeCrunch
    @WarframeCrunch Жыл бұрын

    I've done the filtering the last section but in my opinion it still doesn't work as it should. When I'm typing something the typing is not done on my press but with delay after all the rest data list is loaded. The input field should be free from bottlenecking, just the list shoudl be affected by bottlenecking.

  • @mohammedshamil1626
    @mohammedshamil1626 Жыл бұрын

    1:41:54 How is the list of names still there when there is literally nothing in the input field? Can anyone please explain?

  • @zuberkhan-kn7iu
    @zuberkhan-kn7iu Жыл бұрын

    i have learned Python thn Django for backend now after completing JS i am learning React , I need to know where i can find tutorial for building website by using Django and React

  • @akshatsamdani
    @akshatsamdani11 ай бұрын

    Can you make a similar video on angular as well?

  • @mansoorahmad822
    @mansoorahmad822 Жыл бұрын

    great work

  • @ShubhamPatil-rr4on
    @ShubhamPatil-rr4on Жыл бұрын

    You are doing great ♥️♥️♥️👍💯💻

  • @nogafouz2174
    @nogafouz2174 Жыл бұрын

    thanks alot

  • @gigakvachakhia4777
    @gigakvachakhia47772 жыл бұрын

    how to deal with peer-deps error for testing libraries, as my create-react-app is not working (

  • @omarguerrero2847
    @omarguerrero2847 Жыл бұрын

    why is it that when i try a closing tag it doesnt work. you have to use and instead @ 36:35

  • @Live-hh6li
    @Live-hh6li Жыл бұрын

    Great tutorial Next time please use a high contrast font colour.

  • @priyankav2418
    @priyankav24182 жыл бұрын

    Sir.. I can watch the ur old react js tutorial now also.. it's k.. react is got updated right.. so I'm confused to watch or not..

  • @hydro6527
    @hydro65272 жыл бұрын

    Awesome bro👌❤️👍

  • @guyunknown9123
    @guyunknown91232 жыл бұрын

    Same as the 2018 Tutorial of React Fundamentals?

  • @AmolWankhede
    @AmolWankhede Жыл бұрын

    Great content

  • @JIGNESHPATEL-qk4yg
    @JIGNESHPATEL-qk4yg Жыл бұрын

    nice tutorial 🙂

  • @motech8026
    @motech80262 жыл бұрын

    Vishwa we need react native course

  • @omolarasilverstone4124
    @omolarasilverstone41242 жыл бұрын

    please , is this the starting point for react

  • @theCanadian808
    @theCanadian808 Жыл бұрын

    Is the code for this tutorial availible online? Thanks

  • @SandraWantsCoke
    @SandraWantsCoke2 жыл бұрын

    I was not able to create-react-app with typescript template, couldn't get it to run. Without TS, I was able to make an app run only after I changed package json react and dom versions to 17.0.2... Considering that I have tried this on different machines, Linux, Mac and Windows with the same results, I wonder what the solution is. You create the app without any problems in this video, but I couldn't. npx create-react-app just does not work for me.

  • @sazk4000
    @sazk4000 Жыл бұрын

    this is so much better than whoever wrote the React docs

  • @murtazakazmi7302
    @murtazakazmi7302 Жыл бұрын

    At 7:46, I am getting an error of npx not recognized. Can anyone assist me?

  • @myeshwanth4039
    @myeshwanth4039 Жыл бұрын

    Sir it is showing like this ERROR in ./src/App.js 5:0-40 i am not under standing plz help me

  • @Mrsudhakar229767
    @Mrsudhakar229767 Жыл бұрын

    in your youtube channel, you could you please let me know if you any typescript tutorial is available.

  • @panomapet9441
    @panomapet94412 жыл бұрын

    Please start building projects in React JS. E.g Portfolio website

  • @johnkucharsky6927
    @johnkucharsky6927 Жыл бұрын

    Why build complex inerfaces might be painfull. What do you mean. What technology is used to build a complex interfaces? Facebook is complex isn't it?

  • @surajsoni3678
    @surajsoni3678 Жыл бұрын

    is this crash course enough to learn redux properly?