React 18 Fundamentals Crash Course

Use coupon code: CodevolutionYoutube 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

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

[worldinnumbers]

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 :)

[dorinstanciu]

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!

[vinoobharadwaj]

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]

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.

[hemanthkr]

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 :-)

[ghosh]

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

[victoria-exito]

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(
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="">Username</label>
<input
type="text"
value={username}
onChange={(event) => {

}} />

<label
<textarea
name=""
id="description"
cols="30"
rows="10"
placeholder='Description here'
value={description}
onChange={(event) => {

}}
>
</textarea>

<label htmlFor="country"></label>
<select
name="countries"
id="country"
value={country}
onChange={ (event) => {

}}
>
<option value="">--Please choose an option--</option>
<option
<option
<option
</select>

</div>
<button type='submit' >Submit</button>
</form>

)

[РоманГирич-зш]

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

[JonnyLove]

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!!

[princetoast]

Awesome course! I came here for a refresher on React, and now I learned how to use the useTransition hook which will be very useful in my future projects.

[utkukaanarasan]

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

[jasonako]

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

[beto]

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

[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

[JJ-otps]

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!

[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?

[dastyni]

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

[kedarpethe]

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

[deindedawodu]

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

[purushottamdubey]

This is well presented and explained tutorial for beginners. I will highly recommend this to every one interested learning React. Thanks a lot