React JS Crash Course (2019)
HTML-код
- Опубликовано: 2 окт 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 RUclips 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 - ruclips.net/video/w7ejDZ8SWv8/видео.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
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
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 RUclips 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 !
Got here thanks to ChatGPT
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
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!!
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?
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 :)
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!
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.
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
Nice job man, very good tutorial! Somehow it is really easy to understand.
dadash barname nevis ham bodi :)
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
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
*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 :))
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?
Dude, that was intense! Great tutorial. Walked in not knowing anything about React, left like I have learned a shit load. 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
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?
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.
There's no way I learn a new language without watching your videos first!
Can you make an updated crash course using the functional style?
Is it bad to keep using class components even for a todo-list item instead of functional components?
I hate this react hook nonsense and want to keep using classes and pass data through props and state
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
);
}
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
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!
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 !
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()
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.
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!
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()
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.
"Oh I forgot the s."
Broswer
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!
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.
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 🙌
Man, React is hard:(
Hard is good
@@muhammadalmaskhan9265 That's What She Said
.
@@syazwanjamil6370 She is disappointed
haan bhai
keep repeating some exact fundamentals. don't give up!
1:25:45 you don't have to apologize for the length of the video, most react tutorials are between 5-10 hour videos with mostly useless information. Great video
Just one question can you make more react project tutorials without teaching anything new? (just the concepts in this video) Because I feel like I know it but not well enough to go and start making projects by myself and a react project walkthrough would be really helpful.
Thanks for the video
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!!!!
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 !
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
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
I would personally see this course sold for money, thank you for giving it to the community for free
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....
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 👍👍
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😋
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'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!
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!
Thank You SOOOOOO much.. I listened to every word and every detail
A big THANK YOU from your biggest fan in Syria
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?
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.
Attention! If you are on Windows 10 and you have spaces in your username, REACT install will fail. Rather than spending days (like I did) looking for a fix. , here it is :
Opened VS Code with Administrator rights.(fixed permission issue)
Instead of using "npx" I tried the following:
--> npm install -g create-react-app
--> create-react-app my-app
And that got executed successfully.
credits to malhar234 on GitHub github.com/facebook/create-react-app/issues/6512
You should update the video's title to React 2019 to get more views.
The App.js class looks different on mine:
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
Edit src/App.js and save to reload.
Learn React
);
}
export default App;
That's what he talks about function based rather than component based. You can just refactor it to what he has on the video and study up on function based later.
Here's the link on functional components: logrocket.com/blog/pure-functional-components/
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 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.
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 : )
You deserve more subscribers and more views.
Thankyou for producing such informative and enjoyable content.
Great tutorials as always. Django with React pleeeeaaase
Awesome. Plz make updated redux crash course
If you are getting function() instead of class in VS code, install 'react pure class' extension, and follow the instructions given in the extension description
Okay guys, so Facebook developers are insanely productive making this tutorial obsolete. When we use "create-react-app" we get the new functional components, so there is no this and you have to use var or const when defining arrow functions. The hardest part I found was updating the state but don't worry. Instead of this.setState you have to use hooks.
import React, { useState } from 'react';
function App() {
_state = {todo: ...}
const [state, setState] = useState(_state);
const toggleComplete = (id) => {
let todos = state.todos
setState(
{
...state,
todos: todos.map(todo => {
if (todo.id === id) {
todo.completed = !todo.completed;
}
return todo;
})
}
)
}
return (
);
}
I did ok with the snippets, rcc rcf rce, etc. But now I cant get them to worl=k.
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.
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!
"...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 :)
For those who are getting "function App()" instead of a "class App extends Component" in App.js, use "create-react-app app-name --install-scripts 1.1.5" to build the app INSTEAD OF just using "create-react-app app-name". This would still give you the latest version of React, but it would just initialise the project with the class based component so you can follow along with the tutorial.
Naaa. It still builds the functional component app
Please make a new react tutorial because the render() is no more :(
also when I create the state, I get the error msg "State is not defined"
i facing problem too
its there...u have to use classes for that, not the default functions
idk why but i find his voice particularly charming
insteaf of uuid, you can use Date.Now() to create an id
Can you please write how to use Date.now?
Hi Brad, I am trying to reproduce your tutorial and I am stuck in 24 minute with state, when I run with npm start it gives an error about unexpected token, what I am doing wrong? is it the version of react that has changed since your video, is it something else?
nice tutorial but I am stuck at 26.03. I get an error undefined cannot read property of todos , when I add todos property to the Todos class. Any help will be really appreciated
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 !
Thank you very much sir. I started studying react few weeks ago. This came at the time I needed it the most.
just one pointer for uuid -- for me i got an error so i fixed it by importing uuid as
import uuid from 'uuid/v4'
and then instead of this:
id = uuid.v4()
i did:
id = uuid()
yeah uuid package has changed, I had to check documentation to make it work, it is a bit different but still easy
If you are having a problem w import uuid,
you should change it to : import {v4 as uuid} from "uuid";
then set id: uuid()
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 just finished your MERN stack on udemy today, keep up with great content !
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;
I highly recommend reading the react website, reactjs.org/docs/hello-world.html starting here and reading the “Main Concepts” before this 😊 it helped me feel more comfortable
For anyone who wants to really understand the javascript goin on in React, please check out Mosh's video. ruclips.net/video/NCwa_xi0Uuc/видео.html
Render() {
Return (
{brad is god gift to all web developers across world}
)
}
the first curly brace is not closed o_o
@@sanjidnet ok😅😅😅
@@vikasni95 lol thanks for fixing it mate :P
now i can sleep
@@sanjidnet 😅🤣🤣😂
That curly braces is not needed to insert plaintext, it's used to insert JS code...(just saying)
@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".
Take out the trash
Meeting with Boss
Dinner with Wife
Can't you just combine those last two into one task? Maybe give it a className="Danger" ?
Can someone maybe explain to me why when i create the react project using the tool for some reason it creates it with functions and not classes, I looked at the part of creation and it just seems the same, checked online couldnt find anything tried the change log no great change.
would love some help tnx
It will be great if you upgrade the video with the latest version because when the app created I can see function but in your video, it is still showing class. which will be quite confusing for the freshers.
It's just a kind of suggestion from my side.
24 minutes in and I’m stuck I think for that reason. Getting “state is not defined” error maybe from putting a state in a function?? I dunno...
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!
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
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
I was able to auto complete HTML tags such as and in JS file after completing this process.
go to preferences > settings > Extensions > Emmet > Include Languages>
1) Add Item
2) Item: javascript
Value: javascriptreact
------- OR-----
in your settings.json
Add in >>
"emmet.includeLanguages": {
"javascript": "javascriptreact",
}
=)
Thank you
for anybody who runs in to the uuid "problem" you need to import {v4 as uuidv4 } from "uuid" and then use uuidv4() in the code instead. More info here: www.npmjs.com/package/uuid
Thanks!
1.25x speed is perfect!
exactly
2x is better
Appreciate you putting these tutorials together. These are too helpful ✊🏽
Coming from Angular , React seems so easy
Really?, its more difficult angular?
Hey Brad, i normally dont comment on videos. But i gotta say thank you for making this awesome tutorials! I bought your MERN udemy course, but decided to take a look at your crash courses and they are SPLENDID! I am currently changin careers from the medical field, and your videos inspire me to push through the grind. Thank you!
am i the only one who watches this for like hmmm 5th time and still dont know shet?