React Native: Difference between revisions
Jump to navigation
Jump to search
Created page with "=Introduction= ==Why== *True native app *Performance is great *Easy to learn *Shared across platforms *Good community ==Components *React uses components to build apps *React..." |
No edit summary |
||
Line 21: | Line 21: | ||
npx create-react-native-app globo | npx create-react-native-app globo | ||
expo start | expo start | ||
</syntaxhighlight> | |||
==Sample App.js== | |||
This is not much different to java and Xamarin. | |||
<br> | |||
App.js | |||
<syntaxhighlight lang="js"> | |||
import React from 'react'; | |||
import Home from './app/views/Home.js' | |||
export default class App extends React.Component { | |||
render() { | |||
return ( | |||
<Home /> | |||
) | |||
} | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
App.js | |||
<syntaxhighlight lang="js"> | |||
import React from "react"; | |||
import { Text, View } from "react-native"; | |||
export default class Home extends React.Component { | |||
render() { | |||
return ( | |||
<View> | |||
<Text>This will be the homepage</Text> | |||
<Text>These other lines are here</Text> | |||
<Text>So you are not mad</Text> | |||
</View> | |||
) | |||
} | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> |
Revision as of 22:27, 10 December 2020
Introduction
Why
- True native app
- Performance is great
- Easy to learn
- Shared across platforms
- Good community
==Components
- React uses components to build apps
- React Native has many components
- Including translate features
Installation
sudo npm i -g react-native-cli
sudo npm i -g create-react-native
Create Project
Note ignite is a useful tool for creating components in react-native
react-native init reactiveNativeCLI
npx create-react-native-app globo
expo start
Sample App.js
This is not much different to java and Xamarin.
App.js
import React from 'react';
import Home from './app/views/Home.js'
export default class App extends React.Component {
render() {
return (
<Home />
)
}
}
App.js
import React from "react";
import { Text, View } from "react-native";
export default class Home extends React.Component {
render() {
return (
<View>
<Text>This will be the homepage</Text>
<Text>These other lines are here</Text>
<Text>So you are not mad</Text>
</View>
)
}
}