CINXE.COM

<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>makeitopen.com 路 Building the F8 App</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="makeitopen.com 路 Building the F8 App"/><meta property="og:type" content="website"/><meta property="og:url" content="http://makeitopen.com/index.html"/><meta property="og:description" content="Building the F8 App"/><meta property="og:image" content="/images/f8app-2017-app.png"/><link rel="shortcut icon" href="/images/favicon_junction.png"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-savanna-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="http://makeitopen.com/blog/atom.xml" title="makeitopen.com Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="http://makeitopen.com/blog/feed.xml" title="makeitopen.com Blog RSS Feed"/><link rel="stylesheet" href="/css/main.css"/></head><body><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/images/logo.png"/><h2 class="headerTitle">makeitopen.com</h2></a><a href="/en/versions.html"><h3>2017.1.0.0</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/blog" target="_self">Blog</a></li></ul></nav></div></header></div></div><div class="navPusher"><div><div class="homeContainer"><div class="homeSplash" style="background-image:url('/images/f8_app_splash.png');"><div class="homeSplashFade"><div class="wrapper homeWrapper"><div class="inner"><h2 class="projectTitle">Building the F8 App</h2><div class="section promoSection"><div class="promoRow"><div class="pluginRowBlock"><div class="pluginWrapper buttonWrapper"><a class="button splashButton" href="/docs/en/1-1-planning.html" target="_self">Start Reading</a></div></div></div></div></div></div></div></div></div><div class="mainContainer"><div class="container paddingBottom paddingTop"><div class="wrapper"><p>Every year, as part of the F8 conference, Facebook builds iOS and Android apps that give attendees a schedule for the conference, and let them learn more about the talks and speakers. The apps have also provided reminders for upcoming talks and ad-hoc announcements to attendees.</p><p>We've released the 2017 <a href="https://github.com/fbsamples/f8app/" target="_blank">source code on GitHub</a>, and produced a series of tutorials. These are designed to introduce React Native and its Open Source ecosystem in plain English.</p><div class="featuredImage"><a href="images/Data_Flow.svg" target="_blank"><img src="images/Data_Flow.svg"/></a><a href="images/Development_Environment.svg" target="_blank"><img src="images/Development_Environment.svg"/></a></div><p>This tutorial series is typically updated during the app's development. Elements, such as code samples, will continue to evolve and improve over time after the app has been released. We plan to continue refreshing the app and the related tutorials as part of future F8 conferences.</p><p>Comments and feedback are welcome via <a href="https://github.com/facebook/makeitopen/issues">GitHub issues</a>. The tutorials are designed to be readable individually, but we recommend reading through in sequence.</p></div></div><div class="container paddingBottom"><div class="wrapper"><div class="gridBlock"><div class="blockElement fourByGridBlock"><div class="blockContent"><h4><span>Part 1</span><a href="/docs/en/1-1-planning.html">Planning The App</a></h4><div class="tutorialContent"><div><span><p>In this first part, we're going to talk about how we planned the app, and how and why we picked the stack of technologies to use.</p> </span></div><p><a href="/docs/en/1-1-planning.html">Read More</a></p></div></div></div><div class="blockElement fourByGridBlock"><div class="blockContent"><h4><span>Part 2</span><a href="/docs/en/1-2-design.html">Designing an App for Multiple Platforms</a></h4><div class="tutorialContent"><div><span><p>We talk about how React Native apps should be, and can be, visually tailored for each platform, rather than being identical everywhere.</p> </span></div><p><a href="/docs/en/1-2-design.html">Read More</a></p></div></div></div><div class="blockElement fourByGridBlock"><div class="blockContent"><h4><span>Part 3</span><a href="/docs/en/1-3-data.html">Integrating Data with React Native</a></h4><div class="tutorialContent"><div><span><p>We explain data flow in React Native, how Redux works within the F8 app, and the simple process of connecting Parse Server.</p> </span></div><p><a href="/docs/en/1-3-data.html">Read More</a></p></div></div></div><div class="blockElement fourByGridBlock"><div class="blockContent"><h4><span>Part 4</span><a href="/docs/en/1-4-testing.html">Testing a React Native App</a></h4><div class="tutorialContent"><div><span><p>Explore how you can use Nuclide, Flow, and Jest with React Native to improve the quality of your code as you're writing it.</p> </span></div><p><a href="/docs/en/1-4-testing.html">Read More</a></p></div></div></div></div></div></div><div class="container paddingBottom"><div class="wrapper"><div class="gridBlock"><div class="blockElement fourByGridBlock"><div class="blockContent appendixContent"><h4><span>Appendix I</span><hr/><a href="/docs/en/1-A1-local-setup.html">Running the App Locally</a></h4></div></div><div class="blockElement fourByGridBlock"><div class="blockContent appendixContent"><h4><span>Appendix II</span><hr/><a href="/docs/en/1-A2-relay.html">Using Relay and GraphQL</a></h4></div></div><div class="blockElement fourByGridBlock"><div class="blockContent appendixContent"><h4><span>Appendix III</span><hr/><a href="/docs/en/1-A3-windows.html">Porting the F8 App To Windows</a></h4></div></div><div class="blockElement fourByGridBlock"><div class="blockContent appendixContent"><h4><span>Appendix IV</span><hr/><a href="/docs/en/1-A4-translations.html">Makeitopen in Other Languages</a></h4></div></div></div></div></div></div><div class="featuredContainer"><div class="container paddingBottom"><div class="wrapper"><div class="featuredTech"><h2 class="blockHeader">Featured In This Series</h2><div class="features"><div class="featuredGroup"><h3>Core</h3><ul><li><a href="http://facebook.github.io/react/" target="_blank">React</a></li><li><a href="http://facebook.github.io/react-native/" target="_blank">React Native</a></li></ul></div><div class="featuredGroup"><h3>Data</h3><ul><li><a href="http://facebook.github.io/flux/" target="_blank">Flux</a></li><li><a href="http://graphql.org/" target="_blank">GraphQL</a></li><li><a href="http://facebook.github.io/relay/" target="_blank">Relay</a></li><li><a href="http://redux.js.org/" target="_blank">Redux</a></li></ul></div><div class="featuredGroup"><h3>Tools</h3><ul><li><a href="http://flowtype.org/" target="_blank">Flow</a></li><li><a href="http://facebook.github.io/jest/" target="_blank">Jest</a></li><li><a href="http://nuclide.io/" target="_blank">Nuclide</a></li></ul></div><div class="featuredGroup"><h3>Parse</h3><ul><li><a href="https://github.com/ParsePlatform/parse-server" target="_blank">Parse Server</a></li><li><a href="https://github.com/ParsePlatform/parse-dashboard" target="_blank">Parse Dashboard</a></li></ul></div></div></div></div></div></div></div><div class="footerContainer"><div id="footer_wrap" class="wrapper footerWrapper"><div class="footerBlocks"><div id="fb_oss" class="footerSection fbOpenSourceFooter"><svg class="facebookOSSLogoSvg" viewBox="0 0 1133.9 1133.9" x="0px" y="0px"><g><path class="logoRing outerRing" d="M 498.3 3.7 c 153.6 88.9 307.3 177.7 461.1 266.2 c 7.6 4.4 10.3 9.1 10.3 17.8 c -0.3 179.1 -0.2 358.3 0 537.4 c 0 8.1 -2.4 12.8 -9.7 17.1 c -154.5 88.9 -308.8 178.1 -462.9 267.5 c -9 5.2 -15.5 5.3 -24.6 0.1 c -153.9 -89.2 -307.9 -178 -462.1 -266.8 C 3 838.8 0 833.9 0 825.1 c 0.3 -179.1 0.2 -358.3 0 -537.4 c 0 -8.6 2.6 -13.6 10.2 -18 C 164.4 180.9 318.4 92 472.4 3 C 477 -1.5 494.3 -0.7 498.3 3.7 Z M 48.8 555.3 c 0 79.9 0.2 159.9 -0.2 239.8 c -0.1 10 3 15.6 11.7 20.6 c 137.2 78.8 274.2 157.8 411 237.3 c 9.9 5.7 17 5.7 26.8 0.1 c 137.5 -79.8 275.2 -159.2 412.9 -238.5 c 7.4 -4.3 10.5 -8.9 10.5 -17.8 c -0.3 -160.2 -0.3 -320.5 0 -480.7 c 0 -8.8 -2.8 -13.6 -10.3 -18 C 772.1 218 633.1 137.8 494.2 57.4 c -6.5 -3.8 -11.5 -4.5 -18.5 -0.5 C 336.8 137.4 197.9 217.7 58.8 297.7 c -7.7 4.4 -10.2 9.2 -10.2 17.9 C 48.9 395.5 48.8 475.4 48.8 555.3 Z"></path><path class="logoRing middleRing" d="M 184.4 555.9 c 0 -33.3 -1 -66.7 0.3 -100 c 1.9 -48 24.1 -86 64.7 -110.9 c 54.8 -33.6 110.7 -65.5 167 -96.6 c 45.7 -25.2 92.9 -24.7 138.6 1 c 54.4 30.6 108.7 61.5 162.2 93.7 c 44 26.5 67.3 66.8 68 118.4 c 0.9 63.2 0.9 126.5 0 189.7 c -0.7 50.6 -23.4 90.7 -66.6 116.9 c -55 33.4 -110.8 65.4 -167.1 96.5 c -43.4 24 -89 24.2 -132.3 0.5 c -57.5 -31.3 -114.2 -64 -170 -98.3 c -41 -25.1 -62.9 -63.7 -64.5 -112.2 C 183.5 621.9 184.3 588.9 184.4 555.9 Z M 232.9 556.3 c 0 29.5 0.5 59.1 -0.1 88.6 c -0.8 39.2 16.9 67.1 50.2 86.2 c 51.2 29.4 102.2 59.2 153.4 88.4 c 31.4 17.9 63.6 18.3 95 0.6 c 53.7 -30.3 107.1 -61.2 160.3 -92.5 c 29.7 -17.5 45 -44.5 45.3 -78.8 c 0.6 -61.7 0.5 -123.5 0 -185.2 c -0.3 -34.4 -15.3 -61.5 -44.9 -79 C 637.7 352.6 583 320.8 527.9 290 c -27.5 -15.4 -57.2 -16.1 -84.7 -0.7 c -56.9 31.6 -113.4 64 -169.1 97.6 c -26.4 15.9 -40.7 41.3 -41.1 72.9 C 232.6 491.9 232.9 524.1 232.9 556.3 Z"></path><path class="logoRing innerRing" d="M 484.9 424.4 c 69.8 -2.8 133.2 57.8 132.6 132 C 617 630 558.5 688.7 484.9 689.1 c -75.1 0.4 -132.6 -63.6 -132.7 -132.7 C 352.1 485 413.4 421.5 484.9 424.4 Z M 401.3 556.7 c -3.4 37.2 30.5 83.6 83 84.1 c 46.6 0.4 84.8 -37.6 84.9 -84 c 0.1 -46.6 -37.2 -84.4 -84.2 -84.6 C 432.2 472.1 397.9 518.3 401.3 556.7 Z"></path></g></svg><h2>Facebook Open Source</h2></div><div class="footerSection rightAlign"><a class="footerLink" href="https://code.facebook.com/projects/" target="_blank">Open Source Projects</a><a class="footerLink" href="https://github.com/facebook/" target="_blank">GitHub</a><a class="footerLink" href="https://twitter.com/fbOpenSource" target="_blank">Twitter</a><a class="footerLink" href="https://github.com/facebook/makeitopen/" target="_blank">Contribute on GitHub</a></div></div></div></div></div><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-44373548-14', 'auto'); ga('send', 'pageview'); </script></body></html>