D4mations.com

React JS Crash Course



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

d4mer

, , , , , ,

49 responses to “React JS Crash Course”

  5. 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]

    }

    )

    }

  11. 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.

  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. 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

    🙂

  34. 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!

  37. 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?

  45. 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.

  49. 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 Reply