Tjejer Kodar Intro to JavaScript and React

Transcript

1. Tjejer Kodar October 2015
2. 01 02 03 04 In the beginning JavaScript React Planning our app
3. Scientists made the web But we users made it what it is today.
4. 1991 1993 1995 1996 1998 2000 2005 2008 HTML 1.0 First Browser “Mosaic” Browser JavaScript 1.0 Internet Explorer CSS 1.0 HTML 4.0 JavaScript 2.0 AJAX JS Frameworks HTML 5 Node.js
5. So what is JavaScript?
6. Browser Server
7. The DOM
8. CSS
9. JavaScript
10. Frameworks jQuery MooTools Sprout Sprout React Prototype Cappuccino JavaScriptMVC BackboneJS Spine Angular ExtJS Knockout PureMVC Dojo Polymer Brick NuclearJS
11. 01 02 03 04 In the beginning JavaScript React Planning our app
12. repl.it/languages/javascript We’ll use this to experiment with JavaScript
13. var fruit = "Pear"; Variables
14. /* The fruit variable holds the name of the current fruit. */ var fruit = "ananas"; // But it's really a pineapple Comments
15. Numbers var numberOfFruits = 2; var cupsOfOrangeJuicePerOrange = 0.3;
16. Strings var fruit = "Apple"; fruit.length;
17. Booleans var isRipe = true; var isSour = false;
18. var isSour = true; if (isSour) { // A sour fruit, possibly a lemon } else { // A non-sour fruit }
19. JS Exercise 1
20. Arrays var fruits = [ "Orange", "Banana", "Apple" ];
21. Objects var fruit = { name: "Lemon", isSour: true, numberOfSeeds: 3 };
22. Functions function squash(fruit) { return fruit + " juice"; } var juice = squash("Orange");
23. this var fruit = { name: "Plum", squash: function() { return this.name + " juice"; } }; fruit.squash();
24. JS Exercise 2
25. 01 02 03 04 In the beginning JavaScript React Planning our app
26. What is React?
27. UI Library var product = { name: "Lemon", image: "lemon.jpg" }; Lemon ADD TO BASKET
28. A React Component var Product = React.createClass({ render: function() { return ( <div> <img src={this.props.image}/> <strong>{this.props.name}</strong> <a href="">ADD TO BASKET</a> </div> ); } });
29. JSX <h1>Orange</h1>
30. JSX var fruit = "Orange"; <h1>{fruit}</h1>
31. JSX function squash(fruit) { return fruit + " juice"; } <h1>{squash("Orange")}</h1>
32. The Web Inspector Duh duh duh duh duh inspector gadget.
33. Components
34. 01 02 03 04 In the beginning JavaScript React Planning our app
35. THE PLAN: Build a Todo app where you can: • See your completed and uncompleted todo items. • Create a new item. • Mark an item as complete. • Remove an item. • Save items in the browser’s localStorage.
36. Modelling our app
37. izettle.com/tjejer-kodar