React JS Crash Course (2019)

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

Code For Tutorial:

💖 Become a Patron: Show support & get perks!

Related YouTube Videos:

Website & Other Udemy Courses

Follow Traversy Media:

[abbashussain]

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

[JuanAndOnly]

import GreatCrashCourse from './TraversyMedia'
export default HitLikeButton

[neenaw]

If you have a problem with uuid do this:

import { v4 as uuidv4 } from 'uuid';
id: uuidv4()

[marklholloway]

Me: Clicks this video
Ads: You’re wasting your time watching online coding courses
Me: Skips Ad 😀

[faboneproject]

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

[marredcheese]

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;
...
<input type="checkbox" checked={completed} ...

[johnniestang]

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"
}
}```

[jaggyjut]

please note that uuid has changed their declare, this one works for me:
import { v4 as uuidv4 } from 'uuid';
id: uuidv4()

[RogerNorling]

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.

[AbedNaseri]

Nice job man, very good tutorial! Somehow it is really easy to understand.

[skmd]

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

[Quuton]

pro tip: 1.25x speed is barely any difference and makes you not have to spend so much time :D

[pauliewalnuts]

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.

[artlos]

There's no way I learn a new language without watching your videos first!

[lucaciandrei]

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.

[caionomar]

Dude, that was intense! Great tutorial. Walked in not knowing anything about React, left like I have learned a shit load. Thank you!

[bonchan]

Actual tutorial : 1 hour and 38 minutes,
me : 5 hours


but still JARGON to me, need to watch this again tho ahahaha

[farhanqureshi]

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

[devongrey]

Can you make an updated crash course using the functional style?

[freaknature]

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!