![Saving login and password to screen state
…
class LoginScreen extends Component {
state = { error: null };
onChangeValue = (prop, value) => {
this.setState({ [prop]: value });
};
…
}
51](https://image.slidesharecdn.com/rn-crossplatformfastdive-170728135528/85/Mobile-Open-Day-React-Native-Crossplatform-fast-dive-51-320.jpg)
![loginAsync
export const loginAsync = async (login, password) => {
let base64 = encode(`${login}:${password}`);
try {
let result = await fetch('https://api.github.com/user', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Basic ' + base64
},
});
if (result.status === 200) {
return {
user: JSON.parse(result._bodyInit),
auth: base64
};
} else {
return { error: `Failed to login with ${result.status}` };
}
} catch (error) {
console.log("[LoginActions] error = " + JSON.stringify(error));
return { error: `Failed to login with ${result.error}` };
}
};
61](https://image.slidesharecdn.com/rn-crossplatformfastdive-170728135528/85/Mobile-Open-Day-React-Native-Crossplatform-fast-dive-61-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Mobile Open Day: React Native: Crossplatform fast dive (20)
Ad
More from epamspb (13)
Ad
Mobile Open Day: React Native: Crossplatform fast dive
- 1. React Native: Crossplatform fast dive 1
- 2. About me — Vladimir Ivanov - Lead software engineer — More than 6 years in Android development — Wide interest in Mobile technologies — Happy father of a wonderful son 2
- 3. Why not crossplatform? 1. Lack of specialists 2. UX concerns 3. God damn javascript 3
- 4. Why crossplatform? 1. Cheap development 2. because rapid 3. 3x faster than native approach 4. Native UX, at last 4
- 5. How is was to dive a year ago? 1. Install node 2. Install android/ios sdk 3. For android: install java, download platforms, emulators, build tools 4. Learn React Native 5. ??? 6. PROFIT!11 5
- 6. How it is now? 1. Install node 2. Learn React Native 3. create-react-native-app 4. Done 6
- 7. Let’s dive 7
- 8. Simple start $ brew install node 8
- 9. Simple start $ brew install node $ npm install -g create-react-native-app 9
- 10. Simple start $ brew install node $ npm install -g create-react-native-app $ create-react-native-app github 10
- 11. Simple start $ brew install node $ npm install -g create-react-native-app $ create-react-native-app github $ cd github 11
- 12. Simple start $ brew install node $ npm install -g create-react-native-app $ create-react-native-app github $ cd github $ npm start 12
- 13. What we get $ ls -l 13
- 14. What have we got $ ls -l App.js App.test.js README.md app.json node_modules package.json 14
- 15. App.js import React from 'react'; import { Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Hello, world!</Text> </View> ); } } 15
- 16. 16
- 17. App.js import React from 'react'; 17
- 18. App.js import React from 'react’; import { Text, View } from 'react-native'; 18
- 19. App.js import React from 'react’; import { Text, View } from 'react-native’; export default class App extends React.Component { } 19
- 20. App.js import React from 'react’; import { Text, View } from 'react-native’; export default class App extends React.Component { render() { } } 20
- 21. App.js import React from 'react’; import { Text, View } from 'react-native’; export default class App extends React.Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Hello, world!</Text> </View> ); } } 21
- 22. App.js import React from 'react'; import { Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Hello, world!</Text> </View> ); } } 22
- 23. App.js <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <View style={styles.container}> 23
- 24. App.js return ( <View style={styles.container}> … </View> ); … const styles = { container: { flex: 1, justifyContent: 'center', alignItems: 'center' } }; 24
- 25. App.js <Text style={{ color: '#F00' }}> Hello, world! </Text> 25
- 27. How? 1. React page is a component tree 2. Each piece of UI should be a component 27
- 28. 4 main components 1. Logo 2. Inputs 3. Submit button 4. Optional message 28
- 29. Logo component import React from 'react'; import {Image, View} from "react-native"; export default Logo = () => ( <View style={{alignItems: 'center'}}> <Image source={require('./../../../GitHub-Logo.png')} /> </View> ); 29
- 30. Logo component export default Logo = () => ( … ); 30
- 31. Components can be 1. Functional - no lifecycle, no state, only JSX 2. Class based - lifecycle, state, usage in redux, etc. 31
- 32. Logo component export default Logo = () => ( <View style={{alignItems: 'center'}}> <Image source={require('./../../../GitHub-Logo.png')} /> </View> ); 32
- 33. 33
- 34. Login inputs 1. Render login input 2. Render password input(as hidden) 3. Pass somehow login and password to submit function 34
- 35. Login inputs import React from 'react'; import {View} from ‘react-native’; import {FormInput} from 'react-native-elements'; export default LoginInputs = ({ onChangeValue }) => ( <View style={{ margin: 16 }}> <FormInput placeholder='login' onChangeText={(value) => { onChangeValue('login', value); }} /> <FormInput secureTextEntry placeholder='password' onChangeText={(value) => { onChangeValue('password', value); }} /> </View> ); 35
- 36. Login inputs import React from 'react'; import {View} from ‘react-native’; import {FormInput} from 'react-native-elements'; 36
- 37. Login inputs import React from 'react'; import {View} from ‘react-native’; import {FormInput} from 'react-native-elements’; 37
- 38. Login inputs import React from 'react’; import {View} from ‘react-native’; import {FormInput} from 'react-native-elements’; 38
- 39. Login inputs export default LoginInputs = ({ onChangeValue }) => ( <View style={{ margin: 16 }}> <FormInput placeholder='login' onChangeText={(value) => { onChangeValue('login', value); }} /> <FormInput secureTextEntry placeholder='password' onChangeText={(value) => { onChangeValue('password', value); }} /> </View> ); 39
- 40. Login inputs export default LoginInputs = ({ onChangeValue }) => ( … ); 40
- 41. Login inputs export default LoginInputs = ({ onChangeValue }) => ( <View style={{ margin: 16 }}> <FormInput placeholder='login' onChangeText={(value) => { onChangeValue('login', value); }} /> <FormInput secureTextEntry placeholder='password' onChangeText={(value) => { onChangeValue('password', value); }} /> </View>); ); 41
- 42. Login inputs export default LoginInputs = ({ onChangeValue }) => ( <View style={{ margin: 16 }}> { … } </View>); ); 42
- 43. Login inputs <View style={{ margin: 16 }}> <FormInput placeholder='login' onChangeText={(value) => { onChangeValue('login', value); }} /> <FormInput secureTextEntry placeholder='password' onChangeText={(value) => { onChangeValue('password', value); }} /> </View>); 43
- 44. Login inputs <View style={{ margin: 16 }}> <FormInput placeholder='login' onChangeText={(value) => { onChangeValue('login', value); }} /> <FormInput /> </View>); 44
- 45. Login inputs <View style={{ margin: 16 }}> <FormInput /> <FormInput secureTextEntry placeholder='password' onChangeText={(value) => { onChangeValue('password', value); }} /> </View>); 45
- 46. LoginScreen.js render() { const {container} = styles; return ( <View style={container}> <Logo /> <LoginInputs …/> </View> ) } 46
- 47. 47
- 49. Component state 1. Each class based component has state 2. State is no more than a javascript object 3. Updating state is async, but this is not really important now 4. Updating state happens with this.setState() function 49
- 50. Saving login and password to screen state … class LoginScreen extends Component { state = { error: null }; … } 50
- 51. Saving login and password to screen state … class LoginScreen extends Component { state = { error: null }; onChangeValue = (prop, value) => { this.setState({ [prop]: value }); }; … } 51
- 52. Saving login and password to screen state { login: ‘v’ } { login: ‘vl’ } { login: ‘vli’ } … { login: ‘vlivanov’, password: ’1’ } { login: ‘vlivanov’, password: ’12’ } … { login: ‘vlivanov’, password: ’123abc123’ } 52
- 54. LoginScreen.js render() { return ( <View style={container}> <Logo /> <LoginInputs onChangeValue={…}/> <Button … /> </View> ) } 54
- 55. 55
- 57. Submit button doLogin = async () => { const { login, password } = this.state; let result = await loginAsync(login, password); this.setState({ loggedIn: result.error === undefined, error: result.error }); }; 57
- 58. Submit button doLogin = async () => { const { login, password } = this.state; … }; 58
- 59. Submit button doLogin = async () => { const { login, password } = this.state; let result = await loginAsync(login, password); … }; 59
- 60. Submit button doLogin = async () => { const { login, password } = this.state; let result = await loginAsync(login, password); this.setState({ loggedIn: result.error === undefined, error: result.error }); }; 60
- 61. loginAsync export const loginAsync = async (login, password) => { let base64 = encode(`${login}:${password}`); try { let result = await fetch('https://api.github.com/user', { method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': 'Basic ' + base64 }, }); if (result.status === 200) { return { user: JSON.parse(result._bodyInit), auth: base64 }; } else { return { error: `Failed to login with ${result.status}` }; } } catch (error) { console.log("[LoginActions] error = " + JSON.stringify(error)); return { error: `Failed to login with ${result.error}` }; } }; 61
- 62. loginAsync export const loginAsync = async (login, password) => { let base64 = encode(`${login}:${password}`); … }; 62
- 63. loginAsync export const loginAsync = async (login, password) => { let base64 = encode(`${login}:${password}`); try { let result = await fetch('https://api.github.com/user', …); … } catch (error) { … } }; 63
- 64. loginAsync export const loginAsync = async (login, password) => { let base64 = encode(`${login}:${password}`); try { let result = await fetch('https://api.github.com/user', { method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': 'Basic ' + base64 }, }); … } catch (error) { … } }; 64
- 65. loginAsync export const loginAsync = async (login, password) => { let base64 = … try { let result = await fetch('https://api.github.com/user', …); if (result.status === 200) { return { user: JSON.parse(result._bodyInit), auth: base64 }; } … } catch (error) { … } }; 65
- 66. loginAsync export const loginAsync = async (login, password) => { let base64 = …; try { let result = await fetch('https://api.github.com/user', …); if (result.status === 200) { return { … } } else { return { error: `Failed to login with ${result.status}` }; } } catch (error) { return { error: `Failed to login with ${error}` }; } }; 66
- 67. LoginScreen.js render() { const {container, successMessage, errorMessage} = styles; return ( <View style={container}> <Logo /> <LoginInputs …/> <Button … /> {this.state.loggedIn && <Text style={successMessage}>Logged in!</Text>} {this.state.error && <Text style={errorMessage}>{this.state.error}</Text>} </View> ) } 67
- 68. doLogin doLogin = async () => { const { login, password } = this.state; let result = await loginAsync(login, password); this.setState({ loggedIn: result.error === undefined, error: result.error }); }; 68
- 69. 69
- 70. Немного статистики — 153 строки — 1 Час времени разработки 70
- 71. Полезные ссылки — https://facebook.github.io/react-native/docs/getting- started.html — https://www.udemy.com/the-complete-react-native- and-redux-course/ — https://expo.io — https://css-tricks.com/snippets/css/a-guide-to- flexbox/ 71
- 72. Вопросы? 72