Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ITS485 Lecture 1: 

React Native Introduction
Dr. Kobkrit Viriyayudhakorn
iApp Technology Limited

http://www.kobkrit.com
Course Outline
Course Outline
Grading Policy
• Quizzes: 10%
• At the beginning of the class (Always
be on time).
• Term Project: 20%
• Midterm exam: 35%...
Term Project
• Making a 5-10 Screens Mobile Application.
• Group & Project Assignment after the midterm exam.
• Set up a g...
Books & Reference
• https://facebook.github.io/reactnative/
• Bonnie Eisenman, Learning React Native Building
Native Mobil...
What is React Native?
• JavaScript framework for building iOS and Android
mobile apps.
• Based on popular JavaScript Web f...
Approach of Mobile App Dev.
Approach Platform Logic UI UX Dev Time*
Native
Object C, Swift
(iOS), Java
(Android)
Native Na...
Why React Native?
• Native Experience
• One language rules them all, JavaScript.
• Fast & Great Development Experience
• D...
Native Experience
Hot Reloading
Debugging with Chrome Developer Tools
Why not React Native?
• React-Native is still relatively young compared with
Native iOS and Android Communities (Released ...
What is React?
• Declarative, Efficient,
and Flexible
JavaScript Library that
Building User
Interface on Website.
• React N...
How React Native Works?
• Q: How a Web framework (React) can be improved and
become a Native Mobile Development Platform?
...
Virtual Dom, Technique of React => Root of React Native
Another Benefits of Virtual
DOM
• Performance benefits.
• Abstraction layers.
• FB Engineer: What if React could render to a...
Rendering Lifecycle
Mounting Component
Re-rendering Component
Async Rules
• Good benefits of JavaScript is their asynchronous
natures.
• React-Native is running on separated thread usin...
Android

Native

UI
Event Bridge
JS World Android World
Thread 1 Main Thread
AsyncCall
(Non-Blocking)
How React-Native Draw?
• React for the Web, render normal HTML elements
• React Native, render cross-platform (or platform...
Example of Platform Specific
Components
<Switch>
<SwitchIOS><SwitchAndroid>
JSX
• Combining JavaScript and XML-markup syntax to create view.
• Single File Concept (Write down at Component Class), No...
Styling
• In Web, We have CSS, necessary part of the Web.
• In React-Native, We have something similar to CSS,
called Flex...
React-Native Support
• Mac OS can develop
• iOS
• Android
• Windows OS can develop
• Only Android
HomeBrew Installation
• Open Terminal (Click on Find icon on the top right
of the screen)
• Type “Terminal”
• Enter $ /usr...
Install React-Native in Mac
for iOS Development.
React-Native-Cli Command
Try
• $ react-native init sampleProject
• $ cd sampleProject
• $ react-native run-ios
IDE
• Any Text Editor is fine.
• Atom
• React
• React-Snippet
• Atom-React-Native-CSS
• Atom-React-Native-
Autocomplete
• S...
Project Structure
Download Lecture Note
After Class & Video
http://www.kobkrit.com
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
Upcoming SlideShare
Loading in …5
×

React Native Introduction: Making Real iOS and Android Mobile App By JavaScript

8,095 views

Published on

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.

Published in: Technology

React Native Introduction: Making Real iOS and Android Mobile App By JavaScript

  1. 1. ITS485 Lecture 1: 
 React Native Introduction Dr. Kobkrit Viriyayudhakorn iApp Technology Limited
 http://www.kobkrit.com
  2. 2. Course Outline
  3. 3. Course Outline
  4. 4. 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)

  5. 5. 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.
  6. 6. 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/
  7. 7. 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)
  8. 8. 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
  9. 9. 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.
  10. 10. Native Experience
  11. 11. Hot Reloading
  12. 12. Debugging with Chrome Developer Tools
  13. 13. 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.
  14. 14. 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
  15. 15. 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.
  16. 16. Virtual Dom, Technique of React => Root of React Native
  17. 17. 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.
  18. 18. Rendering Lifecycle Mounting Component Re-rendering Component
  19. 19. 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).
  20. 20. Android
 Native
 UI Event Bridge JS World Android World Thread 1 Main Thread AsyncCall (Non-Blocking)
  21. 21. How React-Native Draw? • React for the Web, render normal HTML elements • React Native, render cross-platform (or platform- specific) native UI component. Cross Platform (iOS, Android) Platform Specific <DatePickerIOS>
  22. 22. Example of Platform Specific Components <Switch> <SwitchIOS><SwitchAndroid>
  23. 23. 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
  24. 24. 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
  25. 25. React-Native Support • Mac OS can develop • iOS • Android • Windows OS can develop • Only Android
  26. 26. 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)"
  27. 27. Install React-Native in Mac for iOS Development.
  28. 28. React-Native-Cli Command
  29. 29. Try • $ react-native init sampleProject • $ cd sampleProject • $ react-native run-ios
  30. 30. IDE • Any Text Editor is fine. • Atom • React • React-Snippet • Atom-React-Native-CSS • Atom-React-Native- Autocomplete • Sublimes • Visual Studio Code
  31. 31. Project Structure
  32. 32. Download Lecture Note After Class & Video http://www.kobkrit.com

×