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
Thank you for an awesome introduction to React! And you know what? It was enjoyable!!
….. with much appreciation from a newbie.
Thank you Beau it's crystal clear !
Beau you are awesome!
Check out my blog guys
http://codeparadox.in
Great video as always Beau! Thanks for making this!
nice description, makes the early stages of html css seem closer than farther away gg
can you upload the source code so i can just look at it?
Sounds like Ross from Friends. Love it.
Good video. Join front end community in Telegram. Hot and useful resources and links: React, Angular, Vue, ect – https://t.me/front_end_first
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
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!
Covered a lot in 16 minutes for free !!!! Thank You
Awesome video, thank you.Can you please let me know have you created more react videos?
Compare to Angular.js or Angular it seems React requires you to type much more code
fantastic!
Awesome tutorial. Thank you very much.
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.
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.
Many thanks for the JavaScript series, Beau!
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…
How come it is necessary to slice the original list, before assigning it to newList?
What would newList = this.state.list accomplish?
my goodness, this js series is awesome. please also cover vuejs and creating plain js dom plugins
This is golden. Thanks for the effort, Beau, as well FCC as a whole.
A much needed video