React native
2 likes308 views
React Native is a framework for building native mobile apps using React. It was created by Facebook in 2013 and allows using React to build mobile apps that look and feel native on both iOS and Android. Some key advantages of React Native include being friendly for web developers, supporting native UI instead of web views, enabling live reloading instead of compiling and waiting, and using declarative UI rather than imperative UI. Components, props, state, and JSX are some important concepts in React Native. Getting started involves installing Node, Watchman, and the React Native CLI, then creating a project and running it on iOS or Android. Common React Native components include Text, Image, View, TouchableOpacity, and more.
React native
- 3. Started as Facebook’s internal hackathon project, in the summer of 2013 The first public preview was in January of 2015 at React.js Conference 47k+ stars on Github A Framework for building native apps using React React NativeWhatis ?
- 4. GoogleTrends
- 5. Web developer friendly Native UI (vs WebView) Live reload (vs Compile&Wait) Declarative UI (vs Imperative UI) Multi-Platform Support (vs Specific Support) Open Source WhyReactNative?
- 6. Component: Everything is a component Props: Some data passed to child component State: Some internal data of a component JSX: XML-Like syntax help to define component’s Some Keywords!
- 8. brew install node GetStarted! brew install watchman npm install -g react-native-cli react-native init FirstReactNativeProject cd FirstReactNativeProject react-native run-ios
- 9. HelloWorld import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native'; class HelloWorldApp extends Component { render() { return ( <Text>Hello world!</Text> ); } } AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
- 10. HelloWorld import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native'; class HelloWorldApp extends Component { render() { return ( <Text>Hello world!</Text> ); } } AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp); Hello world!
- 11. import { Platform } from ‘react-native’; const componentHeight = (Platform.OS === ‘ios’)? 150 : 100; Platform-SpecificCode
- 13. ActivityIndicator Button DatePickerIOS DrawerLayoutAndroid FlatList Image KeyboardAvoidingView ListView MapView Modal Navigator NavigatorIOS Picker PickerIOS ProgressBarAndroid ProgressViewIOS RefreshControl ScrollView SectionList SegmentedControlIOS Slider SnapshotViewIOS StatusBar Switch TabBarIOS TabBarIOS.Item Text TextInput ToolbarAndroid TouchableHighlight TouchableWithoutFeedback View ViewPagerAndroid VirtualizedList WebView ToolbarAndroid TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback View ViewPagerAndroid VirtualizedList WebView TouchableNativeFeedback React NativeUIComponent Do you needtomoreComponents? visitto : https://react.parts/native https://js.coach/react-native
- 17. Tech knowledgerequired HTML CSS JavaScript JSX – JavaScript code that resembles HTML React Native (iOS): Objective-C Swift (Android): Java
- 18. performance 😎
- 21. React Native
- 24. ANY QUESTION? PLEASE NO HARD QUESTION
- 25. Thanks! 😊