tech talk on reactjs

REACT A Javascript library for building User Interfaces

What is React? React is a JavaScript framework created by Facebook. Faciliated for interactive, stateful & reusable UI components.

It renders client and server side and interacts inter-operably.

It uses virtualDOM.

It is component based.

Why React? Useful for large-scale user interfaces (facebook,

instagram) and where we need reusable component.

It makes writing Javascript easier

It is SEO friendly

It has developer tool – https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

It is easily scalable

UI code is readable and maintainable

Ask before you pick React?

Lot of DOM interaction?

High Browser performance?

Data going to change overtime at a high rate?

Is one user interaction going to affect many other areas/components in the UI?

Is my application could grow big in the future?

A development which is preety easy to start with?

IF Yes, Then React !! ReactJS is not an MVC framework, but it is seen as the 'V'

in MVC.

DOM operations are so fast.

If data changes over time at high rates

If one action needs to affect several other areas.

ReactJS is not an opinionated library, it lets you use JavaScript and other JavaScript libraries the way you want.

Easy Learning.

What problem does React Solves?

React is not designed to solve problems specific to web applications. Rather, it is designed to solve problems for all applications.

Facebook used it to build a native iOS mobile app,

Flipboard used it to power canvas graphics

Netflix uses it to create TV interfaces.

It’s used on both the server-side and the client-side.

Features

It has a higher rendering performance.

It has a data binding.

It has state management.

Unidirectional dataflow.

You can render React on the server.

Uses JSX preprocessor.

LifeCycle Methods

componentWillMount – Invoked once, on both client & server before rendering occurs.

componentDidMount – Invoked once, only on the client, after rendering occurs.

shouldComponentUpdate – Return value determines whether component should update.

componentWillUnmount – Invoked prior to unmounting component.

Combine Angularjs with Reactjs 1. Angularjs is good and it can be fast creating structural instructions

like UI Routing, reusable directives, two way binding etc. 2. Easy to render reactjs inside Angular.

Here are requirement when we need to combine both: 1. Render some advanced components server side with Node.js. 2. Some advanced front-end components were unstable with AngularJS.

Especially components that are repeated a lot of time on a page.. 3. ngOptions is great but ngRepeat creates a lot of scopes. Replacing

custom grid and list type components with ReactJS reduces TONS of watchers, scopes, and DOM manipulations.

Virtual DOM React creates an in-memory data structure cache,

computes the resulting differences, and then updates the browser's displayed DOM efficiently.

The reason why it does so well is because it manages a virtual DOM and not watching and updating an actual DOM

The virtual DOM in this case is the data and not the rendered content, therefore React.js is able to determine the pieces of data that have actually changed in great detail.

When you make changes on the data, the updated DOM will now be re-rendered and you can see the changes easily and on the spot.

Component React’s basic building blocks are called components. Using JSX

<script type="text/jsx">

/** @jsx React.DOM */

React.render(

<h1>Hello, world!</h1>, document.getElementById('myDiv')

); </script>

Without JSX

/** @jsx React.DOM */

React.render(

React.DOM.h1(null, 'Hello, world!'), document.getElementById('myDiv')

);

Lets Build App in 4 Steps

Step 1: Creat Badge Component var Badge = React.createClass({ render: function(){ return <button className="btn btn-primary" type="button"> {this.props.title} <span className="badge">{this.props.number}</span> </button> } });

Step 2: Create Thumbnail

var thumbnail = React.createClass({ render:function(){ return <div className="thumbnail"> <img src={this.props.iurl} /> <div className="caption"> <h3>{this.props.htxt}</h3> <p>{this.props.description}</p> <p> <Badge title={this.props.title} number={this.props.number}/> </p> </div> </div> } });

Step 3: Fetch Datasource this.options = { title:'See Tutorials', number:10, htxt:'learn React', description: 'ReactJS is good framework. ReactJS is good framework. ReactJS is good framework.', iurl: 'http://formatjs.io/img/react.svg' };

Step 4: Rendering Component on Target element //Ask React to render this class var element = React.createElement(thumbnail,options); /* when we ask react this class, we will tell it where to put this element */ ReactDOM.render(element, document.querySelector('.target'));

Reference Links: 1. Server Side Rendering: http://unwttng.com/react-server-

side-rendering/ 2. Stateless vs Statefull:

http://stackoverflow.com/questions/34512696/reactjs-difference-between-stateful-and-stateless

3. Material UI : http://www.material- ui.com/#/components/app-bar

4. Practical Examples: http://tutorialzine.com/2014/07/5-practical-examples-for-learning-facebooks-react-framework/

Reference Links (cont.): 4. Some React.js UI widget libraries:

Belle Elemental UI grommet.io Khan Academy's component library Material-UI React Bootstrap React Foundation Apps React Toolbox Rebass Topcoat.io components for React

5. Extension: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Thank You