Scribd
Upload
27 views12 pages

Hybrid - 02 - React Native

The document discusses React Native, a framework for building mobile apps using React. It provides an overview of React Native, the installation process using Expo or CLI, creating a basic project, using TypeScript with React Native, and building a simple component. React Native allows building native mobile apps using React and JavaScript.

Uploaded by

Thể Phan Thị
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
27 views12 pages

Hybrid - 02 - React Native

The document discusses React Native, a framework for building mobile apps using React. It provides an overview of React Native, the installation process using Expo or CLI, creating a basic project, using TypeScript with React Native, and building a simple component. React Native allows building native mobile apps using React and JavaScript.

Uploaded by

Thể Phan Thị
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

1

Hybrid Mobile
Applications -
ICD0018
TalTech IT College, Andres Käver, 2019-2020, Fall semester
Web: http://enos.Itcollege.ee/~akaver/HybridMobile
Skype: akaver Email: [email protected]
React Native 2
React N 3

 Initial release: 2015


 Facebook and community
 Open source project - https://github.com/facebook/react-native
 Under active development, release branch every two weeks
 Currently ver 0.6X
React N 4

 React Native is like React, but it uses native components instead of web
components as building blocks.

 UI is rendered using platform native components - buttons, lists, navigation view,


etc.

 Uses the same concepts, as React – JSX, components, state, props.

 Main language is JS – ES2015/ES6


React N – Hello, world! 5
React N – installation 6

 Two ways to start development – Expo or CLI


 Expo – more handholding, less components, less possibilities, for newcomers.
Requires only Node.
 CLI – full experience, somewhat complicated. Requires lots of external tooling.
React N - CLI 7

 macOS
 Node, Watchman, CLI, JDK, Android Studio, Xcode for iOS
 Windows
 Node, CLI, Python2, JDK, Android Studio
 Linux
 Node, CLI, JDK, Android Studio

 Find exact instructions at


 https://facebook.github.io/react-native/docs/getting-started
React N – First Project 8

 Init project

>react-native init RNTest01

 Run it

>cd RNTest01
>react-native run-android
React N - IDE 9

 VS Studio Code
 React Native Tools

https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

https://github.com/microsoft/vscode-react-native

 React-Native/React/Redux snippets for es6/es7


https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-re
dux
React N - TypeScript 10

 Lets create a project:

react-native init RNTest02 --template typescript

 https://devblogs.microsoft.com/typescript/typescript-and-babel-7/
 https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-reac
t-native
React N – Basic TS app 11

import React from 'react';

import { Hello } from './components/Hello';

const App = () => {


return (
<Hello name="Andres"></Hello>
);
};

export default App;


React N - component 12
import React from 'react'; const styles = StyleSheet.create({
import { StyleSheet, Text, View } from 'react-native'; root: {
flex: 1,
export interface Props { justifyContent: "center",
name: string; alignItems: "center"
} },
greeting: {
export class Hello extends React.Component<Props> { color: '#999',
constructor(props: Props) { fontWeight: 'bold',
super(props); },
} });

render() {
return (
<View style={styles.root}>
<Text style={styles.greeting}>
Hello, {this.props.name}
</Text>
</View>
);
}
}

You might also like