<div> == <View>
<p> || <span> == <Text>
<button> == <TouchableHighlight>
<img /> == <Image />
<input /> == <TextInput />
import React, { Component } from 'react';
class SomeComponent extends Component {
render () {
return (
<div>
<p>Hello World</p>
</div>
)
}
}
React (web)
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class SomeComponent extends Component {
render () {
return (
<View>
<Text>Hello World</Text>
</View>
)
}
}
React Native (mobile)
class MyComponent extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
AppRegistry.registerComponent('MyComponent', () => MyComponent);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
fetch('https://myapi.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
});
John Machahuay