Introduction to ReactJS AESHAN WIJETUNGE

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/

Popularity Popularity of React has been pretty high since 2015 Downloads : ~ 933,860 in the last month

Credits: https://twitter.com/mjasay/status/618185536381935616

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

View Templating: many options

JSX: markup in Javascript

Component 1Component 2

Componentization Ideal overview of a React web app

JSX

logic

state

Logic

JSX

include

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

The end goal

Create the view JSX is the most common means of writing Views

for React.

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.

Under the hood: Virtual DOM

Credit http://madhukaudantha.blogspot.sg/2015/04/reactjs-and-virtual-dom.html

Event handlingEvent handler

Attach handler

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/

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

Adding the DOM refs

Access the DOM element

via ref

Ref the DOM element

State-fulness

Credits: http://odetocode.com/articles/460.aspx

Adding state-management

Let’s add some new function methods

Initial state

Change state

Get the value

Live Demo!