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

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

• 3.
  @philos_io Introduction to ReactJS
• 4.
  Agenda ReactJS Flux Architecture React Native Learn Once,WriteEverywhere!
• 6.
  What is React? UI Components VirtualDOM 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.
• 7.
  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
• 8.
  ReactJS: Building abook 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);
• 9.
  ReactJS: Building abook 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);
• 10.
  ReactJS: Building abook store import 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
• 11.
  Flux Architecture Flux Architecture ActionsDispatchers Stores React
• 12.
  Flux Architecture
• 13.
  React Native ina nutshell Touch Handling Native Components Styles & Layout ES6 support out of the box Extensibility Polyfill
• 14.
  React vs. ReactNative 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
• 15.
  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
• 16.
  To Be Continued…