React Native Beginners Workshop
Intro
Rahul Gaba
Atul R
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
react-native
Another JS framework?
A revolutionary framework which lets you build native apps using JS*
React-Native Architecture 🏛
-
Native Code/Modules
- JavaScript VM
React-Native Internals 🛠
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
Debugging
Mac
iOS: cmd+ctrl+z
Android: cmd+m
Windows
iOS: NA
Android: ctrl+m
The Boilerplate 🍽
Get, Set.. Code!
Start writing components
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
Speeding up development with some ES7 Features ⏩
- ES6 Classes
- Class properties instead of constructor
- Arrow functions instead of class methods
- Object rest spread
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
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 🗄
Get, Set.. Code!
Task #6: Add functionality to our app using redux
git checkout chapter-6
Get, Set.. Code!
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 🛣
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
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
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
Feedback: https://goo.gl/PXLjov