introduction to react js
TRANSCRIPT
![Page 1: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/1.jpg)
Introduction to ReactJS AESHAN WIJETUNGE
![Page 2: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/2.jpg)
Why use React.js? Simple Declarative Build Composable Components
Credits: https://facebook.github.io/react/docs/why-react.htmlhttp://kognitio.com/why-is-spark-on-the-rise-does-it-meet-business-needs/lego/
![Page 3: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/3.jpg)
Popularity Popularity of React has been pretty high since 2015 Downloads : ~ 933,860 in the last month
Credits: https://twitter.com/mjasay/status/618185536381935616
![Page 4: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/4.jpg)
Current state of web development
HTML Views implemented in a dynamic templating language e.g: dustJS, JSP…
Validation & other functionality in MVC UI frameworks like BackboneJS
This makes for very fragmented development…
BackBoneJS View 1 Templates
BackBoneJS View 2
/public/js /public/templates
![Page 5: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/5.jpg)
View Templating: many options
![Page 6: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/6.jpg)
JSX: markup in Javascript
![Page 7: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/7.jpg)
Component 1Component 2
Componentization Ideal overview of a React web app
JSX
logic
state
Logic
JSX
include
![Page 8: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/8.jpg)
A Basic Example : Objectives
A simple component that takes a user input, validates it and shows an error message upon an error.
Render a React component Make it dynamic : so its reusable Make it interactive : add functionality
![Page 9: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/9.jpg)
The end goal
![Page 10: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/10.jpg)
Create the view JSX is the most common means of writing Views
for React.
![Page 11: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/11.jpg)
Dynamic Views Seldom can components be static and
hardcoded. We’ll need to pass parameters into ours to make it more re-useable. These are called props.
![Page 12: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/12.jpg)
Under the hood: Virtual DOM
Credit http://madhukaudantha.blogspot.sg/2015/04/reactjs-and-virtual-dom.html
![Page 13: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/13.jpg)
Event handlingEvent handler
Attach handler
![Page 14: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/14.jpg)
Traversing the DOM Tree
However we also need to access the DOM of the elements within component
To do this we need to use React refs
Credits: http://adam.merrifield.ca/presentations/dom_demystified/
![Page 15: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/15.jpg)
Refs – Access the DOM Refs are a React feature for accessing and thus
manipulating the HTML DOM. Ref scope is limited to the React component They essentially reference DOM elements
<input ref=“first_name” name=“first_name” value=“5”/>
this.refs.first_name
Value = 5
![Page 16: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/16.jpg)
Adding the DOM refs
Access the DOM element
via ref
Ref the DOM element
![Page 17: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/17.jpg)
State-fulness
Credits: http://odetocode.com/articles/460.aspx
![Page 18: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/18.jpg)
Adding state-management
Let’s add some new function methods
Initial state
Change state
Get the value
![Page 19: Introduction to react js](https://reader034.vdocuments.mx/reader034/viewer/2022050617/588485081a28ab6d1a8b4eab/html5/thumbnails/19.jpg)
Live Demo!