This document provides an overview of ReactJS and React Native. It defines ReactJS as a JavaScript library for building user interfaces and explains concepts like components, virtual DOM, JSX, props, states, and one-way data flow. It also covers React Native and how it allows building native mobile apps using JavaScript and React. Key differences between Ionic and React Native are outlined. Examples of companies that use ReactJS and React Native are given. Setup and installation instructions for React Native are provided.

1. ReactJS
&
React Native

2. HELLO!
Hiten Pratap Singh
hiten@fintechlabs.in
https://github.com/hitenpratap/
https://hprog99.wordpress.com

3. 1.
ReactJS?

4. “
A JavaScript library for
building user interfaces

5. What is ReactJS?
▹ A JS lib for building user interfaces
▹ Developed by Facebook & Instagram
▹ ReactJS is V in MVC
▹ ReactJS runs a Diffing algorithm to figure out what has
changed

6. Why do we use ReactJS?
▹ ReactJS is extremely fast, because it uses virtual DOM concept
▹ ReactJS uses special syntax called JSX, which allows to mix
HTML with JS
▹ When the data changes, ReactJS conceptually hits refresh
button and knows only to update the changed parts
▹ It’s all about building reusable components
▹ It’s much smaller and plays nicely with JQuery and other
frameworks

7. 2.
ReactJS Concepts

8. ReactJS Concepts
▹ Components
▹ Virtual DOM
▹ JSX
▹ Props & States
▹ One Way Data Flow

9. Component
▹ Components let you split the UI into independent, reusable
pieces

10. Virtual DOM
▹ It’s a lightweight JS object which is a copy of real DOM

11. JSX
▹ JSX stands for JavaScript XML
▹ You can embed JavaScript expressions in JSX
▹ JSX Event Handlers are NOT Like HTML `onClick`

12. Props
▹ This simply is shorthand for properties
▹ Props are how components talk to each other
▹ Props are immutable

13. States
▹ Like props, state holds information about the component
▹ Props shouldn’t change, so state steps up
▹ So state is used so that a component can keep track of
information in between any renders that it does.

14. One Way Data Flow
▹ In React JS, data flows in one direction, from Parent to Child.
▹ Props are properties passed to a child component

15. 3.
ReactJS Life Cycle

16. ReactJS Life Cycle
▹ Initialization
▹ Mounting
▹ Updation
▹ Unmounting

17. ReactJS Life Cycle

18. 4.
Who Uses ReactJS?

19. Who uses ReactJS?

20. BIG
CONCEPT
React Native
20

21. 5.
React Native?

22. “
Build native mobile apps
using JavaScript and
React

23. React Native?
▹ Write in React/JSX
▹ Run as a Native App
▹ Code runs in a JS Container
▹ iOS/Android

24. 6.
Why React Native?

25. Why React Native?
▹ Common Codebase
▹ Low development cost & time
▹ No need to deploy apps again & again to stores to provide
updates
▹ Leverage all the awesome features of ReactJS

26. 7.
How React Native
works?

27. How React Native works?
There are 4 threads in the React Native App
▹ UI Thread: Also known as Main Thread
▹ JS Thread: JS thread or Javascript thread is the thread where
the logic will run.
▹ Native Modules Thread: Sometimes an app needs access to
platform API, and this happens as part of native module thread.
▹ Render Thread: Only in Android L (5.0), react native render
thread is used to generate actual OpenGL commands used to
draw your UI.

30. 8.
Sample Program

32. 8.
Difference between
Ionic and React Native

34. Difference between Ionic & React Native
▹ Ionic is a regular web app, written using HTML, CSS, and JavaScript, but it
runs in a webview embedded in a native app instead of in a stand-alone
mobile browser
▹ React Native has a completely different architecture: instead of writing
your UI using web technologies, it uses the React component model to
render to native views
▹ Ionic is a Cordova based app that wrap current web app into a mobile
application. It uses the android existing web view to render the app so the
file size is quite small
▹ Meanwhile react native create bridge between JavaScript and native
component
▹ When it comes to memory usage, Ionic framework uses more than react
native apps
▹ The Ionic app is slower at loading videos because it needs to download
from other server, while in react native, it caches the tiles so it loads
faster
▹ When it comes to integration, react native can use every client based
JavaScript modules from npm (node package manager) whereas Ionic
uses only the Cordova-based code

35. Difference between Ionic & React Native
▹ Ionic is a framework that creates an idea of writing code only once
▹ React native is not a write once and run anywhere framework, but is
popularly touted as a “learn once, write anywhere” framework
▹ Ionic Framework app needs to use device features and APIs through
Apache Cordova plugins
▹ With react native you can access any device component or API
Based on the points above, you can see the difference in their functionalities, so
if you want to go for something that creates performant iOS and Android apps
that feel at home on their respective platforms ten you can opt for React Native.
And, if you are targeted at building hybrid mobile apps, Ionic is the best choice!

36. 9.
Comparing Performances
b/w Ionic & React Native

40. 10.
Who uses React Native?

42. 11.
Setup React Native

43. Setup React Native
▹ Android Studio: https://developer.android.com/studio/index.html
▹ Android SDK(Without Android Studio):
https://developer.android.com/studio/index.html#command-tools
▹ Required Components which must be installed to run React Native App:
1.Google APIs
2.Android SDK Platform 23
3.Intel x86 Atom_64 System Image
4.Google APIs Intel x86 Atom_64 System Image
▹ JDK 8 is required to run sdkmanger of Android SDK so make sure about your JDK
version installed on the system.
▹ NodeJS version 6 or newer must be installed => https://nodejs.org/en/download/
▹ Finally we’ll use the npm to install React Native on our system:
npm install -g react-native-cli
▹ You can validate if all the above components have been installed properly on the
system by running the below command:
react-native -v

44. 61,258
Github Stars
257
Releases
1,627 USERS
And a lot of contributors
44

45. Demo Time

46. THANKS!
Any questions?
Hiten Pratap Singh
hiten@fintechlabs.in
https://github.com/hitenpratap/
https://hprog99.wordpress.com

47. References
▹ https://hackernoon.com/virtual-dom-in-reactjs-43a3fdb1d130
▹ https://medium.com/javascript-scene/jsx-looks-like-an-abominatio
n-1c1ec351a918
▹ http://lucybain.com/blog/2016/react-state-vs-pros/
▹ https://hackernoon.com/understanding-state-and-props-in-react-9
4bc09232b9c
▹ https://openclassrooms.com/courses/build-web-apps-with-reactjs/
one-way-data-bindings
▹ https://medium.embengineering.com/in-react-js-data-flows-in-one
-direction-from-parent-to-child-841103ed3aed
▹ https://hackernoon.com/reactjs-component-lifecycle-methods-a-d
eep-dive-38275d9d13c0
▹ https://www.slideshare.net/TadeuZagallo/a-tour-of-react-native
▹ https://www.infoq.com/articles/react-native-introduction
▹ https://wetalkit.xyz/react-native-what-it-is-and-how-it-works-e2182
d008f5e
47