1. Karina Martinez Jessica Palacios Bryan Bravo Miguel Cayetano
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
Karina Martinez
Jessica Palacios
Bryan Bravo
Miguel Cayetano
Edwin Ruiz

2. What is React.js
React is a JavaScript library created by a collaboration of Facebook and Instagram
It’s I/O, not MVC
The “V” in “MVC”
Big Companies use React
Facebook, Instagram, Yahoo!, Airbnb, Sony, Netflix
KARINA
React is a javascript library created by Facebook and Instagram.
Its aim is to allow developers to create fast user interfaces easily
First thing to understand about React is that it is input and output driven, not a client-side Model-View-Controller framework
It is a javascript library for building a user interface and is often described as the V in MVC
MVC: software design pattern for implementing user interfaces. It divides a given software application into three interconnected parts: model-view-controller

3. What does React.js do? Renders your UI Responds to user interactions
Reduces complexity
Tackles performance issues for you, behind the scenes
KARINA
unlike browser DOM elements. React elements are plain objects, and are cheaper to create.
React DOM takes care of updating the DOM to match the React elements.
When responding to user interactions React has us covered with events bound to function callbacks
Since react components render themselves, we can just trigger a click event and check the HTML for changes.
By unifying your markup with its corresponding view logic, React can make views easier to extend and maintain
There is no manual string concatenation and therefore less surface area for errors
Internally, React uses several clever techniques to minimize the number of costly DOM operations requires to update the UI.
It leads to a fast user interface without doing much work to specifically optimize performance
DOM - The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats a document (an HTML, XHTML, or XML) as a tree structure wherein each node is an object representing a part of the document.
Markup - Markup languages are designed for the processing, definition and presentation of text. The language specifies code for formatting, both the layout and style, within a text file.

4. Why was React.js made? React isn’t an MVC framework
React does not use templates
React updates are dead simple
HTML is just the beginning
KARINA
As mentioned earlier, react is a library for building user interfaces that can be broken down.
It encourages the creation of reusable UI components which present data that changes overtime.
React does not use templates, instead it approaches building user interfaces by breaking them down into components.
It uses a full featured programming language to render views, which can be an advantage over templates
React really shines when your data changes overtime.
In order to perform updates React differentiates the previous call to render with the new one, and generates a minimal set of changes to be applied to the DOM
React has its own lightweight representation of the document, we can do some cool things with it
For example Facebook has dynamic charts that render to <canvas> instead of HTML
Template: Templates are a feature of the C++ programming language that allows functions and classes to operate with generic types. This allows a function or class to work on many different data types without being rewritten for each one.
-reusable UI components
-React really shines when your data changes over time.

5. How is React.js used? Root DOM node <div id="root"></div>
Render React element into root DOM node
const element = <h1>Hello, world</h1>; ReactDOM.render( element, document.getElementById('root') );
Update the Rendered Element
function tick() {
const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2>
</div> ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000);
KARINA
React apps usually have a single root DOM node
everything inside it will be managed by React DOM
To render a React element into a root DOM node, pass both to ReactDOM.render()
React elements are immutable, meaning you cannot change its children or attributes.
Only way to update the UI is to create a new element, and pass it to ReactDOM.render()
Example calls ReactDOM.render() every second from a setInterval() callback
React only updates what is necessary
It compares the elements and its children to the previous one
Only applies DOM updates necessary to bring the DOM to desired state
In example, only text node whose contents have changed get updated by React DOM

6. KARINA

7. How the technology works
Elements, Component, and Properties
Component Life Cycle
JSX
States
Virtual DOM
One Way Data Flow

8. Components, Elements, Properties
Reusable
Properties
Passing data
Element
Immutable

9. Component Life Cycle

10. JSX Root DOM node <div id="root"></div>
Render React element into root DOM node
const element = <h1>Hello, world</h1>; ReactDOM.render( element, document.getElementById('root') );
JavaScript XML
Syntax extension to JavaScript
Optional
Elegant

11. States -Component can be a class
- A component’s state is similar to FSA (finite state automata)
-Similar to properties but a state’s scope is the class(component)
-Useful for controlling internal data.
-Remeber that properties are well properties inside of a component.
-Component can be classes
State is similar to props, but it is private and fully controlled by the component.
We mentioned before that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes.
State allows React components to change their output over time in response to user actions, network responses, and anything else

