<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ReactDallas/pen/gwOAzK?limit=all&page=4&q=uikit" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.3.0/css/reveal.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/zenburn.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.3.0/css/theme/black.min.css'>
<style class="cp-pen-styles">body {
background: -webkit-radial-gradient(center ellipse, #46536a 0%, #28354a 30%, #0f1623 70%);
background: radial-gradient(ellipse at center, #46536a 0%, #28354a 30%, #0f1623 70%);
}
.inline {
display: inline-block;
}
.cont {
font-size: .5em !important;
display: inline-block;
padding: 0 10px !important;
position: relative;
top: -5px;
}
h8 {
font-size: .7em;
}
h1 {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15) !important;
}
.reveal p {
font-size: 1.2em;
line-height: 1.3em;
}
.reveal p.shadow {
margin-top: 100px;
text-shadow: 2px 2px 6px #000;
}
.reveal p small {
font-size: .8em;
color: rgba(0, 0, 0, 0.6);
margin: 50px;
}
.reveal .slide-number {
color: #fff;
}
.reveal .controls div.navigate-left {
border-right-color: #5e769e !important;
}
.reveal .controls div.navigate-right {
border-left-color: #5e769e !important;
}
.reveal .controls div.navigate-down {
border-top-color: #5e769e !important;
}
.reveal .controls div.navigate-up {
border-bottom-color: #5e769e !important;
}
img {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
</style></head><body>
<div class="reveal white">
<div class="slides">
<section>
<h1><img src="http://www.reactdallas.org/img/react.png" style="width: 40vh; max-width: 25vw" /><br -/>React Native</h1>
<h4>Shawn Khameneh<br /><a href="http://ReactDallas.org">ReactDallas.org</a></h4>
</section>
<section>
<section>
<h1>iPhone, Android, Ubuntu</h1>
<hr />
<h4>Cross-platform Apps for any platform</h4>
<hr />
<h2>The JavaScript of React, bundled with native UI elements</h2>
</section>
<section>
<h1>Native Code</h1>
<hr />
<h2>Driven by JavaScript!</h2>
</section>
</section>
<section>
<section>
<h1>Native = No DOM!</h1>
<p class="fragment fade-right">Native components, powered by JSX</p>
<p class="fragment fade-right">JSX is a JavaScript syntax extension that looks similar to XML</p>
</section>
<section>
<h1>React Native</h1>
<hr />
<h3>
<div class="inline fragment fade-right">ReactJS</div>
<div class="inline fragment fade-right"> - DOM</div>
<div class="inline fragment fade-right"> + Native Imports</div>
</h3>
</section>
</section>
<section
data-background="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/Art/windowlayers_world_clock_2x.png"
data-background-size="50%"
data-background-position="center 20px"
>
<p class='shadow' style="background: rgba(15,22,35,.9); padding: 20px; border-radius: 20px">“I say with confidence as a former UIKit author: React's model for the UI layer is vastly better than UIKit's. React Native is a *huge* deal.”<br/>
<q>- Andy Matuschak<br /><small style="color: #fff">Former UIKit Developer, Apple</small></q>
</p>
</section>
<section>
<section>
<h1>React Native Tutorial App</h1>
</section>
<section>
<h2>Hello World</h2>
<pre><code class="javascript">
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
</pre></code>
<h8>From <a hreh="https://facebook.github.io/react-native/docs/tutorial.html">https://facebook.github.io/react-native/docs/tutorial.html</a></h8>
</section>
<section>
<h2>ES2015, JavaScript Next</h2>
<p>Arrow Functions: ()=>{}</p>
<p>Classes: class MyComponent {}</p>
<p>const, let: const fixedValue = 'value'</p>
<p>Spread Operators: {...obj}</p>
<p>Object Literals, etc...</p>
</section>
<section>
<h1>Learn ES2015</h1>
<hr />
<h3><a href="https://babeljs.io/docs/learn-es2015/">https://babeljs.io/docs/learn-es2015/</a></h3>
</section>
<section>
<h2>Hello World... Again</h2>
<pre><code class="javascript">
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
</pre></code>
<h8>From <a hreh="https://facebook.github.io/react-native/docs/tutorial.html">https://facebook.github.io/react-native/docs/tutorial.html</a></h8>
</section>
</section>
<section>
<h1>React Native Playground</h1>
<hr />
<h4>Make apps in your browser</h4>
<hr />
<h2>RNPlay.org is an online IDE with virtualized devices powered by appetize.io</h2>
</section>
<section>
<h1>Slider Example</h1>
<a target="_blank" href="https://rnplay.org/apps/5FsfPA">https://rnplay.org/apps/5FsfPA</a>
</section>
<section>
<h1>Thank You!</h1>
<p>ReactDallas.org</p>
<p>@ReactDallasOrg</p>
<p>Meetup.com/ReactDallas</p>
<p>CodePen.io/ReactDallas</p>
<br /><br />
<a target="_blank" href="https://rnplay.org/apps/5FsfPA">https://rnplay.org/apps/5FsfPA</a>
</section>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/languages/javascript.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/reveal.js/3.3.0/lib/js/head.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/reveal.js/3.3.0/js/reveal.min.js'></script>
<script >hljs.initHighlightingOnLoad()
Reveal.initialize({
slideNumber: true,
history:true,
});
//# sourceURL=pen.js
</script>
</body></html>
