Nader Dabit
Teaching and building apps using React and React Native
Nader Dabit
Framework for building Native Mobile Apps using JavaScript
<div>
<p>Hello World</p>
</div>
<View>
<Text>Hello World</Text>
</View>
HTML
React Native
HTML | React Native
<div> == <View>
<p> || <span> == <Text>
<button> == <TouchableHighlight>
<img /> == <Image />
<input /> == <TextInput />
import React from "react"
class SomeComponent extends React.Component {
render () {
return (
<div>
<p>Hello World</p>
</div>
)
}
}
React
import React from "react"
import { View, Text } from "react-native"
class SomeComponent extends React.Component {
render () {
return (
<View>
<Text>Hello World</Text>
</View>
)
}
}
React Native
import { Button, SocialIcon } from "react-native-elements"
<Button
title="Button" />
<SocialIcon
type="facebook" />
Pros
Cons
Can currently target Android, iOS and Windows
In development to target MacOS, Web, Tizen
Compiles this:
<div>
<span>Hello World</span>
</Div>
To this:
<View>
<Text>Hello World</Text>
</View>
Fundamental changes in the way future engineered teams are designed and organized.
Cross stack engineering is an opportunity that is blossoming with React Native
- James Ide, Engineer at Expo
Team × Technology React Conf 2016
Because Native development is becoming more and more expensive, engineers who can deliver applications across platforms and stacks will become extremely valuable and in demand.
Main stumbling blocks
Routing / Navigation
Routing - React
import {
BrowserRouter as Router,
Route,
Switch,
Redirect
} from 'react-router-dom'
const App = () => (
<Router>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<Switch>
<Route exactly pattern="/" component={Home} />
<Route pattern="/about" component={About} />
<Route pattern="/topics" component={Topics} />
<Route component={NoMatch}/>
</Switch>
</Router>
)
Routing / Navigation - Angular 2
const appRoutes: Routes = [
{ path: 'home', component: Home },
]
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
// other imports here
],
...
})
// HTML
<h1>Angular Router</h1>
<nav>
<a routerLink="/" routerLinkActive="active">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>
</nav>
<router-outlet></router-outlet>
Routing / Navigation - Vue
const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const routes = {
'/': Home,
'/about': About
}
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
computed: {
ViewComponent () {
return routes[this.currentRoute] || NotFound
}
},
render (h) { return h(this.ViewComponent) }
})
import React from 'react';
import {
Text,
View,
Button,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import AboutScreen from './AboutScreen'
class App extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello!!</Text>
<Button
onPress={() => navigate('About')}
title="Chat with Lucy"
/>
</View>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
About: { screen: AboutScreen },
});
export default SimpleApp
Routing / Navigation - React-Navigation
Navigation - Getting Started
Explore different router Apis, choose one that makes sense to you
Styling React Native
// css
.header {
width: 100%;
background-color: red
}
// html
<div class="header" />
// styles variable
styles = {
header: {
width '100%',
backgroundColor: 'red'
}
}
// style
<div style={styles.header} />
// styles variable
styles = StyleSheet.create({
header: {
width '100%',
backgroundColor: 'red'
}
})
// style
<View style={styles.header} />
In web development, we reuse classes:
// css
.button {
background-color: blue;
}
// html
<div>
<button class='button'>Button1</button>
<button class='button'>Button1</button>
<button class='button'>Button1</button>
</div>
In React / React Native, we reuse components:
import React from 'react'
import { View, TouchableHighlight, Text } from 'react-native'
const Button = () => (
<TouchableHighlight style={styles.button}>
<Text style={styles.buttonText}>Hello World</Text>
</TouchableHighlight>
)
class Home extends React.Component {
render () {
return (
<View>
<Button />
<Button />
<Button />
</View>
)
}
}
// Images (component)
import { Image } from 'react-native'
<Image
source={require('./img/favicon.png')}
/>
<Image
source={{ uri: 'http://www.myimage.com' }}
/>
// Alert (API)
import { Alert } from 'react-native'
Alert.alert('Alert Title', 'Alert Msg')
console.{log, warn, error, info, trace, table}
CommonJS require
XMLHttpRequest, fetch
{set, clear} {Timeout, Interval, Immediate}, {request, cancel}
AnimationFrame
navigator.geolocation
Get a quick start by using UI Libraries, like bootstrap for the web.
React Native Elements
Get a quick start by using UI Libraries, like bootstrap for the web.
React Native Material Design
Get a quick start by using UI Libraries, like bootstrap for the web.
Shoutem UI
Have node installed, then:
npm install -g react-native-cli
react-native init ProjectName
cd ProjectName
react-native run-ios
react-native run-android
Writing an Expo app is like writing a React Native app, except you never need to open Xcode / Android Studio
Entire environment is installed for you, with exception of Simulators
Getting Started
Creating New Project with Expo
Working with New Project in Expo
Working with New Project in Expo
Working with New Project in Expo
create-react-native-app
Expo - Sketch
github - twitter - medium
By Nader Dabit
KnowJS Wroclaw