react native + redux + es6
TRANSCRIPT
React Native + Redux + ES6Carol @ 2016 :p
React Native Fundamentals- Intro to React Native- The ‘Hello World’ App- Props vs State - Styling in React Native- Components- Platform Specific Code- Debugging Tools
Redux Terminology- What is Redux- Action & Reducers- Redux Middleware
ES6/ES2015- Arrow Functions- Destructuring- Template literals
Overview
React Native
Intro to React Native (facebook.github.io/react-native)- It’s not mobile web app- It’s not HTML5 app- It’s not hybrid app- It’s a real mobile app that’s indistinguishable from an app
that built using Objective-C or Java.- It use the same fundamental UI building blocks as regular
iOS and Android apps (eg. ScrollView, ImageView)
Why React Native ?- No need waste time recompiling- Can reload your app instantly (Live Reload) (Cmd + R)- With hot reloading, you can even run new code while
retaining your application state (Hot Reload)- It's also easy to build part of your app in React Native, and
part of your app using native code directly - that's how the Facebook app works
Setup & Installation
For Pure React Native Projects :- Install ‘react-native-cli’ globally (current RN version: 0.38.0)- npm install –g react-native-cli- react-native init <projectName>- react-native run-ios <or> react-native run-android
For Integration with Existing App:- Refer to React Native website for tutorial :p
Recommended Plugins:- npm install react-native-vector-icons –save - (run react-native link after install icons library)- npm install redux --save- npm install react-redux --save- npm install redux-form--save- npm install redux-logger --save- npm install redux-saga --save- npm install lodash --save- npm install axios --save
‘Hello World’ app
Component
‘Hello World’ app
Styles
Props vs StateMost components can be customized when they are created, with different parameters. These creation parameters are called props, usually passed down from parent components. For state, it starts with a default value (either passed down by parent or self defined) in a component and changes as a result of user actions. You could say the state is private.
- props state
Can get initial value from parent Component?
Yes Yes
Can be changed by parent Component? Yes No
Can set default values inside Component?* Yes Yes
Can change inside Component? No Yes
Can set initial value for child Components? Yes Yes
Can change in child Components? Yes No
Thinking in react
Example of props & state:
Props vs State
Props
State
constructor() { this.state = { count: 1 };}
Styling in React Native
With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.
Components
There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries
Built in UI Components:- Button- View- Text- ListView- ScrollView- Image- Modal- TextInput
3rd Party Libraries- React Parts- JS Coach- Native Base- GitHub Repos
Native UI Components- https://facebook.github.io/react-native/docs/native-components-ios.html
Learn how to create native modules- https://facebook.github.io/react-native/docs/native-modules-ios.html
Platform Specific Code
When building a cross-platform app, you'll want to re-use as much code as possible. For example you may want to implement separate visual components for iOS and Android.
React Native provides two ways to easily organize your code and separate it by platform:
import { Platform, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100, });
- Using the Platform module.
- Using platform-specific file extensions.
Example: index.ios.js , index.android.js
Debugging Tools
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator.
You can also use the Command + ⌘ D keyboard shortcut when your app is running in the iPhone Simulator, or Command + ⌘ M when running in an Android emulator.
To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu.
This will open a new tab at http://localhost:8081/debugger-ui.Use (Command + ⌘ Option + ⌥ I) to Inspect it.
What is ReduxRedux is a flux implementation but the simplest one to follow and it brings predictability to your application state. The basic idea is that the entire application state is kept in a single store.
Credit to: JenyaTerpil
Actions & Reducers
Actions are plain JavaScript objects. Actions must have a type property that indicates the type of action being performed. Types should typically be defined as string constants.
Reference: http://redux.js.org/docs/basics/Actions.html
To dispatch an action, - store.dispatch(addTodoItem(text));- What is this? Refer to store.dispatch()- Or- Use helper like react-redux’s connect()
Credit to: JenyaTerpil
Actions & Reducers
Actions describe the fact that something happened, but don't specify how the application's state changes in response. This is the job of a reducer.
Reference: http://redux.js.org/docs/basics/Reducers.html
Credit to: JenyaTerpil
Redux MiddlewareMiddleware provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.
Credit to: JenyaTerpil
Redux Middleware
Middleware sounds much more complicated than it really is. The only way to really understand middleware is to see how the existing middleware works, and try to write your own.
Some of the commonly used Middleware:- redux-logger – Logger middleware for Redux- redux-saga - An alternative side effect model for Redux apps- and the list goes on … xD
Redux Logger Example:
Redux Middleware
Redux Saga Example:
ES6 / ES2015ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015)
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals
Arrow Functions
Destructuring
Template Literals
ES 6 New Features xD