This document provides an overview of React Native, Redux, and ES6 concepts. It begins with an introduction to React Native fundamentals like components, props vs state, and styling. It then covers Redux terminology such as actions, reducers, and middleware. Finally, it discusses ES6 features like arrow functions, destructuring, and template literals. Code examples and links to documentation are provided throughout for illustrating key concepts.

1. React Native + Redux + ES6
Carol @ 2017 :p

2. 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

3. React Native

4. 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) When Save OR (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

5. Setup & Installation
For Pure React Native Projects :
- Install ‘react-native-cli’ globally (current RN version:
0.43.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

6. ‘Hello World’ app
Component

7. ‘Hello World’ app
Styles

8. Props vs State
Most 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 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

9. Example of props & state:
Props vs State
Props
State
constructor() {
this.state = { count: 1 };
}

10. 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.

11. 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

12. 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

13. 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.

14. Reduxhttp://redux.js.org/

15. What is Redux
Redux 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

16. Why use Redux
It is way easier to test an action/action creator and reducer separately
than one big react component
- Predictable state
- Separation of concerns
separate the View component from Logic or Async flow
no longer have to couple components through state propagation, as the
components will receive props through the store and not the parent
components.
- Decoupling
- Testability
Reference: Quora
With the same actions in the same order, you're going to end up in the
same state

17. When to use Redux
You don’t need Redux if your data never changes. The whole point of it is managing
changes - Dan Abromov
Use Redux when you have reasonable amounts of data changing over time, you need a
single source of truth, and you find that approaches like keeping everything in a top-level
React component's state are no longer sufficient..
Don’t use Redux until you have problems with vanilla React
- When application grows
- Become more complicated
- Using setState every where
Changing Data

18. 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

19. 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

20. Redux Middleware
Middleware provides a third-party extension point between dispatching
an action, and the moment it reaches the reducer.
Credit to: JenyaTerpil

21. Why Redux Middleware ?
Logging !! (My personal favourite :p)
One of the benefits of Redux is that it makes state changes
predictable and transparent. Every time an action is dispatched, the
new state is computed and saved. The state cannot change by itself,
it can only change as a consequence of a specific action.
Wouldn't it be nice if we logged every action that happens in
the app, together with the state computed after it? When
something goes wrong, we can look back at our log, and
figure out which action corrupted the state.
Reference: http://redux.js.org/docs/advanced/Middleware.html

22. Why Redux Middleware ?
Reference: http://stackoverflow.com/questions/34570758/why-do-we-need-
middleware-for-async-flow-in-redux
Async Flow & Complexity
Dan Abramov's goal - and everyone's ideally - is simply to encapsulate
complexity and async in the place where it's most appropriate.
- reducer ? No way. They should be pure functions with no side-effects
- dumb view component ? Definitely No. They have one concern:
presentation and user-interaction, and should be as simple as possible
- container component ? Containers do need to be more complex than
dumb components, but it's still a single responsibility: providing
bindings between view and state/store. Your async logic is a whole
separate concern from that
- middleware ? Yeah, keep complexity in a place that's complex of
necessity, and keep everything else simple

23. Redux Middleware Example
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
- 4 ways of redux - thunk, saga, observable, redux promise
- and the list goes on … xD
Redux Logger Example:

24. Redux Middleware Example
Redux Saga Example:

25. React & Redux Articles
You might not need redux - https://medium.com/@dan_abramov/
you-might-not-need-redux-be46360cf367
Presentational & Container Components - https://medium.com/
@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
Conditional Rendering in React - https://www.robinwieruch.de/
conditional-rendering-react/
Redux is not easy, Alternatives ? - https://medium.com/
@machnicki/why-redux-is-not-so-easy-some-
alternatives-24816d5ad22d
Redux 4 Ways - https://medium.com/react-native-training/redux-4-
ways-95a130da0cdc#.5k72ackse

26. ES6 / ES2015
ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015)

27. https://developer.mozilla.org/en/docs/Web/JavaScript/
Reference/Functions/Arrow_functions
Arrow Functions
ES6 New Features

28. https://developer.mozilla.org/en/docs/Web/JavaScript/
Reference/Operators/Destructuring_assignment
Destructuring
ES6 New Features

29. https://developer.mozilla.org/en/docs/Web/JavaScript/
Reference/Template_literals
Template Literals
ES6 New Features

30. https://webapplog.com/es6/
Top 10 ES6 Features
ES6 Related Articles
https://thenextweb.com/dd/2016/03/09/6-reasons-need-learn-
javascript-es6-now-not-later/#.tnw_xVURuNrq
6 Reason to Learn ES6
https://medium.com/@rajaraodv/is-class-in-es6-the-new-bad-
part-6c4e6fe1ee65
Is “Class” in ES6 the new “Bad” part?
https://medium.freecodecamp.com/5-javascript-bad-parts-
that-are-fixed-in-es6-c7c45d44fd81
5 Javascript Bad Parts that Fixed in ES6

31. The End :p