Hello I'm React Native

Overview about React Native framework

Transcript

1. Hello! I'm
2. Marco Almeida ‣ Software Engineer at Healfies
 healfies.com ‣ Front-end Developer at Spinver
 spinver.com ‣ github.com/marquinhoalm About Me @marquinhoalm
3. @marquinhoalm "LEARN ONCE, WRITE ANYWHERE" What's React Native? Framework Build App Only Using Javascript Native UI Components Asynchronous Execution Based on React.js
4. @marquinhoalm How React Native Works?
5. @marquinhoalm Getting Started
6. @marquinhoalm ‣ Node.js 4.0+ ‣ React Native Command Line Tools ‣ $ npm install -g react-native-cli Common Requisites GETTING STARTED
7. @marquinhoalm ‣ Xcode ‣ IOS Simulator Requisites for IOS GETTING STARTED
8. @marquinhoalm ‣ Android Studio ‣ JDK 1.8+ ‣ Android Virtual Device GETTING STARTED Requisites for ANDROID
9. @marquinhoalm Components
10. @marquinhoalm ‣ ActivityIndicator ‣ Button ‣ DatePickerIOS ‣ DrawerLayoutAndroid ‣ Image ‣ KeyboardAvoidingView ‣ ListView ‣ MapView ‣ Modal ‣ Navigator ‣ NavigatorIOS ‣ Picker ‣ PickerIOS ‣ ProgressBarAndroid Available List COMPONENTS ‣ ProgressViewIOS ‣ RefreshControl ‣ ScrollView ‣ SegmentedControlIOS ‣ Slider ‣ SnapshotViewIOS ‣ StatusBar ‣ Switch ‣ TabBarIOS ‣ TabBarIOS.Item ‣ Text ‣ TextInput ‣ ToolbarAndroid ‣ TouchableHighlight ‣ TouchableNativeFeedback ‣ TouchableOpacity ‣ TouchableWithoutFeedback ‣ View ‣ ViewPagerAndroid ‣ WebView
11. @marquinhoalm Style
12. @marquinhoalm ‣ Doesn’t use special language or syntax ‣ Flexbox Using Javascript STYLE
13. @marquinhoalm Inline Style STYLE
14. @marquinhoalm Specific Platform
15. @marquinhoalm ‣ React Native has an elegant way to handle this ‣ SearchBar.ios.js ‣ SearchBar.android.js WAYS TO CHOOSE SPECIFIC PLATFORM
16. @marquinhoalm Project Structure
17. @marquinhoalm ‣ $ react-native init AppExample ‣ $ cd AppExample ‣ $ react-native run-ios ‣ $ react-native run-android Creating a Project PROJECT STRUCTURE
18. @marquinhoalm Show me the code!!
19. @marquinhoalm Who's using React Native?
20. @marquinhoalm Extra Tools
21. @marquinhoalm ‣ Open Source tool from Microsoft ‣ microsoft.github.io/code-push/ ‣ Code updates to your application Code Push EXTRA TOOLS
22. @marquinhoalm ‣ React Native Package Manager built to ease your daily. Based on CocoaPods and react-native link RNPM EXTRA TOOLS
23. @marquinhoalm ‣ React Native IDE built for Atom (by Facebook) ‣ Built in Chrome debugger, remote server access ‣ https://nuclide.io/ Nuclide EXTRA TOOLS
24. @marquinhoalm Thanks!