React Native is a new technology that allows building real mobile apps using only JavaScript. It is a JavaScript framework for writing, debugging, and deploying both iOS and Android mobile applications with native experience. React-Native allows developers to share about 80% of code between iOS and Android which make the development is 5x faster than traditional means. React-Native libraries are created by Facebook released in March 2015. It was proven by many world-class mobile applications, such as Facebook, Facebook Ads Manager, TaskRabbit, QQ, Discord, SoundCloud, etc.
5. Grading Policy
• Quizzes: 10%
• At the beginning of the class (Always
be on time).
• Term Project: 20%
• Midterm exam: 35% (Open Books)
• Final exam: 35% (Open Books)
6. Term Project
• Making a 5-10 Screens Mobile Application.
• Group & Project Assignment after the midterm exam.
• Set up a group of three. (36/3 = 12 groups)
• 15% - Group scores - Usefulness, App Business
Model, UI, UX, Functionality, Code Style, and
Pitching.
• 5% - Individual scores - App development questions
target to each person during presentation.
• 10 minutes presentation: Pitching 3 minutes, Code
Explanation 2 minutes, Question & Answering 5
minutes.
7. Books & Reference
• https://facebook.github.io/reactnative/
• Bonnie Eisenman, Learning React Native Building
Native Mobile Apps with JavaScript, O'Reilly
Media, December 2015.
• https://github.com/jondot/awesome-react-native
• https://js.coach/react-native/
8.
9. What is React Native?
• JavaScript framework for building iOS and Android
mobile apps.
• Based on popular JavaScript Web framework called
React.
• Created by Facebook. Firstly release iOS version on
March 2015 and Android version on September
2015
• Writing the app by using JavaScript and XML-esque
markup (JSX)
• React-Native bridges and invokes the Native
rendering API in Objective-C (iOS) and Java
(Android)
10. Approach of Mobile App Dev.
Approach Platform Logic UI UX Dev Time*
Native
Object C, Swift
(iOS), Java
(Android)
Native Native Smooth 6-24 weeks
HTML5
Hybrid
PhoneGap,
Cordova, Ionic
JS
HTML,
CSS
Laggy 2-8 weeks
Native
Hybrid
React Native,
NativeScript
JS Native Smooth 2-8 weeks
* 20-30 screens mobile apps approximated based on instructor experiences
11. Why React Native?
• Native Experience
• One language rules them all, JavaScript.
• Fast & Great Development Experience
• Don’t Waste Time Recompiling (Hot Reloading)
• 80% Share code between Android & iOS
• Great Debugging Tool using Chrome Developer Tools
• Be able to bridge with Native Code when we need to.
15. Why not React Native?
• React-Native is still relatively young compared with
Native iOS and Android Communities (Released on
2015)
• Some of Native API still are not supported. (But you
can use the native libraries through)
• Add one additional layer to mobile app project.
16. What is React?
• Declarative, Efficient,
and Flexible
JavaScript Library that
Building User
Interface on Website.
• React Native is rooted
from React.
• React treats every
thing as a Component.
A React Component
17. How React Native Works?
• Q: How a Web framework (React) can be improved and
become a Native Mobile Development Platform?
• A: Flexibility of React’s Virtual DOM
• React aimed to make Web application fast as much as
possible.
• DOM Changing (Changing the content of webpage)
dynamically is expensive step. Re-rendering DOM is
significant impact on performance.
• Rather than directly render change DOM in the page, React
compute the only diff that need to be render in memory by
Virtual DOM and re-renders the minimal amount necessary.
19. Another Benefits of Virtual
DOM
• Performance benefits.
• Abstraction layers.
• FB Engineer: What if React could render to a target
other than the Web Browser’s DOM?
• Instead of rendering HTML/CSS to the browser’s
DOM. Why can’t we rendering mobile app by using
Objective-C APIs to render to iOS, and invokes
Java to render to Android.
22. Async Rules
• Good benefits of JavaScript is their asynchronous
natures.
• React-Native is running on separated thread using
JavaScript asynchronous call via the event bridge
to invokes the host native platform’s underlying APIs
and UI elements. (Objective-C, Java)
• Since, React-Native don’t run on the main UI
rendering thread, it can do asynchronous call without
impact user’s experience (such as delay).
26. JSX
• Combining JavaScript and XML-markup syntax to create view.
• Single File Concept (Write down at Component Class), Not
Seperate Files (Split HTML, CSS, JS)
• Separation of concerns > Separation of technologies
JSX (Underlined) Rendered View
27. Styling
• In Web, We have CSS, necessary part of the Web.
• In React-Native, We have something similar to CSS,
called Flexbox Layout Model.
{ background-color : ‘white’}
{ backgroundColor : ‘white’}
CSS
Camel Case in React
30. HomeBrew Installation
• Open Terminal (Click on Find icon on the top right
of the screen)
• Type “Terminal”
• Enter $ /usr/bin/ruby -e "$(curl -fsSL https://
raw.githubusercontent.com/Homebrew/install/
master/install)"
34. IDE
• Any Text Editor is fine.
• Atom
• React
• React-Snippet
• Atom-React-Native-CSS
• Atom-React-Native-
Autocomplete
• Sublimes
• Visual Studio Code