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
For a more complete deep dive into React, watch the full playlist at kzread.info/dash/bejne/g3qVqKucd8u2n7A.html&ab_channel=Codevolution
@mrrishiraj88
2 жыл бұрын
Great thanks 🙏👍
@miketennison9208
2 жыл бұрын
We need redux also
@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
2 жыл бұрын
@@NiteshKumar-zy7gl.
@pankajkulkarni6456
Жыл бұрын
why we need NodeJS for react or Angular?
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
2 жыл бұрын
hv u landed on some job?
you are that Indian guy, whom I can clearly understand in English :D thanks for your work
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!
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!
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.
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 )
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
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!!
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 :-)
This was great to get me up to speed on the latest react conventions, coming from very old versions.
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
This was a great overall tutorial, specially by adding the transition hook at the end 👍
This type of knowledge in just 2 hours is really good. Keep it up mate
I found it difficult to understand some concepts of react but Vishwas tutorials made everything so simple for me to understand...keep it up!!!
Your tutorial are great , easy to learn & quick catchup. Request for react testing library & cypress. Thank you in advance. And your great fan 🧡
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
11 ай бұрын
Does it cover everything or there will be need to watch the playlist
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.
This was a GREAT refresher! Thanks for the awesome work!
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
Excelente curso, brother! Obrigado! God bless you!
Thank you a lot for releasing and giving away all that knowledge for free! Its highly appreciated :) Enjoy to keep creating ^^
Wonderful tutorial... great presentation... thanks a lot for your clear cut guidance...
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.
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.
Excellently presented. I subscribed and looking forward to more of your material.
One of the best React dev channels on youtube.... keep it up!!
Thanks, you make life easier 💐 Please make a advance react crash course . Thanks a lot ❤️
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 .🙏🏽🙏🏽
I needed this!! Thank you so much!
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.
Thanks for putting this together, it is quite helpful
By far the BEST react tutorial on the internet.
This is the channel foe every react developer out there, I mean his explantion can make a beginner go pro
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
2 жыл бұрын
um isn't this the new react video or were you referring to one which goes over more advanced topics?
Hello Sir! Your Video very clearly explaining step by step. Thanks a lot! God Bless You!
I was able to achieve creating the other two form inputs and fetch the data successfully
Fantastic work here. Excellent. 🍾🥂🎉
this was excellent. Thank you so much!
This is amazing bro.. Thanks for sharing your knowledge 🔥🔥
Great Course. Best I have seen so far.
Thank you very much I was in need of his Course 😘
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
Жыл бұрын
Nord and Material Icon Theme
Very Useful and easy to understand. Thanks for sharing the useful info.
thank u . got precise understanding of the concepts😄😄
I able to achieve your assignment. Thank for you awesome tutorial.
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
Жыл бұрын
thanks
@athygiannopoulos2634
6 ай бұрын
exactly what I was searching for....thanks
Woah! Eagerly waiting for this.
super vishwas ... Keep up your good work
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.
cant believe this is free. thank you
So much thanks it was really help full !
Great tutorial! Thank you bro
Hi Vishwas, Thank you for the wonderful explaination. It would be great if you can share the slides. :)
Hello sir, thank you for all you do… please consider a nestjs course in the future 🙏🏾
Can we refer this tutorial for beginners..? Or check another playlist of your
is it possible to code jsx files when importing react via the cdn and not as a node module?
can you exlain why does react strict mode fires useEffect twise?? How can we write code which happens only if state changes ???
Excellent. Any plans to update Next JS course with Next 12 features ?
Thanks for taking your time to explain React.
@mariammagdy9839
Жыл бұрын
The last update in that video or not?
Is this must watch first before your NextJS tutorial?
nice content with broader clarity
really good contents for react! thanks.
Hi, please what's the name of the plugin that auto import components in the video?
in one word just awesome❤❤❤
Wonderful content brother!! GBY
This channel is gold mine
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 }
after this vid my life is up and running ;D
Thank you, great.
Thank you!!!
How to make reusable component in angular ? Kindly make video bro.... thanks advance . Videos simply super
I was curious, on why did you remove the strictMode
Excellent course brother ❤❤❤❤❤❤❤❤
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.
1:41:54 How is the list of names still there when there is literally nothing in the input field? Can anyone please explain?
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
Can you make a similar video on angular as well?
great work
You are doing great ♥️♥️♥️👍💯💻
thanks alot
how to deal with peer-deps error for testing libraries, as my create-react-app is not working (
why is it that when i try a closing tag it doesnt work. you have to use and instead @ 36:35
Great tutorial Next time please use a high contrast font colour.
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..
Awesome bro👌❤️👍
Same as the 2018 Tutorial of React Fundamentals?
Great content
nice tutorial 🙂
Vishwa we need react native course
please , is this the starting point for react
Is the code for this tutorial availible online? Thanks
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.
this is so much better than whoever wrote the React docs
At 7:46, I am getting an error of npx not recognized. Can anyone assist me?
Sir it is showing like this ERROR in ./src/App.js 5:0-40 i am not under standing plz help me
in your youtube channel, you could you please let me know if you any typescript tutorial is available.
Please start building projects in React JS. E.g Portfolio website
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?
is this crash course enough to learn redux properly?