React native tour

1. @dielduarte

2. REACT

3. ● Virtual DOM ● Declarative syntax ● JSX REACT

4. JSX ... render() { return( <MyButton color=”Blue”> Hello Facebook Developers Circle! </MyButton> ); } ...

5. JSX ... render() { return( React.createElement( MyButton, {color: ‘blue’}, ‘Hello Facebook Developers Circle!’ ) ); } ...

6. REACT NATIVE

7. Learn once, write anywhere: Build mobile apps with React

8. So you mean that react native Compiles js to native code ?

9. What happens when we open Does an application react native?

10. And how doing this communication ?

11. #import "CalendarManager.h" #import <React/RCTLog.h> @implementation CalendarManager RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location) { RCTLogInfo(@"Pretending to create an event %@ at %@", name, location); }

12. import { NativeModules } from 'react-native'; var CalendarManager = NativeModules.CalendarManager; CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');

13. OK, you convinced me but... how I can get started?

14. REACT NATIVEREACT X

15. REACT NATIVE (react native core components) REACT ( html markup ) X ● Block elements ( div, section..) ● Text elements ( h1, h2, p, span... ) ● Links, buttons ( a, button.. ) ● ... ● Block elements ( View ) ● Text elements ( Text ) ● Links, buttons ( Button, TouchableHighlight ) ● ...

16. REACT import React, { PureComponent } from 'react'; ... render() { return( <div> <h1>Hello!</h1> </div> ); } ...

17. REACT NATIVE import React, { PureComponent } from 'react'; import { View, Text } from 'react-native'; ... render() { return( <View> <Text>Hello!</Text> </View> ); } ...

18. npm install -g react-native-cli

19. REACT NATIVE CLI - start [options] - run-ios [options] - run-android [options] - new-library [options] - bundle [options] - unbundle [options] - eject [options] - link [options] [packageName] - unlink [options] <packageName> - install [options] <packageName> - uninstall [options] <packageName> - upgrade [options] - log-android [options] - log-ios [options]

20. STYLESHEET

21. STYLESHEET import { StyleSheet } from 'react-native'; ... const styles = StyleSheet.create({ red: { color: 'red', } }); ...

22. STYLESHEET import React, { PureComponent } from 'react'; import { View, Text } from 'react-native'; ... render() { return( <View> <Text style={styles.red}>Hello!</Text> </View> ); } ...

23. DEBUG MENU

24. REACT NATIVE APIs ALERT GEOLOCATION VIBRATIO N ASYNC STORAGE ANIMATED APPSTATE DIMENSIONS LINKING

25. ALERT API import { Alert } from 'react-native'; ... Alert.alert( 'Remove task', 'Are you sure you want to delete this item?', [ {text: 'Cancel', style: 'cancel'}, {text: 'OK', onPress: () => console.log('ok...')}, ] ); ...

26. ASYNC STORAGE API import { AsyncStorage } from 'react-native'; ... try { await AsyncStorage.setItem('key', 'value'); } catch (error) { // Error saving data } ...

27. ASYNC STORAGE API import { AsyncStorage } from 'react-native'; ... try { const value = await AsyncStorage.getItem('key'); if (value !== null){ console.log(value); } } catch (error) { // Error retrieving data } ...

28. Modules to make your life easier

29. npm install react-navigation

30. react-navigation import React, { Component } from 'react'; import { StackNavigator } from 'react-navigation'; import TasksView from './pages/Tasks'; import FormTaskView from './pages/FormTask'; export const Routes = StackNavigator({ TasksView: { screen: TasksView }, FormTaskView: { screen: FormTaskView } });

31. react-navigation import React, { PureComponent } from 'react'; import { StackNavigator } from 'react-navigation'; class TasksView extends PureComponent { static navigationOptions = { headerTitle: 'Tasks', headerColor: '#fff', headerStyle: { backgroundColor: '#053d4e' } }; ... } export default TasksView;

32. react-navigation APIs ● navigate(routerName, params) ● goBack() ● state ○ routerName ○ key ○ params ● setParams({...}) ● dispatch() ○ ... ○ reset

33. npm install styled-components

34. STYLED COMPONENTS import { styled } from 'styled-components'; const TextRed = styled.Text` color: red; `; ... render() { return( <View> <TextRed>Hello FACEBOOK DEVELOPERS CICLE!</TextRed> </View> ); } ...

35. STYLED COMPONENTS API import { styled } from 'styled-components'; const TextDefault = styled.Text` color: black; font-size: 20; `; const TextRed = styled(TextDefault)` color: red; `;

36. DEMO TIME https://github.com/dielduarte/react-native-todolist

37. Questions?