This is the 2019 version which uses class based components. The 2021 version with hooks has just been released - ua-cam.com/video/w7ejDZ8SWv8/v-deo.html
@@NinjaAhmed-cp3pe can you please explain why? ... doesn't this use basic class-based components. Sorry I am a beginner and wanted to know which video to start with first
Hey there Brad, just one note- DON'T apologise for the length. you're not a waffler or a rambler, this 1.5 hour tutorial was 99% useful information so even if it was 3 hours long most people (including and especially me) would watch it without fretting about the length due to the value Your crash course was informative and intuitive with complicated things made simple. When you were about to do something, I would try to do it myself first and then I would come back and see your solution which is why it took me a whole day to get through it! you helped me get into web development and i'm happy to keep consuming your content, thank you very much Sir
Thought I would share this... # Creating Class Component 20:48 # State 22:52 # Passing State as Prop to Component 24:57 # Looping through props and output 26:17 # Adding key to list item 31:19 # PropTypes 31:56 # Style components 34:07 # Add style to a method 35:46 # Why arrow functions and .bind(this) 41:33 # Component drilling 42:26 # Passing props through methods using component drilling 45:57 # Deconstructing 46:35 # Updating state through a method 47:57 # Toggle state 49:18 # Submit events 1:09:21 # React Router 1:15:30 # Links 1:23:29 # Http GET request 1:25:56 # Http POST request 1:30:12 # Http DELETE request 1:32:51 # Adding PropTypes 1:34:31
Thanks a lot! Just in the # Http GET request, it is not 1:23:56, it's 1:27:56. Although IMHO there should be a section before this one because he explains about the Axios library at 1:26:53.
At 20:04, Emmet magically works with JSX :) I had to look this up so it may be helpful to others as well ... To get emmet to work with JSX, do the following: - Open Settings ( ctrl + ,) - Go to Workspaces - Select "emmet" - Select "Edit in JSON" - Add the following: ```{ "emmet.includeLanguages": { "javascript": "javascriptreact" } }```
The checkboxes should match whether the todos are completed. To achieve that, update the render method in TodoItem.js like this: const { title, id, completed } = this.props.todo; ...
@@kifahandary8126 I think we wont need that since we are getting the checked information from App.js and it works without doing so, would appreciate if you give details about why to use that line?
An expert teacher who's words are priceless, spending so long to try and explain in such a beautiful manner and then apologizing for taking long. You are a hero ! I am starting to love React after I have seen this video. There were so many barriers in me learning React, so much scattered information but this video is one stop shop
BEFORE YOU START npx create-react-app todo --scripts-version 1.1.5 BEFORE YOU START so you have classes instead of functions and can follow along the tutorial on VSCode you can also run react pure to code extension to convert if you are running this is 2020 thanks to Chad C. for the info
28:33 - An amazing extension being used here. Thanks a lot for the tutorial. Helps me a lot! I keep coming back to refresh anything that I missed. Below bookmarks have been commented by @Mukesh Kumar. Adding these to your description would be very helpful for people trying to navigate quickly through the tutorial. 9:41 Start learning React (Introduction) 11:15 Install Node.js 11:34 Install React Dev Tools 11:45 Github page for create React app 12:05 Create 20:48 Creating Class Component 22:52 State 24:57 Passing State as Prop to Component 26:17 Looping through props and output 31:19 Adding key to list item 31:56 PropTypes 34:07 Style components 35:46 Add style to a method 41:33 Why arrow functions and .bind(this) @ Component drilling 45:57 Passing props through methods using component drilling 46:35 Deconstructing 47:57 Updating state through a method 49:18 Toggle state 1:09:21 Submit events 1:15:30 React Router 1:23:29 Links 1:25:56 Http GET request 1:30:12 Http POST request 1:32:51 Http DELETE request 1:34:31 Adding PropTypes
Great course: 56:28 : no need for the [... this.state.todos.filter ...] since the filter method will automatically return an array. You're deconstructing then reconstructing the array -> it's redundant.
For Windows users, if you are unable to npm create-react-app then you can use : "npm install -g create-react-app npx create-react-app" I ran into trouble and those two lines solved the issue.
I have a bachelor's in Web Development and Design and I think I've learned/retained more from this video than I did from my course on React. Very well done, man!
Traversy Media, Thank you for this video, a great start for those venturing into ReactJs. There is one important point you did not bring up concerning state is that of immutability. The react framework rely, at least in part, on state changes being new objects, not the same objects mutated. The place you make a mistake is at 49m. The todo will be mutated by the act of toggling the completed property, which means that even though map returns a new array, the old array will have a mutated element, the todo object being changed. The markComplete can be changed in the following way to support an immutable update: markComplete = (id) => { this.setState({ todos: this.state.todos.map(todo => { return todo.id !== id ? todo : { ...todo, completed: !todo.completed }; }) }); } This uses the ternary operator and reversed condition, but it is equivalent. The important difference is in the object literal where the spread operator is used on the todo object. This creates a new object with the same properties and associated values as the prior todo object. The extra completed property takes the place of the property from todo since it comes later in the object literal. For more complex data structures, either simplify the structure, or use one of the available libraries for handling data in an immutable way. The ReactJs documentation has some suggestions. On a similar note, at 56m25s, the return value of filter is a new array, and since no element is actually changed the spread into an array is superfluous.
@@lasithk5914 1) Reacts wants to know which components have changed their state and props to avoid re-rendering everything. (see React.PureComponent) 2) You can implement Undo-Redo easily.
3) If there are multiple setState calls coming one after another Reacts merges state changes and re-renders the component only once. This is the reason why Roger Norling's example is also unconventional. You shouldn't copy this.state directly. Instead, pass a callback: markComplete = (id) => { this.setState((prevState)=> { todos: prevState.todos.map(todo => { return todo.id !== id ? todo : { ...todo, completed: !todo.completed }; }) }); See: reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
For those that are struggling cos can't access the props because you are using function component instead of class component, you just add a parameter to the function component, what I mean is: function Todos(props) { return ( props.todos ); }
Man. I remember I started learning web dev last July. I began by watching your HTML only "landing page" tutorials over and over again until I memorized how to do them on my own without watching the videos. I would watch these other vidoes: project with node.js, express, mongo... etc. and I would think omfg wtf is that? I then did a JS course and now, a few months later, I'm working on learning node.js and I know what all that stuff is now lol. In a few months I'll be more than job ready : )
Thanks Brad. I believed you when you told me what I needed to know in 2019 / 2020 to be a web developer - I listened to you religiously. I didn't even have access to internet at home, I would download your videos on my laptop in the dairy queen parking lot that had wifi and play them on repeat at home. Anyways, I'm now 3 months into a 6 month contract doing front end web development at a rate I thought I would need years of experience to get, and finally have the confidence to start applying to full time positions. THANK YOU!!!!
I'm several weeks into the Udacity NanoDegree Program for React and have been pretty frustrated and lost but... I feel like I just learned more in the last 90mins from Brad than in the month I've been doing Udacity. Bless you sir. So glad I found your channel!
If you're having issues following along with the tutorial (like I was) because in the video it shows classes using the extends declarations versus the newer syntax which uses functions. Just type: npx create-react-app . --scripts-version 2.1.2 This creates the scripts with classes
I love this course because it gets straight to the point. It doesn't start with 50 minutes of introductions or explanations about why React is changing the world with speakers from Facebook and other nonsense that way too many courses have. This is the first React tutorial that didn't want to make me pull out my hair from the ridiculously slow pacing and nonsensical padding with nonsense that has nothing to do with learning React. Kudos to everybody involved.
As an experienced web developer coming from a Backbone+Marionette background, this was the perfect introduction to React for me. Thank you and great job!
@@edwardtofan8783 ironically I'm having a very tough time with React. I'm pursuing VueJS instead BUT One time I was taking an EJS class online and there was an outdated framework in the class. One of the comments had a fix for it and it was a lifesaver. I happened to figure this out and figure that I wouldn't be the only person with the same problem so I'm thrilled if it actually worked for you.
Brad common man, You don't need to apologize about the length of this crash course - This has been so far the most informative crash course I've ever taken. THANKS A LOT 🙌
Timestamps for this course: 0:00 Intro 8:16 Anatomy of a component 9:42 Quick overview of the app to build 11:13 Software requirements 11:45 Creation and overview of app's boilerplate 18:25 Running the server 19:14 Performing basic cleanup 20:45 Todos component
Your channel helped me more than any other instructor's tutorial, I'm using React Router and I was touched when I clicked the menu 'About' and showed up the contents. Thank you so much.
simply amazing, only thing i would say is maybe do a functional version. This is because create-react-app now comes with "function App()" as boiler plate instead of "class app" like before.
Sir please don't say sorry again and again for time, every single second was worth it. You r an awesome instructor sir,keep creating awesome tutorials😋
Just finished your excellent React Tutorial. It was the first video on React that I could actually make it to the end with the code intact and working! I so appreciate you taking the time to explain all the parts. This tutorial really helped me. Thank you ! !
On windows with visual code studio: 1- Download and install Git 2- Download and install Node.js 3- Go to vs code terminal and check if everything is installed by doing the following: to check that everything is installed you should check the version of each installation: "git --version" "npm --version" "node --version" 4- type "npm install -g create-react-app" in your terminal to install react 5- Now you can create your react project by typing: "create-react-app " Followed the instructions in this webpage: makandracards.com/reactjs-quick/52419-install-reactjs-windows
For anyone interested, at 43:24 he was talking about tunneling. Tunneling and bubbling are two important features of events, not only here, but also on other platforms like WPF.
Going through this tutorial in May 2020 !! Great as always ! Somebody might have some issues though !! Here's what you need to do ! Do the following changes: create-react-app's newest version doesn't install App as class component, but as a functional component. I'd suggest rewriting it as shown in the video(the class component version) For uuid, import {v4 as uuid} from 'uuid'; Instead of uuid.v4(), use uuid();
pro tip: speed up the video(most educational videos) to 1.25X , it makes the videos faster so you can watch more videos in a session. this video was extremely helpful!
Omg you are the real MVP, just started learning React on fcc but its boring to read and read... Thank you this will help to do a second part in your MERN stack course on udemy!
You are reading my mind Brad! Was just thinking of starting off with a framework which most likely will be React now in the new year, and here you are! Been following your channel for almost a year now, learned a lot from you! Bought the modern javascript udemy course from you, learned tons of new stuff. Will start looking for an entry level job or an internship next week, but given that I haven't yet started with a framework, this is right on spot. Happy new year and all the best!
Yes! Brad, you're a lifesaver. I was looking for a short(ish) crash course on React as I was starting to get a bit confused learning it on FCC & I wanted to get a quick rundown so that I can go into it with a kind of bird's-eye view. Naturally, your *very helpful* channel happens to have just what I need. So thank you.
I am a student of yours on Udemy. I am taking your MERN stack course but I haven't started yet because I am taking some prerequisite stuff. I will add this to my prerequisite list. Thank you!
@@eeeeee4756 I updated my reply to you to show some playlists that I use. For some reason the Academind playlist page doesn't show all his playlist; you have to use the page search function to see all of them. Good luck to you too!
If your doing this is 2020 and running into errors even if your syntax is perfect, I suggest looking here in the comments section for updates and tips. Fantastic Tutorial! Very dense and packed with information. I was expecting just to watch , but it became so interesting I ended up following along :)
You really do not need to apologise for the length of the lesson. You made it freely available and it's excellent throughout, so thank you for your time and knowledge!
Really awesome tutorial! I used React over 4 years ago, but have since been a backend engineer and my React knowledge quickly went rusty and extremely outdated. Clearly a lot has changed in a few years. Thanks for going through all this at a nice pace that I can actually follow. I watched some other tutorials out there that try to teach React in 30 minutes or even 5 minutes and they were absolutely useless.
For those who are seeing functions instead of class in app.js, use following command to create app npx create-react-app my-app --scripts-version 1.1.5 Creadits: Chad c
This tutorial was superb. This is the first tutorial that I have actually watched until the very end. It had all the essential informations. You are the best.
I've been struggling with React for awhile now. I mainly work with Python in back-end code. My company uses React and React Native though and I'm trying to expand towards Full-Stack Development. I spent a long time going over their React code thinking I would be a quick study but not so much. Your intro to this video made me realize I needed to improve my ES6 skills so I spent about 6 hours going over Deconstructuring, High Order Array Methods, AJAX and Fetch API. That information alone boosted my confidence and understanding quite a bit. The rest of your video was the clearest and best explanation of React that I've been able to find. I'm still a bit confused about "Climbing the tree" but I understand the basics now and I plan on going through your video again before setting off to create my own React App. Thanks!!!
thx for work, Brad this.setState({todos: this.state.todos.filter(todo => todo.id !== id)}) not need wrap in an array so like method filter() return array
im switching to react from vue, Although vue is great and easy to learn i couln't find any jobs, i live in a 3rd world country and its hard to land one as a free lancer, so im going to learn react for now, thanks for the free course always awesome content.
I am currently a Flutter developer and I love working with it. Now learning React.js from scratch from Brad, which is very exciting. It might be 1 hour 40 mins but I suggest you taking as much time as required, do not skip anything and make sure that you learnt even if it takes 10 hours. Cheers!
You guys at Traversy Media are helping me in my current boot camp more than you know! Thank you! The way you explain and walk through each step helps me understand HOW to use and understand (understand being the key word really) how this all ties together and works!
Around 1:15:21 I was getting an error "Attempted import error: 'uuid' does not contain a default export (imported as 'uuid')" because uuid package used to have default export but it no longer does. To get around this in the import write it as import { v4 as uuid } from "uuid"; and then you can use it as id: uuid() when assigning the id property
thank you so much! I started my Vue.js some time ago with your crash course, and now I start React. Building same app with both Vue and React really gives me more insight into their differencies and similarities and what I find more comforatble for myself.
Brad makes and awesome tutorial, taking his time to explain every little detail in a clear and concise way, and all for free and he proceeds to "apologize for taking so long". hahah. No buddy, THANK YOU for your hard work. Awesome video. I learnt a lot.
Thanks for this crash course! It is pretty great. I have a question though, around 1:32:30, when I add the todos by doing a post request to the jsonplacerholder API, they always get added with the same id, 201. How do I fix this?
Ok first just sort out why we are getting 201 ids for every new item we add. Now theJSONPlaceholder has 200 pre-written todos in the API, so requesting a new list will always give you 201 as Id (even after adding limit=10 or more) which is normal for an API, but in our application, we can add our own Id by using "res.data.id = uuid.v4(); " to the response we get. I'll copy-paste the code here so things are clearer addTodo = title => { axios .post("jsonplaceholder.typicode.com/todos", { title, completed: false }) .then(res => { res.data.id = uuid.v4(); this.setState({ todos: [...this.state.todos, res.data] }); }); }; So in the promise, we are adding our Id to the response before setting the state. Hope this is understood.
"...Try to explain everything I do rather than just a watch-me-code video." Thank god. As an up and coming software engineer, I am bothered whenever people tell me to just 'type it in, it works. we'll teach you why some other time." I must know the how and why to everything I type in.
I followed ur bootstrap course on udemy and didn't like it much.....but in this tutorial u redeemed urself. It was very nice and useful.... thanks man.
I understand this is a crash course. I don't recommend this video if you don't know the core basics of react. It was so lost I had to pause and take a basics course on team treehouse. But then the team treehouse started to get confusing and frustrating so I return back to this video and OMG, It made so much sense and so much easier to understand. Brad is one, if not, the BEST teacher on youtube. Thanks for this awesome tutorial Brad :D
check semantic UI. Its really cool and easy. check this step by step guide. videotutorialspot.com/2019/01/08/semantic-ui-for-react-install-and-getting-started/
First of all, Brad, you are gifted instructor. I learnt and keep learning from you. I decided I'd share one trick Brad showed here, but he didn't pointed out (maybe because he is so modest, lol) While adding new todo he puts get-response from server directly to local state, which triggers to update the Dom automatically, this makes no need to re-fetch whole array of data from backend and mounting response again to local state, thus no need to use componentDidUpdate lifecycle method to update UI. Brilliant, thank you Brad!
FYI - App.js now has "function App()" rather than "class App" because it doesn't need the lifecycle methods. The tutorial used an older version of React.
This is where I'm getting hung up, I stored the state in Todos component but now I'm having difficulty passing the data from AddTodo -> app.js ->TodoItem...
This video made me see the bigger picture. After 6 years of diverse programming experience, I finally realized that front end development isn't as annoying as I thought.
eventhough I had no idea what was going on in the last 30 mins, this was a pretty good tutorial. The code here will be helpful for future references as it covers a lot of concepts in React
Really nice Video ...but there is a big problem. There is no render () function in the App.js in the newer React version . Does someone have the same problem?.
@@skepticalfrog It doesn't matter too much from the looks of it, you can use either one. Also Hooks have been added but even React said that they don't expect everyone to use it right away.
This is quite confusing as to how to learn since that functional update. I'm sitting here at 20min into the video trying to figure out how to construct the todos variable and pass it on to Todos.js... What an unfortunate update :(
i mean for the sake of just getting used to react I just ignored that and used classes instead. I assume once I get used to react I'll be able to figure the rest out. :) I still got a lot of value out of this crash course. thanks :)
Same here! Anyone watching this anno 2020, just write out the code Brad is showing. Get it to work, get your feet wet. Then improve and make pretty and obide by new react laws.
You are an incredible teacher. I often look at 10 other videos and then always end up coming back to yours, which are explained so well and simplified for easy learning. I can’t thank you enough for making all these videos readily available for us!
inside the addToDo method: axios.post assigns the same key (201) to every new entry, which results in an error in the console. brad recently fixed this issue by modifying .then((res) => { res.data.id = uuid.v4(); this.setState({ todos: [...this.state.todos, res.data] }); for those who don't want to use uuid consider: res.data.id = this.state.todos.sort((a, b) => b.id - a.id)[0].id + 1; which gives you incrementing ids awesome content as always! say hello to the sea gulls for me.
Any plans of creating an updated course or a video that mentions how things are done differently with create-react-app's current build? I'm just having the worse time figuring out how some of the things have changed since render() doesn't appear to be used any more and the default is a function rather than `class todos extends Component {}`
Long? Bro this was the most substantial React video I have seen. It is equal to 3 hours if another person would have done it. So many things I appreciate with your videos, but I can sum it up as that I really like that you are talking about the subject and not anything else (in a really good pace). Thanks man, I am gonna try using react for my project
I notice that create-react-app now has the default App.js setup as an unclassed function that returns the App div, rather than using a component. Anyone know the rationale behind this?
Hey, I don't know if you found the solution but I'm gonna answer this anyway. There are two types of React components: functional components and class components. The current version of create-react-app gives you a functional component by default. TraversyMedia has an older version which gives a class component. This is not a problem. You can edit your component freely and make it into a class component. Pause the video and change it like you see it on the screen or Google search for class component and you'll find examples.
@@a.t.4628 thank you so much! it's really important to feel confident you're not getting something foundationally wrong when learning a new framework. Much appreciated.
Every time I **THINK** I am one step closer to learning something so I can create my own code I find I have to learn a half dozen more things. For the last 5 years I have been trying to learn code and WEB DEV and WEB DESIGN on my own and I have spent COUNTLESS HOURS DAYS WEEKS MONTHS sifting through countless videos that are worthless and when I find GOOD Videos like yours I find there is still more and more to learn. YOU and good web dev people must be pure geniuses to Learn everything AND run your own business. I have learned ( basics ) HTML XHTML HTML5 CSS CSS3 PHP SQL but still have not found a decent video to figure out Javascript and when I watched Yours Over and Over and BOB TABORS 8 hour course over and over I still cant figure out HOW to use any of it. Then I see I need to learn REACT VUE ANGULAR or NODE or one of a host of other platform frameworks My head is spinning and my motivation is once again CRUSHED
Holy shit I have never seen a better tutorial in my life! You are a life savior and I wish the best to you, I hope you continue to make these amazing tutorials. And the amount of information you crammed into only an hour and a half is incredible! Thank you so much :)
He's a web developer, I don't think he will do it. No, I think he is interested in this topic but he has a lot to do with his webdev lessons so he just hasn't got time to do ReactNative.
@@alishanali6722 How do you like coding with React Native? The only reason I was thinking about studying React is because of React Native. Still haven't decided if I should dive deeper into React or Vue.
Dan Cruz React Native is a game changer technology because you can replace ios and android developers giving you an advantage in the job market. React native is very easy to use if you are a javascript expert.
This is the 2019 version which uses class based components. The 2021 version with hooks has just been released - ua-cam.com/video/w7ejDZ8SWv8/v-deo.html
first reply
which one should I watch first. Please reply
@@abhishekmaira9769 not this one
@@NinjaAhmed-cp3pe can you please explain why? ... doesn't this use basic class-based components. Sorry I am a beginner and wanted to know which video to start with first
@@abhishekmaira9769 watch the 2021 one
Hey there Brad,
just one note- DON'T apologise for the length. you're not a waffler or a rambler, this 1.5 hour tutorial was 99% useful information so even if it was 3 hours long most people (including and especially me) would watch it without fretting about the length due to the value
Your crash course was informative and intuitive with complicated things made simple. When you were about to do something, I would try to do it myself first and then I would come back and see your solution which is why it took me a whole day to get through it!
you helped me get into web development and i'm happy to keep consuming your content, thank you very much Sir
100/100 true i was wondering why he is excusing giving us a great lesson
+1 Please, don't apologize, Brad. You're doing a great job!
I agree, it takes time to learn these sorts of things and it is something that cannot be rushed. Thanks Brad
Word
1.25x or 1.5x is sufficient
Thought I would share this...
# Creating Class Component
20:48
# State
22:52
# Passing State as Prop to Component
24:57
# Looping through props and output
26:17
# Adding key to list item
31:19
# PropTypes
31:56
# Style components
34:07
# Add style to a method
35:46
# Why arrow functions and .bind(this)
41:33
# Component drilling
42:26
# Passing props through methods using component drilling
45:57
# Deconstructing
46:35
# Updating state through a method
47:57
# Toggle state
49:18
# Submit events
1:09:21
# React Router
1:15:30
# Links
1:23:29
# Http GET request
1:25:56
# Http POST request
1:30:12
# Http DELETE request
1:32:51
# Adding PropTypes
1:34:31
thanks for this
you absolute unit! loveya.
One of the best comments in UA-cam history.
Thanks a lot! Just in the # Http GET request, it is not 1:23:56, it's 1:27:56. Although IMHO there should be a section before this one because he explains about the Axios library at 1:26:53.
Oh god thanks god for this comment !! you added as much value as the video it self ! you r the best dude !
import GreatCrashCourse from './TraversyMedia'
export default HitLikeButton
Awesome! :)
; important
import GreatCrashCourse from './TraversyMedia';
export default HitLikeButton;
where can i refer for shortcuts like core css codes directly. i am beginer !
So basically HitLikeButton is the name of class otherwise it'll give error
If you have a problem with uuid do this:
import { v4 as uuidv4 } from 'uuid';
id: uuidv4()
Good man.
I was writing the same comment and I have spotted yours ;)
Thank you!
Or just get the length of todos array + 1
Thank you!!
At 20:04, Emmet magically works with JSX :)
I had to look this up so it may be helpful to others as well ...
To get emmet to work with JSX, do the following:
- Open Settings ( ctrl + ,)
- Go to Workspaces
- Select "emmet"
- Select "Edit in JSON"
- Add the following:
```{
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}```
Thanks man!
This worked. Thanks dude !
Thanks for this
This is why I love internet, people are really kind here.
The checkboxes should match whether the todos are completed. To achieve that, update the render method in TodoItem.js like this:
const { title, id, completed } = this.props.todo;
...
Good observation!
Thank you! I was trying to figure out how to fix that!
and add this in checkbox
@@kifahandary8126 I think we wont need that since we are getting the checked information from App.js and it works without doing so, would appreciate if you give details about why to use that line?
I was trying to figure out the same thank you :)
An expert teacher who's words are priceless, spending so long to try and explain in such a beautiful manner and then apologizing for taking long. You are a hero ! I am starting to love React after I have seen this video. There were so many barriers in me learning React, so much scattered information but this video is one stop shop
BEFORE YOU START
npx create-react-app todo --scripts-version 1.1.5
BEFORE YOU START
so you have classes instead of functions and can follow along the tutorial
on VSCode you can also run react pure to code extension to convert if you are running this is 2020
thanks to Chad C. for the info
Thank You! I've been trying to figure out how to switch version so I can follow along, I was on the verge of giving up! This is very useful
Thanks this was really helpful
Thank you man... wasted too much time on this before i saw your comment
Siamak you're one beautiful son of a bitch
After an hour surching for a solution I stumbled upon Mr Kosari. Much obliged!
28:33 - An amazing extension being used here.
Thanks a lot for the tutorial. Helps me a lot! I keep coming back to refresh anything that I missed.
Below bookmarks have been commented by @Mukesh Kumar. Adding these to your description would be very helpful for people trying to navigate quickly through the tutorial.
9:41 Start learning React (Introduction)
11:15 Install Node.js
11:34 Install React Dev Tools
11:45 Github page for create React app
12:05 Create
20:48 Creating Class Component
22:52 State
24:57 Passing State as Prop to Component
26:17 Looping through props and output
31:19 Adding key to list item
31:56 PropTypes
34:07 Style components
35:46 Add style to a method
41:33 Why arrow functions and .bind(this)
@ Component drilling
45:57 Passing props through methods using component drilling
46:35 Deconstructing
47:57 Updating state through a method
49:18 Toggle state
1:09:21 Submit events
1:15:30 React Router
1:23:29 Links
1:25:56 Http GET request
1:30:12 Http POST request
1:32:51 Http DELETE request
1:34:31 Adding PropTypes
Thanks buddy 👍👍
Great course:
56:28 : no need for the [... this.state.todos.filter ...] since the filter method will automatically return an array. You're deconstructing then reconstructing the array -> it's redundant.
I was having trouble understading this, thanks for the explanation
I was wondering about this as well. Was the intention of using spread operator is to make a copy of the array, rather than modifying the existing one?
@@WayneSzeto yes
@@WayneSzeto So what would be the downside of modifying the existing array?
For Windows users, if you are unable to npm create-react-app then you can use :
"npm install -g create-react-app
npx create-react-app"
I ran into trouble and those two lines solved the issue.
May be for experienced programmer, this solution will not have any worth. But for me, you sir, just saved my day. kudos
nodejs8.0+ is OK every
Thank you!!!
Thank you so much, was tearing my hair out at this
thanks alot!!
I have a bachelor's in Web Development and Design and I think I've learned/retained more from this video than I did from my course on React. Very well done, man!
Bachelor's in Web Development and Design? Is that even a thing?
That doesn't exist kid
@@l2ob1222 some universities in my country offer a Bachelor in Web Development so i wouldn't discredit him
Traversy Media, Thank you for this video, a great start for those venturing into ReactJs.
There is one important point you did not bring up concerning state is that of immutability. The react framework rely, at least in part, on state changes being new objects, not the same objects mutated. The place you make a mistake is at 49m. The todo will be mutated by the act of toggling the completed property, which means that even though map returns a new array, the old array will have a mutated element, the todo object being changed. The markComplete can be changed in the following way to support an immutable update:
markComplete = (id) => {
this.setState({ todos: this.state.todos.map(todo => {
return todo.id !== id ? todo : { ...todo, completed: !todo.completed };
}) });
}
This uses the ternary operator and reversed condition, but it is equivalent. The important difference is in the object literal where the spread operator is used on the todo object. This creates a new object with the same properties and associated values as the prior todo object. The extra completed property takes the place of the property from todo since it comes later in the object literal.
For more complex data structures, either simplify the structure, or use one of the available libraries for handling data in an immutable way. The ReactJs documentation has some suggestions.
On a similar note, at 56m25s, the return value of filter is a new array, and since no element is actually changed the spread into an array is superfluous.
this should be upvoted, great point
Great observation and correction! So often I see people point out when something is wrong, but offer no alternative solution.
Why does React Framework rely on changes to state objects being new objects?
@@lasithk5914
1) Reacts wants to know which components have changed their state and props to avoid re-rendering everything. (see React.PureComponent)
2) You can implement Undo-Redo easily.
3) If there are multiple setState calls coming one after another Reacts merges state changes and re-renders the component only once.
This is the reason why Roger Norling's example is also unconventional.
You shouldn't copy this.state directly.
Instead, pass a callback:
markComplete = (id) => {
this.setState((prevState)=> { todos: prevState.todos.map(todo => {
return todo.id !== id ? todo : { ...todo, completed: !todo.completed };
})
});
See:
reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
For those that are struggling cos can't access the props because you are using function component instead of class component, you just add a parameter to the function component, what I mean is:
function Todos(props) {
return (
props.todos
);
}
Man. I remember I started learning web dev last July. I began by watching your HTML only "landing page" tutorials over and over again until I memorized how to do them on my own without watching the videos. I would watch these other vidoes: project with node.js, express, mongo... etc. and I would think omfg wtf is that? I then did a JS course and now, a few months later, I'm working on learning node.js and I know what all that stuff is now lol. In a few months I'll be more than job ready : )
There's no way I learn a new language without watching your videos first!
Dude, that was intense! Great tutorial. Walked in not knowing anything about React, left like I have learned a shit load. Thank you!
Thanks Brad. I believed you when you told me what I needed to know in 2019 / 2020 to be a web developer - I listened to you religiously. I didn't even have access to internet at home, I would download your videos on my laptop in the dairy queen parking lot that had wifi and play them on repeat at home. Anyways, I'm now 3 months into a 6 month contract doing front end web development at a rate I thought I would need years of experience to get, and finally have the confidence to start applying to full time positions. THANK YOU!!!!
I'm several weeks into the Udacity NanoDegree Program for React and have been pretty frustrated and lost but... I feel like I just learned more in the last 90mins from Brad than in the month I've been doing Udacity. Bless you sir. So glad I found your channel!
19:14 - basic clean-up
1:05:35 - input field functionality
1:08:41 - onChange for multiple fields
Brad, you are a magnificent beast.
Ikr
The best good guy brad on the planet
To be completely honest, I am really scared of him because of how good he is at coding. I guess at least he is using his powers for good.
Leslie at it again?
If you're having issues following along with the tutorial (like I was) because in the video it shows classes using the extends declarations versus the newer syntax which uses functions. Just type: npx create-react-app . --scripts-version 2.1.2
This creates the scripts with classes
THANK YOU!!!! starting over (dangit!!!!)
oh my god you are a fucking angel THANK YOU.
please note that uuid has changed their declare, this one works for me:
import { v4 as uuidv4 } from 'uuid';
id: uuidv4()
Thanks!!
Thanks !!
Thanks !!
or you can just use import * as uuid from 'uuid', and then use uuid.v4()
Dude, I've spent like 30 minutes looking online, why don't you put it on
stackoverflow.com?
I love this course because it gets straight to the point. It doesn't start with 50 minutes of introductions or explanations about why React is changing the world with speakers from Facebook and other nonsense that way too many courses have. This is the first React tutorial that didn't want to make me pull out my hair from the ridiculously slow pacing and nonsensical padding with nonsense that has nothing to do with learning React. Kudos to everybody involved.
As an experienced web developer coming from a Backbone+Marionette background, this was the perfect introduction to React for me. Thank you and great job!
*DEPRECATED UUID FIX* - if you get stuck here 1:14:46 at UUID, note this:
```
const uuidv4 = require('uuid/v4'); //
Thank you for helping us :)
@@edwardtofan8783 ironically I'm having a very tough time with React. I'm pursuing VueJS instead BUT One time I was taking an EJS class online and there was an outdated framework in the class. One of the comments had a fix for it and it was a lifesaver. I happened to figure this out and figure that I wouldn't be the only person with the same problem so I'm thrilled if it actually worked for you.
Thank you for fully spelling it out for us :))
Brad common man, You don't need to apologize about the length of this crash course - This has been so far the most informative crash course I've ever taken. THANKS A LOT 🙌
I spent 6 days trying to figure out this whole tutorial. Now I finally did it in 40 minutes without seeing anything
How? I can't figure out
@@awaisaslam8604 Eat 10 almonds every day.. you will figure out soon
@avais aslam
@@muhammadalmaskhan9265 haha
Same! took me 6 days as well!
Timestamps for this course:
0:00 Intro
8:16 Anatomy of a component
9:42 Quick overview of the app to build
11:13 Software requirements
11:45 Creation and overview of app's boilerplate
18:25 Running the server
19:14 Performing basic cleanup
20:45 Todos component
Your channel helped me more than any other instructor's tutorial, I'm using React Router and I was touched when I clicked the menu 'About' and showed up the contents. Thank you so much.
simply amazing, only thing i would say is maybe do a functional version. This is because create-react-app now comes with "function App()" as boiler plate instead of "class app" like before.
Sir please don't say sorry again and again for time, every single second was worth it. You r an awesome instructor sir,keep creating awesome tutorials😋
Me: Clicks this video
Ads: You’re wasting your time watching online coding courses
Me: Skips Ad 😀
you should watch the AD that's how he get's paid :)
@@EmekaMbah gr8 thought
Just finished your excellent React Tutorial. It was the first video on React that I could actually make it to the end with the code intact and working! I so appreciate you taking the time to explain all the parts. This tutorial really helped me.
Thank you ! !
Anyone watching this and considering buying Brads course, just do it! I bought it and it's amazing! Highly recommended.
I would personally see this course sold for money, thank you for giving it to the community for free
On windows with visual code studio:
1- Download and install Git
2- Download and install Node.js
3- Go to vs code terminal and check if everything is installed by doing the following:
to check that everything is installed you should check the version of each installation: "git --version" "npm --version" "node --version"
4- type "npm install -g create-react-app" in your terminal to install react
5- Now you can create your react project by typing: "create-react-app "
Followed the instructions in this webpage: makandracards.com/reactjs-quick/52419-install-reactjs-windows
Hey thanks a lot for this info!
For anyone interested, at 43:24 he was talking about tunneling. Tunneling and bubbling are two important features of events, not only here, but also on other platforms like WPF.
Going through this tutorial in May 2020 !! Great as always !
Somebody might have some issues though !! Here's what you need to do !
Do the following changes:
create-react-app's newest version doesn't install App as class component, but as a functional component. I'd suggest rewriting it as shown in the video(the class component version)
For uuid,
import {v4 as uuid} from 'uuid';
Instead of uuid.v4(), use uuid();
pro tip: speed up the video(most educational videos) to 1.25X , it makes the videos faster so you can watch more videos in a session.
this video was extremely helpful!
Omg you are the real MVP, just started learning React on fcc but its boring to read and read... Thank you this will help to do a second part in your MERN stack course on udemy!
You are reading my mind Brad! Was just thinking of starting off with a framework which most likely will be React now in the new year, and here you are! Been following your channel for almost a year now, learned a lot from you! Bought the modern javascript udemy course from you, learned tons of new stuff. Will start looking for an entry level job or an internship next week, but given that I haven't yet started with a framework, this is right on spot. Happy new year and all the best!
Same :)
My boy Brad is a real life wizard
Same!
same here, Brad is cool
Lol, he also reads my mind too. He knows what his students need at the right time. That a teacher!
Couple of years already coding along you and your tutorials Sir, wouldn't be here without you. Thank you.
Yes! Brad, you're a lifesaver. I was looking for a short(ish) crash course on React as I was starting to get a bit confused learning it on FCC & I wanted to get a quick rundown so that I can go into it with a kind of bird's-eye view. Naturally, your *very helpful* channel happens to have just what I need. So thank you.
I am a student of yours on Udemy. I am taking your MERN stack course but I haven't started yet because I am taking some prerequisite stuff. I will add this to my prerequisite list. Thank you!
thankyou so much brad how can i thanks to you? you are brilliant
Hi Fabric, how did you like the MERN course? Am thinking of taking it next?
@@fabricobjects-llc3581 Thank you ! Will check it out, good luck in the course!
@@eeeeee4756 I updated my reply to you to show some playlists that I use. For some reason the Academind playlist page doesn't show all his playlist; you have to use the page search function to see all of them. Good luck to you too!
This is awesome.
This is my first step to learn react, and now im not so intimidated. Huge thanks !
please never apologize for any of your videos to be "really long" - it was worth every minute - gonna take your Front To Back MERN stack course now
If your doing this is 2020 and running into errors even if your syntax is perfect, I suggest looking here in the comments section for updates and tips. Fantastic Tutorial! Very dense and packed with information. I was expecting just to watch , but it became so interesting I ended up following along :)
Thank you very much sir. I started studying react few weeks ago. This came at the time I needed it the most.
great course and explanation, love it.
For those of you having issues with importing the Router just do:
npm install react-router-dom --save-dev
You deserve more subscribers and more views.
Thankyou for producing such informative and enjoyable content.
You really do not need to apologise for the length of the lesson. You made it freely available and it's excellent throughout, so thank you for your time and knowledge!
Really awesome tutorial! I used React over 4 years ago, but have since been a backend engineer and my React knowledge quickly went rusty and extremely outdated. Clearly a lot has changed in a few years. Thanks for going through all this at a nice pace that I can actually follow. I watched some other tutorials out there that try to teach React in 30 minutes or even 5 minutes and they were absolutely useless.
For those who are seeing functions instead of class in app.js, use following command to create app
npx create-react-app my-app --scripts-version 1.1.5
Creadits: Chad c
THANK YOU! There is more than one teacher at Traversy Media. It takes a village.
Thank you; I spent awhile trying to figure out a solution to that on stackoverflow, and here it was the whole time.
where can i refer for shortcuts like core css codes directly. i am beginer !
Thank You SOOOOOO much.. I listened to every word and every detail
A big THANK YOU from your biggest fan in Syria
I just finished your MERN stack on udemy today, keep up with great content !
This tutorial was superb. This is the first tutorial that I have actually watched until the very end. It had all the essential informations. You are the best.
I've been struggling with React for awhile now. I mainly work with Python in back-end code. My company uses React and React Native though and I'm trying to expand towards Full-Stack Development. I spent a long time going over their React code thinking I would be a quick study but not so much.
Your intro to this video made me realize I needed to improve my ES6 skills so I spent about 6 hours going over Deconstructuring, High Order Array Methods, AJAX and Fetch API. That information alone boosted my confidence and understanding quite a bit.
The rest of your video was the clearest and best explanation of React that I've been able to find. I'm still a bit confused about "Climbing the tree" but I understand the basics now and I plan on going through your video again before setting off to create my own React App.
Thanks!!!
thx for work, Brad
this.setState({todos: this.state.todos.filter(todo => todo.id !== id)})
not need wrap in an array so like method filter() return array
That was driving me crazy! :p
Nice job man, very good tutorial! Somehow it is really easy to understand.
dadash barname nevis ham bodi :)
im switching to react from vue, Although vue is great and easy to learn i couln't find any jobs, i live in a 3rd world country and its hard to land one as a free lancer, so im going to learn react for now, thanks for the free course always awesome content.
Jose, we're not 3rd world country. Don't put us on this low level.
India is third world....Mexico is right next to USA...just jump the fence
+I'm a Developer im from southeast asia more 3thrd world country, they pay us 300 USD /month as web developer
Just an fyi 'Third World' actually means a counry that was neutral during the cold war...
why not freelancing online?
I am currently a Flutter developer and I love working with it. Now learning React.js from scratch from Brad, which is very exciting. It might be 1 hour 40 mins but I suggest you taking as much time as required, do not skip anything and make sure that you learnt even if it takes 10 hours. Cheers!
You guys at Traversy Media are helping me in my current boot camp more than you know! Thank you! The way you explain and walk through each step helps me understand HOW to use and understand (understand being the key word really) how this all ties together and works!
Appreciate you putting these tutorials together. These are too helpful ✊🏽
pro tip: 1.25x speed is barely any difference and makes you not have to spend so much time :D
That tip got no use coz i can already understand at 1.75x speed 😂😁
@@neillunavat bruh! :D :D
Around 1:15:21 I was getting an error "Attempted import error: 'uuid' does not contain a default export (imported as 'uuid')" because uuid package used to have default export but it no longer does. To get around this in the import write it as
import { v4 as uuid } from "uuid";
and then you can use it as
id: uuid() when assigning the id property
thank you so much! I started my Vue.js some time ago with your crash course, and now I start React. Building same app with both Vue and React really gives me more insight into their differencies and similarities and what I find more comforatble for myself.
Brad makes and awesome tutorial, taking his time to explain every little detail in a clear and concise way, and all for free and he proceeds to "apologize for taking so long". hahah. No buddy, THANK YOU for your hard work. Awesome video. I learnt a lot.
insteaf of uuid, you can use Date.Now() to create an id
Can you please write how to use Date.now?
Thanks for this crash course! It is pretty great.
I have a question though, around 1:32:30, when I add the todos by doing a post request to the jsonplacerholder API, they always get added with the same id, 201. How do I fix this?
add the following "res.data.id = uuid.v4(); " to the promise before setState in addTodo() , that would work.!
Hey I have same question, did you manage to sort this out? I did not exactly get where Ganesh is saying to add res.data.id = uuid.v4();
Ok first just sort out why we are getting 201 ids for every new item we add. Now theJSONPlaceholder has 200 pre-written todos in the API, so requesting a new list will always give you 201 as Id (even after adding limit=10 or more) which is normal for an API, but in our application, we can add our own Id by using "res.data.id = uuid.v4(); " to the response we get. I'll copy-paste the code here so things are clearer
addTodo = title => {
axios
.post("jsonplaceholder.typicode.com/todos", {
title,
completed: false
})
.then(res => {
res.data.id = uuid.v4();
this.setState({
todos: [...this.state.todos, res.data]
});
});
};
So in the promise, we are adding our Id to the response before setting the state. Hope this is understood.
where can i refer for shortcuts like core css codes directly. i am beginer !
"...Try to explain everything I do rather than just a watch-me-code video."
Thank god. As an up and coming software engineer, I am bothered whenever people tell me to just 'type it in, it works. we'll teach you why some other time." I must know the how and why to everything I type in.
I followed ur bootstrap course on udemy and didn't like it much.....but in this tutorial u redeemed urself. It was very nice and useful.... thanks man.
I understand this is a crash course. I don't recommend this video if you don't know the core basics of react. It was so lost I had to pause and take a basics course on team treehouse. But then the team treehouse started to get confusing and frustrating so I return back to this video and OMG, It made so much sense and so much easier to understand. Brad is one, if not, the BEST teacher on youtube. Thanks for this awesome tutorial Brad :D
Can you make an updated crash course using the functional style?
A big thanks for providing this tutorial. It helps a lot.
I'm so mad at my self, I've been doing hardcore JavaScript for so long my CSS skills are horrible.
I have the course for you coming out very soon :)
@@TraversyMedia what's your courses in 2019 brad
check semantic UI. Its really cool and easy. check this step by step guide. videotutorialspot.com/2019/01/08/semantic-ui-for-react-install-and-getting-started/
Semantics UI is no longer being supported. I would still recommend using Bootstrap at this point.
and what about tachyons? I've been styling some things with tachyons.
Got atleast 90% more clarity on everything. Awesome course, absolutely no flaws.
First of all, Brad, you are gifted instructor. I learnt and keep learning from you.
I decided I'd share one trick Brad showed here, but he didn't pointed out (maybe because he is so modest, lol)
While adding new todo he puts get-response from server directly to local state, which triggers to update the Dom automatically, this makes no need to re-fetch whole array of data from backend and mounting response again to local state, thus no need to use componentDidUpdate lifecycle method to update UI.
Brilliant, thank you Brad!
is anyone else seeing function App() instead of a class?
Yep, I'm. I don't know if is some new change where u doesn't need to declare a class... idnk
yes they change it , we can use hooks now for state in function components
yes
how did you solve that problem ?
@@harismemon1546 Simply replace the functional App() with a class based App()
FYI - App.js now has "function App()" rather than "class App" because it doesn't need the lifecycle methods. The tutorial used an older version of React.
This is where I'm getting hung up, I stored the state in Todos component but now I'm having difficulty passing the data from AddTodo -> app.js ->TodoItem...
@@derekdenhartigh3747 React sucks. Check out Svelte svelte.dev
@@derekdenhartigh3747 import React from 'react';
function Todos() {
return (
Todos
);
}
export default Todos;
Awesome. Plz make updated redux crash course
This video made me see the bigger picture. After 6 years of diverse programming experience, I finally realized that front end development isn't as annoying as I thought.
eventhough I had no idea what was going on in the last 30 mins, this was a pretty good tutorial. The code here will be helpful for future references as it covers a lot of concepts in React
Really nice Video ...but there is a big problem. There is no render () function in the App.js in the newer React version . Does someone have the same problem?.
yes I have the same thing, this is a big headache
Just rewrite the code so it reflects the es6 class syntax used in this tutorial and wrap the return statement in a render function.
@@nevuxxx Im not sure if i understand ..but thanks!. i keep trying....
So create-react-app now uses functions instead of classes. does anyone know if thats the preferred method of coding in react now?
Since create-react-app updated since this video, I believe that now functions are preferred over classes.
And that means this tutorial is quite outdated now, too.
@@skepticalfrog It doesn't matter too much from the looks of it, you can use either one. Also Hooks have been added but even React said that they don't expect everyone to use it right away.
@@FakeAssHandsomeMcGee_ True. Though learning hooks and functional component is quite easy anyway.
This is quite confusing as to how to learn since that functional update. I'm sitting here at 20min into the video trying to figure out how to construct the todos variable and pass it on to Todos.js... What an unfortunate update :(
i mean for the sake of just getting used to react I just ignored that and used classes instead. I assume once I get used to react I'll be able to figure the rest out. :)
I still got a lot of value out of this crash course. thanks :)
Same here! Anyone watching this anno 2020, just write out the code Brad is showing. Get it to work, get your feet wet. Then improve and make pretty and obide by new react laws.
You are an incredible teacher. I often look at 10 other videos and then always end up coming back to yours, which are explained so well and simplified for easy learning. I can’t thank you enough for making all these videos readily available for us!
inside the addToDo method:
axios.post assigns the same key (201) to every new entry, which results in an error in the console.
brad recently fixed this issue by modifying
.then((res) => {
res.data.id = uuid.v4();
this.setState({ todos: [...this.state.todos, res.data] });
for those who don't want to use uuid consider:
res.data.id = this.state.todos.sort((a, b) => b.id - a.id)[0].id + 1;
which gives you incrementing ids
awesome content as always! say hello to the sea gulls for me.
Any plans of creating an updated course or a video that mentions how things are done differently with create-react-app's current build? I'm just having the worse time figuring out how some of the things have changed since render() doesn't appear to be used any more and the default is a function rather than `class todos extends Component {}`
delete and update as per video. when he explains 'function component' you will figure out whats happening
Im only 30 minutes in but so far just using his code works without breaking anything. Just change the import line and include the render()
idk why but i find his voice particularly charming
Actual tutorial : 1 hour and 38 minutes ,
me : 5 hours
but still JARGON to me , need to watch this again tho ahahaha
If you haven't already you should go through his 'Node.js crash course' then 'Express JS crash course' then come back to this one.
This course is perfect.
But, if you don't understand you can try Mosh's React for Beginners. It's slow paced and really beginner friendly.
same
@@@MrPacalicious do we need to know node.js before learning React?
@@katheyjohn93 no but i found this easier to understand after going through a node.js course
Very usefull course for free. I don't understand why people press dislike button for this great course.
Long?
Bro this was the most substantial React video I have seen.
It is equal to 3 hours if another person would have done it.
So many things I appreciate with your videos, but I can sum it up as that I really like that you are talking about the subject and not anything else (in a really good pace).
Thanks man, I am gonna try using react for my project
I notice that create-react-app now has the default App.js setup as an unclassed function that returns the App div, rather than using a component. Anyone know the rationale behind this?
Hey, I don't know if you found the solution but I'm gonna answer this anyway.
There are two types of React components: functional components and class components. The current version of create-react-app gives you a functional component by default. TraversyMedia has an older version which gives a class component. This is not a problem. You can edit your component freely and make it into a class component. Pause the video and change it like you see it on the screen or Google search for class component and you'll find examples.
@@jonathanreno1022 I'm glad I could be of help!
@@a.t.4628 thank you so much! it's really important to feel confident you're not getting something foundationally wrong when learning a new framework. Much appreciated.
1:13:42 for unique id's you could use, this.state.todos.length+1
Great tutorials as always. Django with React pleeeeaaase
Every time I **THINK** I am one step closer to learning something so I can create my own code I find I have to learn a half dozen more things.
For the last 5 years I have been trying to learn code and WEB DEV and WEB DESIGN on my own and I have spent COUNTLESS HOURS DAYS WEEKS MONTHS sifting through countless videos that are worthless and when I find GOOD Videos like yours I find there is still more and more to learn. YOU and good web dev people must be pure geniuses to Learn everything AND run your own business.
I have learned ( basics ) HTML XHTML HTML5 CSS CSS3 PHP SQL but still have not found a decent video to figure out Javascript and when I watched Yours Over and Over and BOB TABORS 8 hour course over and over I still cant figure out HOW to use any of it. Then I see I need to learn REACT VUE ANGULAR or NODE or one of a host of other platform frameworks My head is spinning and my motivation is once again CRUSHED
Sounds like you just need to start building something.
Holy shit I have never seen a better tutorial in my life! You are a life savior and I wish the best to you, I hope you continue to make these amazing tutorials. And the amount of information you crammed into only an hour and a half is incredible! Thank you so much :)
Hey Brad, what about react native? 😁
He's a web developer, I don't think he will do it. No, I think he is interested in this topic but he has a lot to do with his webdev lessons so he just hasn't got time to do ReactNative.
TheReverOcelot he has a paid react native course on eduonix which I bought and completed.
@@alishanali6722 How do you like coding with React Native? The only reason I was thinking about studying React is because of React Native. Still haven't decided if I should dive deeper into React or Vue.
Dan Cruz React Native is a game changer technology because you can replace ios and android developers giving you an advantage in the job market. React native is very easy to use if you are a javascript expert.