"react native"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: