React JS Crash Course (2019)
Вставка
- Опубліковано 8 вер 2024
- In this crash course you will learn what React JS is and the fundamentals such as components, state, props, JSX, events, etc.
Modern React Front To Back - 13.5 Hour Course
www.udemy.com/...
Code For Tutorial:
github.com/bra...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Related UA-cam Videos:
Redux Crash Course - • Redux Crash Course Wit...
React Context API Project - • Lyric Search App With ...
React Hooks - • Introducing React Hooks
Learn The Mern Stack - • Learn The MERN Stack [...
Website & Other Udemy Courses
www.traversymed...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
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
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
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?
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
There's no way I learn a new language without watching your videos first!
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!
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!!!!
Dude, that was intense! Great tutorial. Walked in not knowing anything about React, left like I have learned a shit load. Thank you!
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?
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!!
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
);
}
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.
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!
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!
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'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!
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 ! !
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!
I would personally see this course sold for money, thank you for giving it to the community for free
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!
Couple of years already coding along you and your tutorials Sir, wouldn't be here without you. Thank you.
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 : )
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?
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😋
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!
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.
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!
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
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 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!!!
Nice job man, very good tutorial! Somehow it is really easy to understand.
dadash barname nevis ham bodi :)
Thank you very much sir. I started studying react few weeks ago. This came at the time I needed it the most.
This is awesome.
This is my first step to learn react, and now im not so intimidated. Huge thanks !
Got atleast 90% more clarity on everything. Awesome course, absolutely no flaws.
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.
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
You deserve more subscribers and more views.
Thankyou for producing such informative and enjoyable content.
Thank You SOOOOOO much.. I listened to every word and every detail
A big THANK YOU from your biggest fan in Syria
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.
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
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
I just finished your MERN stack on udemy today, keep up with great content !
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 !
Perfect diction and pace, Brad... As an experienced developer who just wanted the meat of ReactJS, thank you very much
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 :)
Appreciate you putting these tutorials together. These are too helpful ✊🏽
Can you make an updated crash course using the functional style?
insteaf of uuid, you can use Date.Now() to create an id
Can you please write how to use Date.now?
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();
Amazing tutorial, if you are watching this with the newer versions of react, just copy the class code from Todos and modify App.js so that your app becomes a class
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!
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
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?
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.
19:14 - basic clean-up
1:05:35 - input field functionality
1:08:41 - onChange for multiple fields
Awesome. Plz make updated redux crash course
"...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.
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 :)
This is a fantastic tutorial. Some little things have changed - react App.js component starts now with a functional component boilerplate and axios importing is little different. But in general - it is a fantastic tutorial. Thanks!
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;
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
idk why but i find his voice particularly charming
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.
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.
*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 :))
A big thanks for providing this tutorial. It helps a lot.
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
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
Awesome crash course for someone starting in React. It tackles everything essential for a basic app. Thanks for making this vid!
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.
"Oh I forgot the s."
Broswer
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()
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!
After trying some sections on react on Udemy, I can say that it is the best intro (and more) into ReactJS, with code along examples, but more importantly, explanation on what you're doing and why you're doing it.
where can i refer for shortcuts like core css codes directly. i am beginer !
Great tutorials as always. Django with React pleeeeaaase
you helped me understand so much! please make part-2, on how to deploy on gcp/others, i would like to know the deployment stage. btw, after deploy on local, i open the build folder, index.html is blank unable to show anything, is this normal?
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()
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!
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!
Love this video, such a great tutorial that explains things so well!
But I wonder what his wife did when she saw that dinner with her was on a todo list 😆
Lmaooo ikr
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 !
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
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!
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.
@traversyMedia, Please next time when you make a tutorial name the properties and the classes/components differently. I had to pause so many times just because I could not understand which "todo" you were talking about.
You could use "todo" for the component and "todoProp" for the property, at least that way I can keep track of which thing you are talking about.
Second this. I love his tutorials, but this one was very difficult to understand with everything being called "todo".
1:13:42 for unique id's you could use, this.state.todos.length+1
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.
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.
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....