• Thursday , 28 May 2020

React JS Crash Course

Code Canyon



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
https://www.udemy.com/modern-react-front-to-back/?couponCode=TRAVERSYMEDIA

Code For Tutorial:
https://github.com/bradtraversy/react_crash_todo

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Related YouTube Videos:
Redux Crash Course – https://www.youtube.com/watch?v=93p3LxR9xfM
React Context API Project – https://www.youtube.com/watch?v=NDEt0KdDbhk
React Hooks – https://www.youtube.com/watch?v=mxK8b99iJTg&t=615s
Learn The Mern Stack – https://www.youtube.com/watch?v=PBTYxXADG_k&t=327s

Website & Other Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
https://www.facebook.com/traversymedia

https://www.instagram.com/traversymedia

Original source

3d Ocean

Related Posts

49 Comments

  1. Jahongir Bozarov
    December 29, 2019 at 08:30

    This guy explains much better than others on YouTube, Thanks Brad!

  2. Max Albrecht
    December 29, 2019 at 08:30

    Thank you, this came in very handy.

  3. Roman Klymovych
    December 29, 2019 at 08:30

    awesome!

  4. aritra dattagupta
    December 29, 2019 at 08:30

    1:13:42 for unique id's you could use, this.state.todos.length+1

  5. UnKnown Soul
    December 29, 2019 at 08:30

    if you guys needed auto id you could do this

    getId = () => {

    if(this.state.todos.length <= 0){

    return 1;

    }

    return Math.max(…(this.state.todos.map(x => x.id)) )+1

    }

    addTodo = (title) => {

    const newTodo = {

    id:this.getId(),

    title,

    completed: false

    }

    this.setState(

    {

    todos: […this.state.todos, newTodo]

    }

    )

    }

  6. suhas sobale
    December 29, 2019 at 08:30

    one of the best instructor and love the way he teach.

  7. Kamal Aminu
    December 29, 2019 at 08:30

    Great thanks a lot, why do i have a feeling like Vue make more sense? I also learn Vue on this Chanel. I guess React will never be easier than this. Thank you very much.

  8. mosesintech
    December 29, 2019 at 08:30

    Hey Brad, just wanted to thank you for this video. I've learned a lot from your channel, and I'm grateful for that!

  9. coyotemoonTV
    December 29, 2019 at 08:30

    @Traversy Media – This tutorial was great! Any advice to connecting to a Spring Back end using MySQL? I've been trying to tie my front end and back end together for a while but it's been unfruitful.

  10. Muhammad Saeed
    December 29, 2019 at 08:30

    What is the difference between Jquerry and React?

  11. Blake Trueløve
    December 29, 2019 at 08:30

    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.

  12. Md Sabbir Ahmed
    December 29, 2019 at 08:30

    very helpful, thanks 🙂

  13. David
    December 29, 2019 at 08:30

    I love how you teach and the Crash Course(s) idea.

  14. Sudhanshu Kumar
    December 29, 2019 at 08:30

    which extension did he use that autocompletes input elements like at 1:01:15

  15. Bilal Asif
    December 29, 2019 at 08:30

    Amazing Tutorial, Learnt everything I needed to know about react thank you.

  16. azerLyy
    December 29, 2019 at 08:30

    keep up the good work brad

  17. Umpire developer
    December 29, 2019 at 08:30

    great tutorial. Thanks

  18. Sakib Arman
    December 29, 2019 at 08:30

    Every time I watch Brad's tutorial and wonder who are these people who put dislikes and if these people consider themselves as Homo Superior or something else.

    Btw I have learned a lot from Brad and for this I salute to him. #respect

  19. Raju Reddy
    December 29, 2019 at 08:30

    can we combine both class and functional components Hooks….is it ok?

  20. Mahesh Nahak
    December 29, 2019 at 08:30

    HEY GUYS
    So everything is working for me but there's this line that appears in my console:

    [HMR] Waiting for update signal from WDS…

    What is this and how do i resolve this?

  21. Eyal Levi
    December 29, 2019 at 08:30

    excellent!!!

  22. 李奎慶
    December 29, 2019 at 08:30

    Awesome lesson! Thanks.

  23. Tom de Visser
    December 29, 2019 at 08:30

    Why are we using the filter method instead of actually deleting the item from the array? Isn't this just not showing the item, instead of deleting it?

  24. Guru Zonr
    December 29, 2019 at 08:30

    What about REDUX for TodoAPP?

  25. Fullstack Experience
    December 29, 2019 at 08:30

    just took the youtube premium trial to watch this video without ads lol

  26. Ryan Wood
    December 29, 2019 at 08:30

    Hey Brad! The newer versions of create-react-app create App.js as a functional component.

  27. Deadlius
    December 29, 2019 at 08:30

    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!

  28. Joshua Hernandez
    December 29, 2019 at 08:30

    Brad is goated

  29. Lucas B
    December 29, 2019 at 08:30

    Thank you for the amazing video Brad!!

  30. Rachael Concessio
    December 29, 2019 at 08:30

    I keep getting an error when it returns the mapped value of the todo list?
    "Expected an assignment or function call and instead saw an expression no-unused-expressions"
    is what I get, even though my code is exactly the same as his?

  31. Daniil Koroljov
    December 29, 2019 at 08:30

    Enjoy 😀

    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

    🙂

  32. diamondheartx1
    December 29, 2019 at 08:30

    I highly recommend reading the react website, https://reactjs.org/docs/hello-world.html starting here and reading the “Main Concepts” before this 😊 it helped me feel more comfortable

  33. Ireland_boi
    December 29, 2019 at 08:30

    Timestamp for tomorrow 32:37
    Ps. U make coding so easy to learn

  34. Sandra W
    December 29, 2019 at 08:30

    Srsly, your videos are pure gold!! Thank you for always saving my school projects. If i need to look up something i always end up here, it's always the best content. You are a great teacher. Thank you!

  35. Devoura
    December 29, 2019 at 08:30

    Got atleast 90% more clarity on everything. Awesome course, absolutely no flaws.

  36. tech kapil
    December 29, 2019 at 08:30

    you are a great person brad..

  37. Sam Morpeth
    December 29, 2019 at 08:30

    When I create a project using npx it gives me the components as functions like this:
    `function App() {

    return (

    <div className="App">

    <header className="App-header">

    <img src={logo} className="App-logo" alt="logo" />

    <p>

    Edit <code>src/App.js</code> and save to reload.

    </p>

    <a

    className="App-link"

    href="https://reactjs.org"

    target="_blank"

    rel="noopener noreferrer"

    >

    Learn React

    </a>

    </header>

    </div>

    );

    }`
    Rather than what is shown in Brad's video with `class App extends Component` etc. When I try to reformat it in the same way it gives me an error, as I think the `Component` class doesn't seem to exist in my project. Any ideas on what I can do? Or what's going wrong?

  38. Topman Garbuja
    December 29, 2019 at 08:30

    Thank you BRAD. It helped me to get the basic knowledge of React JS.
    You provided Todo app with Routing and use of API.

  39. mac gruber
    December 29, 2019 at 08:30

    best video on youtube, didn't feel it was 1.5 h

  40. Juan Yang
    December 29, 2019 at 08:30

    Does anybody know how to check a property of the HTML element like 25:42? I have no React tab on my Chrome dev tool.

  41. Cavan Biggs
    December 29, 2019 at 08:30

    Great tutorial!!!

  42. straightOuttaFlex
    December 29, 2019 at 08:30

    526165

  43. Sigala Fosam
    December 29, 2019 at 08:30

    how come for the getStyle() function and the markComplete function, they do not both need parenthesis at the end of the function call @43:25

  44. pprog ramming
    December 29, 2019 at 08:30

    Wow such wealth of knowledge shared. Many thanks and blessings for sharing this.

  45. Andrew Doan
    December 29, 2019 at 08:30

    Brad! Great tutorial as always! I appreciate all the tutorials on your channel and also on Udemy!!

    On this tutorial I ran into a bug that I don't know how to fix. I googled it and also reading through stackoverflow but still not understanding it. The error I go was on Bind in render. I went back and forth and did exactly as you did (three times) but couldn't understand how it works. Please see the error code below

    "React Cannot read property 'bind' of undefined"

    render() {
    //destructuring for 'this.props.todo.id'
    const { id, title } = this.props.todo;
    return (
    <div style={this.getStyle()}>
    <p>
    <input
    type="checkbox"
    // onChange={this.props.markComplete.bind(this, id)} <==== This line threw the error.
    />{" "}
    {title}
    </p>
    </div>
    );
    }
    }

    Would you or anyone be so kind to explain to me? Thank you in advance.

  46. Riaz Bacchus
    December 29, 2019 at 08:30

    hey brad, thanks for the view. extremely helpful and informative.

  47. Aditya Raj Sapkota
    December 29, 2019 at 08:30

    Can anyone help me on how do I update the existing records with "EDIT" button??

  48. Tebby Thomas
    December 29, 2019 at 08:30

    Excellent!

  49. Nhật Khoa Phan
    December 29, 2019 at 08:30

    Hi Brad, first of all, thankyou for all your course. I'm a beginer on React, but i receive task from my host company (i'm an intern). They tell me to show some data with chart for their website. And i choose Chartjs with React to do it. I'm dealing with dynamic data and update my chart in real time. I use socket.io and receive the data, i can change the state of my chart component by changing its props (i use getDerivedStateFromProps and have checked it works in side Chrome dev tool for React). But it seems the component doesn't re-render. I wonder why?
    Here's my code, i've checked in the dev tool that the "threshold" state is chaging correspond to the "threshold" props that passed down from the App component. Then the options for my chart (which is also a state) is update too, but no re-rendering happen.
    static getDerivedStateFromProps = (nextProps, prevState) => {

    if(nextProps.moods !== prevState.moods) {

    return {

    moods: nextProps.moods,

    chartData: {

    labels: ['CALM', 'ANGER', 'JOY', 'SORROW', 'ENGERGY'],

    datasets: [

    {

    label: 'Emotions',

    data: nextProps.moods,

    backgroundColor:['#37CCF2', '#37CCF2', '#FB6568', '#37CCF2' ,'#37CCF2']

    }

    ]

    },

    }

    }

    else if(nextProps.threshold !== prevState.threshold) {

    let tempOptions = chartOptions;

    tempOptions.annotation.annotations[0].value = nextProps.threshold;

    prevState.threshold = nextProps.threshold;

    return {

    chartOptions: tempOptions,

    }

    }

    return null;

    }

Leave A Comment

You must be logged in to post a comment.