Intro to react_v2

INTRO TO REACT FEATHER KNEE - GDI

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

WHY REACT? Not an MVC framework! A UI library

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

ADVANTAGES OF REACT ▸ Learn Once, Write Everywhere ▸ Composable, component-based architecture ▸ Fast! DOM-difﬁng … will discuss later

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.

BENEFITS OF SMALL PIECES OF CODE OVER BIG PILES OF CODE? ▸ Easier to read ▸ Easier to ﬁx/update when it changes (code always changes!) ▸ Easier to write tests for ▸ The more abstract & high level, the more code can be re- used

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

THE DOM IS AN API - WAIT, WHAT IS AN API? ▸ An API is an Application Programming Interface ▸ Deﬁned as “a set of clearly deﬁned 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!

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

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!

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';

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 difﬁcult 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 reﬂect the current state of the data behind it

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!

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 ﬂows between React classes via props

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?

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?

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

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 ﬂatter hierarchy than languages like Java or C++ ▸ This is known as prototypal inheritance ▸ Instances of an object are mutable and so is the parent

CLASSICAL INHERITANCE VS. JAVASCRIPT

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

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

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

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

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

EXERCISE TIME! ▸ Your ﬁrst 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

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.

HOMEWORK, YAY! ▸ Play with your ﬁrst 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.

Intro to react_v2

More Related Content

What's hot

Similar to Intro to react_v2

Recently uploaded

Intro to react_v2