React Native Beginners Workshop
Intro
Rahul Gaba
Atul R
![](https://s3.amazonaws.com/media-p.slid.es/uploads/758515/images/4273012/hi_atul.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/758515/images/4273017/hi_gaba_copy.png)
Pre-requisites
-
Install node, react-native-cli, Android studio and Xcode (click on "Building Projects with Native Code" tab): https://facebook.github.io/react-native/docs/getting-started.html
-
Make sure your emulators are working and running (either android or ios)
-
Yarn: npm install -g yarn
-
An ESLint supported IDE, preferably Atom: https://atom.io
-
Clone this repo: https://github.com/react-native-workshop/note-taker
-
Install latest version of React Native Debugger: https://github.com/jhen0409/react-native-debugger/releases
Goal
- Understand how react-native works.
- Build a native android and iOS app.
- Setup CI for automated builds.
- Conventions to manage the codebase.
Note Taker
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4130769/Screen_Shot_2017-09-16_at_4.09.39_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4130770/Screen_Shot_2017-09-16_at_4.10.27_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4130771/Screen_Shot_2017-09-16_at_4.14.41_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4130783/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4130792/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4130793/pasted-from-clipboard.png)
react-native
Another JS framework?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4130727/giphy__1_.gif)
A revolutionary framework which lets you build native apps using JS*
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4250933/source.gif)
React-Native Architecture 🏛
-
Native Code/Modules
- JavaScript VM
React-Native Internals 🛠
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4250965/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/758515/images/4273521/code_logic_flow.png)
Get, Set.. Code!
git checkout chapter-1 yarn install
yarn android or yarn ios
Get, Set.. Code!
Task #1: Run Hello world app
Get, Set.. Code!
Get, Set.. Code!
Task #1: Run Hello world app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251054/5.0-notetaker-android.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251055/5.0-notetaker-ios.png)
Debugging
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4273110/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4273119/pasted-from-clipboard.png)
Mac
iOS: cmd+ctrl+z
Android: cmd+m
Windows
iOS: NA
Android: ctrl+m
The Boilerplate 🍽
Get, Set.. Code!
Start writing components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251057/5.2-part-1-ios.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251058/5.2-part-2-android.png)
Get, Set.. Code!
Task #2: Adding ESLint, githooks
yarn git checkout chapter-2 yarn android OR yarn ios
Get, Set.. Code!
Task #3: Adding ESLint, githooks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251063/eslint-error-editor.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251064/push-error.png)
Speeding up development with some ES7 Features ⏩
- ES6 Classes
- Class properties instead of constructor
- Arrow functions instead of class methods
- Object rest spread
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251222/Screen_Shot_2017-10-22_at_6.33.59_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251224/Screen_Shot_2017-10-22_at_6.35.33_PM.png)
Using ES7 features
Testing 🙇
- What's the use of testing UI code?
- Snapshots
- Testing stateful components using Enzyme
Get, Set.. Code!
Task #3: Write test cases for the code so far
yarn git checkout chapter-3
Styling 💅
- Flexbox
- Theme variables
- Separating styles from component code
Get, Set.. Code!
Task #4: Style the components
git checkout chapter-4
Get, Set.. Code!
Task #4: Style the components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4273628/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4273629/pasted-from-clipboard.png)
Before
After
Using third party modules 📦
- When should I look for third party components?
- awesome-react-native: https://github.com/jondot/awesome-react-native
- How react-native link works?
- Adding react-native-vector-icons
Get, Set.. Code!
Task : Add react-native-vector-icons using react-native link
BREAK
DevOps ✈️
-
Lint and tests with coverage should run whenever a pull request is raised.
-
CI builds and publish app to the internal team testers on every merge to master.
-
Manual Building capability for developers
To see circleci build: https://goo.gl/uzgNp1
Redux 🗄
-
Why state management?
-
Reducers/Actions/Dispatch
-
Presentational Components VS Container Components
Redux 🗄
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4273329/pasted-from-clipboard.png)
Get, Set.. Code!
Task #6: Add functionality to our app using redux
git checkout chapter-6
Get, Set.. Code!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251299/9.2-state-in-parent.png)
Task #6: Add functionality to our app using redux
Navigation 🛣
-
How navigation happens in native applications?
-
Types of navigators offered by react-navigation
-
Navigate using redux-actions
Navigation 🛣
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251321/Screen_Shot_2017-10-22_at_7.03.26_PM.png)
A Stack in native apps
Get, Set.. Code!
Task #7: Add multipage navigation to our app
git checkout chapter-7
Get, Set.. Code!
Task #7: Add multipage navigation to our app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251345/Screen_Shot_2017-10-22_at_7.16.07_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4273725/pasted-from-clipboard.png)
Porting the app to web
git checkout chapter-8
Task #8: Add a Link component to our app that should show up the link passed to it on a separate tab in browser on both android and web
Custom Native Modules 🍱
- Do I need to know Java/Objective-C?
- Writing Native-wrappers of existing native modules.
- Writing a Device Module for both Android and iOS
Get, Set.. Code!
Task #9: Create a custom module which returns the device name
git checkout chapter-9
Task #11: Create a custom module which returns the device name
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251401/16.1.finished-androd-project.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/545656/images/4251396/16.2-ios-finished.png)
References
-
http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/
-
https://medium.com/differential/managing-configuration-in-react-native-cd2dfb5e6f7b
-
https://medium.com/the-react-native-log/comparing-the-performance-between-native-ios-swift-and-react-native-7b5490d363e2
Q&A
The End
![](https://s3.amazonaws.com/media-p.slid.es/uploads/758515/images/4272983/gaba.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/758515/images/4272984/atul.png)
Feedback: https://goo.gl/PXLjov
React-Native
By Rahul Gaba
React-Native
- 2,985