12. One Way Data Flow
-React is a view library
- HTML does not change a component
-Difference between one way and two way.
-Callbacks
-Simplicity
-As stated earlier React is just the V in the mvc architecture.
-One way data binding is React doesn't have a mechanism to allow the HTML to change the component. The HTML can only raise events that the component responds to. The typical example is by using onChange.
-Where as two way databinding is Changes from the code and changes from the HTML are two-way binding
-React uses one-way data binding to make things simpler. Every time you type in an input field in a React UI, for example, it doesn’t directly change the state of that component. Instead, it updates the data model, which causes the UI to be updated and the text you typed into the field appears in the field.
-Simplicity is due to since data is only being changed in one direction it is easier to determine if a bug arises in the way that if its being changed in either direction (both ways can mess it up)
-Two way data binding is possible but additional logic is needed, one of the ways is callbacks.

13. React
render() {
return <input value={this.state.value}onChange={this.handleChange} /> }
handleChange(e) {
this.setState({value: e.target.value});
Angular
<tr>
<td><input class='form-control' ng-model='contact.name'></td>
<td><input class='form-control' ng-model='contact. '></td>
<td><input class='form-control' ng-model='contact.number'></td>
<td><button class='btn btn-primary' ng-click='addContact()'>Add Contact</button></td>
The value of the <input /> is controlled entirely by the render function. The only way to update this value is from the component itself, which is done by attaching an onChange event to the <input /> which sets this.state.value to with the React component method setState. The <input /> does not have direct access to the components state, and so it cannot make changes. This is one-way binding.
-This is part of the contact list app, seeing as how we can bind the html to a variable in the model, thats because angular supports that out of the box
-Where as react doesnt have direct input from html, the render function handles it.

14.
See here there are two “watchers” what that means is that a value can be changed from either the html or the app’s logic.
Where as here in 1 way the data is moving in one direction. See the event handler takes care of it and has to rerender it.

15. Virtual Dom
-HTML renders DOM.
-This is all your elements (<h1>,<div>,.....)
-React takes entire DOM and writes it in Javascript.
-When action is taken Virtual Dom is altered.
-Reasons for this implementation
-As a little basis so you have an understanding your browser renders the HTML DOM this is all your actual elements.
-React makes its own version of this with its propietary elements.
-Javascript is much faster than HTML(rendering the entire dom in comparsion to doing a couple JS functions because as stated earlier, components are just functions, CSS and layouts calculations ).
- Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.The difference between the previous Virtual DOM representation and the new one will be calculated. The real DOM will be updated with what has actually changed.
-Don’t have to constantly pulling from server (request in refresh).

16. Modifying the DOM Comparison: Traditional JS code vs. React
React Virtual DOM
Typical JS code
React App
On the left shows a typical js code which reconstructs the entire DOM every time any change is made. More costly.
On the right the react app changes the React virtual DOM and the virtual DOM only changes the DOM that actually got changed.
-Another diagram so you guys can get another understanding.

17. https://facebook.github.io/react/blog/2013/06/05/why -react.html
VIRTUAL DOM
-React keeps two copies of a virtual DOM (the original and the updated versions)
-These two virtual DOM trees are passed into a React function that find the differences
- this function then returns a stream of DOM operations
-which generally involve setting a property on an element
-react.html

18. Demo

19. Mounting States
getInitialState - gets called once and here is where you will set the defaults for a state.
componentWillMount - gets called before the component is rendered (mounted) and it’s the last chance to effect the state before rendering it.
render (required) - brings your object to life.
componentDidMount - called after the render.

20. MountingState componentDidMount() { }
Checks immediately after a component has been rendered
Much better than having stuff on render()
This is more for optimization, not needed
Instead of having your fnc all inside the render method, you can have it inside ^^^
If your component did not render then theres no point as you cant modify/do anything to it
This will check if the component was rendered to the DOM

21. Unmounting State
componentWillUnmount - Similar to willMount, this will be called right before a component will be unmounted/destroyed
Mainly used when you no longer are using the component you are going to unmount
Add necessary code here that may otherwise affect components in the program
When you no longer need the