Skip to content

Latest commit

 

History

History
127 lines (99 loc) · 3.77 KB

README.md

File metadata and controls

127 lines (99 loc) · 3.77 KB
Raw

Setup (IOS)

  • Install Xcode
  • Install NVM curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
  • Install Node nvm install node && nvm alias default node
  • Install Watchman brew install watchman
  • Install flow brew install flow
  • Install the react-native cli npm install -g react-native-cli
  • Init a new project react-native init AwesomeProject

Benefits

Declaritive

Virtual DOM

  • Diff the DOM
  • Declaritive => Productive => Reliable

Benefits of React Native

  • Live Update
  • Relearn native apis to achieve the same goal
  • Imperative APIS are standard
  • The web is second class citizen in the mobile world
  • Web views suck
  • User Experience vs Developer Velocity
  • Not write once run anywhere
  • Learn once write anywhere

#Building an application ##Introduction to ReactJS

  • Just the UI
  • Virtual DOM
  • Dataflow

Building A simple Component

Hello World in React-Native

  • render

###React-Native Workflow

  • Hot Reloading
  • Chrome-Debugger
  • React Tools

Building A stateful Component

Adding random TODO's to our list

  • initialState
  • setState

Passing Props to Children

Abstracting our logic of our listen and button into seperate components building an input for a todo

  • propTypes

Thinking Reactive

Preferencing props over state, when to use state and when not to, our UI is a representation of our data and nothing more

Building a simple application

Who to follow on github in React-Native

API Requests and Real Data Fetch

Styling CSS in JavaScript with React-Native

Adding simple styles to our button list and title tags and making them layout in a nicer way

##Problems With CSS

  • Global Namespace
  • Dependencies
  • Dead Code Elimination
  • Minification
  • Sharing Constants
  • Non-Deterministic Resolution
  • Isolation
  • CSS In JS solves all fo these issues

Reference

Best Practice application architecture with Flux + Redux

Adding flux to our application and the benefits it provides

##Flux Flux Diagram

Action Creators

  • Has methods which are called in our application
    • Methods are called in response to user interaction
  • Creates Payloads which usually consist of an intent/'action name', "CREATE_TODO" and {title: "My Favorite Todo", completed: false, description: "I need to do this"}

Dispatcher

  • Recieves incomming actions from action creators
  • Dispatches all actions to registered stores

Store

  • Registers callbacks with the dispatcher to recieve incoming Actions {action: 'SOME_ACTION', data: 'SOME_DATA'}
  • Mutates its state based on these actions
  • Emits change to all listeners (Traditional Publisher Subscriber)

View

  • Registeres with relevent stores to listen for changes
  • Updates its view in response to the change of state
  • Calls Action Dispatchers in response to user action

Fluxifying our application with Redux

Extracting our todos into actions and stores

###Redux

  • Installing a library into our application using NPM
  • Requiring it as a depedency
  • Using Redux

API Layer

API Utils