React Basics – Beau teaches JavaScript



React.js is designed to make the process of building modular, reusable user interface components simple and intuitive. This video introduces React components, the VirtualDOM, JSX, state, and props. See how these things all tie together in a simple shopping list web app.

Code:
🔗 http://codepen.io/beaucarnes/pen/RpKWwv?editors=0010
More info:
🔗 https://facebook.github.io/react/tutorial/tutorial.html

Beau Carnes on Twitter: https://twitter.com/carnesbeau

⭐JavaScript Playlists⭐
▶JavaScript Basics: https://www.youtube.com/playlist?list=PLWKjhJtqVAbk2qRZtWSzCIN38JC_NdhW5
▶ES6: https://www.youtube.com/playlist?list=PLWKjhJtqVAbljtmmeS0c-CEl2LdE-eR_F
▶Design Patterns: https://www.youtube.com/playlist?list=PLWKjhJtqVAbnZtkAI3BqcYxKnfWn_C704
▶Data Structures and Algorithms: https://www.youtube.com/playlist?list=PLWKjhJtqVAbkso-IbgiiP48n-O-JQA9PJ
▶Clean Code: https://www.youtube.com/playlist?list=PLWKjhJtqVAbkK24EaPurzMq0-kw5U9pJh


We’re busy people who learn to code, then practice by building projects for nonprofits. Learn Full-stack JavaScript, build a portfolio, and get great references with our open source community.

Join our community at https://freecodecamp.com
Follow us on twitter: https://twitter.com/freecodecamp
Like us on Facebook: https://www.facebook.com/freecodecamp
Follow Quincy on Quora: https://www.quora.com/Quincy-Larson

source

This Post Has 24 Comments

  1. digigoliath

    Thank you for an awesome introduction to React! And you know what? It was enjoyable!!
    ….. with much appreciation from a newbie.

  2. PopcornTV

    nice description, makes the early stages of html css seem closer than farther away gg

  3. Randy Taylor

    can you upload the source code so i can just look at it?

  4. Christian Rodier

    Thanks that is very helpful. I was wondering if FCC was thinking about including a course of React JS. I think it would be very helpful

  5. Michael

    Hello Beau,
    thanks for that great video, you're an awesome teacher!
    If you click the button when the input is empty, it adds an empty listitem.
    Therefore I added an if-statement to addItem() function:

    addItem() {
    let item = document.getElementById("listItem").value;
    if(item != ""){
    document.getElementById("listItem").value = "";
    let newList = this.state.list.slice();
    newList.push(item);
    this.setState({list: newList});
    }
    }

    Thank you for sharing your knowledge!

  6. rennishj

    Covered a lot in 16 minutes for free !!!! Thank You

  7. Mateen Kadwaikar

    Awesome video, thank you.Can you please let me know have you created more react videos?

  8. Compare to Angular.js or Angular it seems React requires you to type much more code

  9. Excellent explanation. Very good teacher. It was a quick refresher for me. But this is very good intro for anyone new to React/JSX. 11/10 would recommend.

  10. Gabriela Vilte

    Thanks a lot, Beau! It is difficult to me learning something new without an explanation, at the beginning, and more when I think I don't have the theory first. Now I'll start learning this library with more confidence. Thank you. Best regards.

  11. David Sabalete

    Amazing tutorial!
    Just a question: where does the method this.setState() came from? I have seen it inside the "addItem()" and "onClick()" functions, but i don't understand why that works…

  12. Christian Hvass

    How come it is necessary to slice the original list, before assigning it to newList?
    What would newList = this.state.list accomplish?

  13. trapped cat

    my goodness, this js series is awesome. please also cover vuejs and creating plain js dom plugins

  14. Collins Orlando

    This is golden. Thanks for the effort, Beau, as well FCC as a whole.

Leave a Reply