React JS Belgium Touch Base - React, Flux, React Native

@philos_io

Introduction to ReactJS

Agenda

ReactJSFlux

Architecture

React Native

Learn Once, Write Everywhere!

What is React?

UI Compone

nts

Virtual DOM

Immutable data

Can be used with any other frameworks (Ember, Angular…)

Abstract away the DOM and does all operations on the VD before updating the real DOM

Data flow in one direction, which brings a simple model to reason about.

More about React

• JavaScript Library for building UI, only UI

• Focus on rendering or V in MVC

• Implements unidirectional data flow

• Can power native apps with React Native

• Built and maintains by Facebook

ReactJS

ReactJS: Building a book store

JSX Syntax

var Book = React.createClass({ render: function() { return <div>Title: {this.props.title}</div>; }});

JSX Compiler

React.render(<Book title="React" />, document.body);

ReactJS: Building a book store

JS Syntax

var Book = React.createClass({displayName: "Book", render: function() { return React.createElement("div", null, "Title: ", this.props.title); }});

React.render(React.createElement(Book, {title: "React"}), document.body);

ReactJS: Building a book storeimport React from 'react';import Header from './components/header';import Main from './components/main';import Footer from './components/Footer';

var BookStore = React.createClass({render: function(){

return (<div>

<Header/><Main/><Footer/>

</div>);

}});

React.render(<BookStore/>, document.getElementById('wrapper'));

ES6 import module

Create the component

Flux Architecture

Flux Architecture

Actions Dispatchers Stores React

Flux Architecture

React Native in a nutshell

Touch Handling

Native Compone

nts

Styles &

Layout

ES6 support out of

the box

Extensibility

Polyfill

React vs. React Native

var Book = React.createClass({ render: function() {   return <div>

<span>Title: {this.props.title}</span></div>;

 }});

var Book = React.createClass({ render: function() {   return <View>

<Text>Title: {this.props.title}</Text>

</View>; }});

React React Native

Render natively inside their environment

React Native’s workflow ?

Workflow

$ npm install react-native-cli -g

$ react-native init whatsapp

$ cd whatsapp

$ Open whatsapp on Xcode

$ Build and run whatsapp

Useful command

$ CMD+D or Crtl+D to open contextual window

$ CMD+R to refresh

To Be Continued…