![EXERCISE - PLAY WITH THE DOM
▸ Open up your JavaScript console in your browser, and
type document.getElementsByTagName(‘div')
▸ Almost any web site will have a div
▸ You might see a huge list!
▸ Go to Twitter, open up the console and type:
document.getElementsByTagName(‘div')
[1].style.backgroundColor = 'red';](https://image.slidesharecdn.com/introtoreactv2-170712050327/85/Intro-to-react_v2-13-320.jpg)
Intro to react_v2
- 1. INTRO TO REACT FEATHER KNEE - GDI
- 2. INTRO WHO AM I? ▸ Wrote first HTML page in 1994 ▸ Wrote first lines of JavaScript shortly after ▸ Software engineer, artist, climber of rocks and world traveler ▸ Have done the tour of JavaScript frameworks, favorite so far is React ▸ Most recently worked for Netflix, currently funemployed
- 3. WHY REACT? Not an MVC framework! A UI library
- 4. Q: WHAT IS AN MVC FRAMEWORK? ▸ Uses Models, Views, Controllers ▸ Model = data, View = template/interface, Controller = gives commands ▸ Ember, Angular, Backbone … all variants on MVC frameworks ▸ MVC - not a new concept! ▸ Originally came out of PARC in the 70’s
- 5. ADVANTAGES OF REACT ▸ Learn Once, Write Everywhere ▸ Composable, component-based architecture ▸ Fast! DOM-diffing … will discuss later
- 6. REACT ▸ Mostly just the View of MVC, but also could be Controller ▸ If you use Redux or some variant, that would be the Model ▸ View is written in JSX, which is an HTML like syntax ▸ Component-based architecture … so application is made up of small, composable elements.
- 7. BENEFITS OF SMALL PIECES OF CODE OVER BIG PILES OF CODE? ▸ Easier to read ▸ Easier to fix/update when it changes (code always changes!) ▸ Easier to write tests for ▸ The more abstract & high level, the more code can be re- used
- 8. DOM-DIFFING! FIRST, WAIT, WHAT IS THE DOM? ▸ The DOM, or Document Object Model, is what the browser creates when it loads a web page
- 9. THE DOM IS AN API - WAIT, WHAT IS AN API? ▸ An API is an Application Programming Interface ▸ Defined as “a set of clearly defined methods of communication between various software components” ▸ An API might be a source of information with built-in methods for getting information - e.g. Twitter API will give you Tweets ▸ It is something you can use without necessarily knowing how it is built, like a toaster oven!
- 10. THE DOM IS A TREE, WAIT, WHAT, A TREE?? ▸ A tree is a data structure, or a container for data ▸ It has a root, which is a node, and child nodes that also have child nodes … ▸ The lowest children nodes are called leaves ▸ The DOM is a special kind of tree called a binary tree
- 12. EXERCISE TIME! ▸ You can use JavaScript to select items in the DOM. ▸ Let’s select a few items using the element’s name! ▸ Notice we don’t have to know exactly what the DOM tree looks like, but we are using it anyway!
- 13. EXERCISE - PLAY WITH THE DOM ▸ Open up your JavaScript console in your browser, and type document.getElementsByTagName(‘div') ▸ Almost any web site will have a div ▸ You might see a huge list! ▸ Go to Twitter, open up the console and type: document.getElementsByTagName(‘div') [1].style.backgroundColor = 'red';
- 14. DOM MANIPULATION ▸ Each change to the DOM can trigger a layout change, or a node of the tree shifting and re-rendering ▸ These changes can be difficult to keep track of! ▸ This is why we talk a lot about state in a web application, the state of the DOM, or what’s being rendered, needs to reflect the current state of the data behind it
- 15. BANKING ONLINE! A MENTAL JOURNEY… ▸ You transfer money from one account to another digitally ▸ Say you pay a friend back for buying you dinner using an app on your phone ▸ What if you transfer money but it doesn’t show up in your friend’s account? ▸ The data might not get updated right away!
- 16. DOM MANIPULATION IN REACT ▸ React keeps changes to the DOM inside of a separate virtual DOM, so you don’t actually touch the DOM directly ▸ You instead change a virtual representation of the DOM ▸ Updates are controlled through state ▸ Data flows between React classes via props
- 17. THE VIRTUAL DOM IN REACT
- 18. WHAT DID WE LEARN HERE? ▸ What is the DOM? What about DOM manipulation? ▸ Does a React application let us control the browser’s DOM directly? ▸ How does a web page organize data internally? ▸ What are some other API’s we can think of? ▸ Questions so far?
- 19. JAVASCRIPT! ▸ Is it a compiled or interpreted language? ▸ Where does JavaScript get executed? ▸ Can we organize our JavaScript code without a framework? ▸ Where does the ES in ES5 or ES6 come from?
- 20. JAVASCRIPT ▸ An interpreted language, meaning it’s compiled at runtime ▸ Runs in the browser, so your browser controls what version of the language is running ▸ React applications run in Node, a runtime engine built on Chrome’s V8 engine, so it doesn’t run in the browser ▸ Node has a package manager called NPM that helps manage the libraries used to run an app
- 21. PROTOTYPAL INHERITANCE - A BRIEF OVERVIEW ▸ JavaScript code can be organized on it’s own via libraries or classes of code organized by functionality ▸ All JavaScript classes have a single parent: Object.prototype, so it’s a flatter hierarchy than languages like Java or C++ ▸ This is known as prototypal inheritance ▸ Instances of an object are mutable and so is the parent
- 22. CLASSICAL INHERITANCE VS. JAVASCRIPT
- 23. IN SUMMARY ▸ A fundamental component of learning React is understanding JavaScript ▸ JavaScript is also known as Ecmascript, which sounds like a skin condition so it’s usually just shortened to ES + Version# ▸ JavaScript code can be organized using classes or libraries, but it has prototypal inheritance, unlike some other languages that have classes
- 24. EXERCISE TIME! ▸ Let’s implement a basic tree in JavaScript! ▸ This is just to demonstrate that a plain JavaScript application can be broken out into logical parts. ▸ We will code this up together. If you miss something, don’t worry! The code is up here: www.github.com/featherart ▸ After we write our basic tree, we will add some elements to it and run it using Node: $ node tree.js
- 25. REACT ▸ Component-based, so each React class is a component ▸ It’s a UI library, so React components are designed to render something ▸ Every component must have a render() method ▸ A React application may have a lot of underlying logic that is happening behind the scenes ▸ Those parts that do things other than render don’t necessarily need to be part of the React layer
- 26. TEXT JSX ▸ Most React applications are written with JSX, which looks a lot like HTML. ▸ The rules are more strict: you must close everything you open, and you have to respect DOM hierarchy
- 27. TEXT TO RESUME ▸ React components are designed to render UI ▸ Unlike alternatives such as Ember or Angular, React doesn’t have a strong opinion about code that doesn’t render ▸ It's mostly the view of an MVC solution, with an option to build out models and controllers in your own fashion ▸ The ‘V’ part of a React app is usually written in JSX
- 28. EXERCISE TIME! ▸ Your first React app! ▸ Go to https://github.com/facebookincubator/create-react- app npm install -g create-react-app create-react-app hello-world cd hello-world/ npm start
- 29. BEYOND HOLLA WORLD: A CLICK HANDLER! ▸ Take your application that you’ve just built and turn it into a click counter ▸ It will update the number of clicks on a button in big numbers, for all the world to see ▸ Feel free to pair up, or we will work through it together.
- 30. HOMEWORK, YAY! ▸ Play with your first React app and try to understand all the different parts. ▸ Next time we meet we will add to it further and try to build a little game.