Backfill with React Native posts from code.facebook.com

Summary:
Adding links to related posts from Facebook Code
Closes https://github.com/facebook/react-native/pull/14666

Differential Revision: D5296691

Pulled By: hramos

fbshipit-source-id: cbd3d2349b162268fcbc7478d8a083ccd6e5154a
This commit is contained in:
Hector Ramos 2017-06-21 15:50:15 -07:00 committed by Facebook Github Bot
parent 31fe832d04
commit 4f74b752df
9 changed files with 110 additions and 1 deletions

View File

@ -0,0 +1,22 @@
---
title: React Native: Bringing modern web techniques to mobile
author: Tom Occhino
authorTitle: Engineering Manager at Facebook
authorURL: https://github.com/tomocchino
authorImage: https://avatars0.githubusercontent.com/u/13947?v=3&s=460
authorTwitter: tomocchino
hero: /react-native/blog/img/dark-hero.png
category: announcements
---
We introduced [React](https://code.facebook.com/projects/176988925806765/react/) to the world two years ago, and since then it's seen impressive growth, both inside and outside of Facebook. Today, even though no one is forced to use it, new web projects at Facebook are commonly built using React in one form or another, and it's being broadly adopted across the industry. Engineers are choosing to use React every day because it enables them to spend more time focusing on their products and less time fighting with their framework. It wasn't until we'd been building with React for a while, though, that we started to understand what makes it so powerful.
React forces us to break our applications down into discrete components, each representing a single view. These components make it easier to iterate on our products, since we don't need to keep the entire system in our head in order to make changes to one part of it. More important, though, React wraps the DOM's mutative, imperative API with a declarative one, which raises the level of abstraction and simplifies the programming model. What we've found is that when we build with React, our code is a lot more predictable. This predictability makes it so we can iterate more quickly with confidence, and our applications are a lot more reliable as a result. Additionally, it's not only easier to scale our applications when they're built with React, but we've found it's also easier to scale the size of our teams themselves.
Together with the rapid iteration cycle of the web, we've been able to build some awesome products with React, including many components of Facebook.com. Additionally, we've built amazing frameworks in JavaScript on top of React, like [Relay](https://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html), which allows us to greatly simplify our data fetching at scale. Of course, web is only part of the story. Facebook also has widely used Android and iOS apps, which are built on top of disjointed, proprietary technology stacks. Having to build our apps on top of multiple platforms has bifurcated our engineering organization, but that's only one of the things that makes native mobile application development hard.
<footer>
<a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/" class="btn">Read more</a>
</footer>
> This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/).

View File

@ -0,0 +1,19 @@
---
title: React Native for Android: How we built the first cross-platform React Native app
author: Daniel Witte
authorTitle: Software Engineer at Facebook
authorURL: https://www.facebook.com/drwitte
authorImage: https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c54.54.681.681/s160x160/20622_10100459314481893_1435252658_n.jpg?_nc_log=1&oh=7afdb6aaa02f320c4dd4749733140133&oe=59D77C28
hero: /react-native/blog/img/blue-hero.jpg
category: announcements
---
Earlier this year, we introduced [React Native for iOS](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/). React Native brings what developers are used to from React on the web — declarative self-contained UI components and fast development cycles — to the mobile platform, while retaining the speed, fidelity, and feel of native applications. Today, we're happy to release React Native for Android.
At Facebook we've been using React Native in production for over a year now. Almost exactly a year ago, our team set out to develop the [Ads Manager app](https://www.facebook.com/business/news/ads-manager-app). Our goal was to create a new app to let the millions of people who advertise on Facebook manage their accounts and create new ads on the go. It ended up being not only Facebook's first fully React Native app but also the first cross-platform one. In this post, we'd like to share with you how we built this app, how React Native enabled us to move faster, and the lessons we learned.
<footer>
<a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/" class="btn">Read more</a>
</footer>
> This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/).

View File

@ -0,0 +1,25 @@
---
title: Making React Native apps accessible
author: Georgiy Kassabli
authorTitle: Software Engineer at Facebook
authorURL: https://www.facebook.com/georgiy.kassabli
authorImage: https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c0.0.160.160/p160x160/1978838_795592927136196_1205041943_n.jpg?_nc_log=1&oh=d7a500fdece1250955a4d27b0a80fee2&oe=59E8165A
hero: /react-native/blog/img/blue-hero.jpg
category: engineering
---
With the recent launch of React on web and React Native on mobile, we've provided a new front-end framework for developers to build products. One key aspect of building a robust product is ensuring that anyone can use it, including people who have vision loss or other disabilities. The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired.
For this post, we're going to focus on React Native apps. We've designed the React Accessibility API to look and feel similar to the iOS and Android APIs. If you've developed accessible applications for the web, iOS, or Android before, you should feel comfortable with the framework and nomenclature of the React AX API. For instance, you can make a UI element _accessible_ (therefore exposed to assistive technology) and use _accessibilityLabel_ to provide a string description for the element:
```
<View accessible={true} accessibilityLabel=”This is simple view>
```
Let's walk through a slightly more involved application of the React AX API by looking at one of Facebook's own React-powered products: the **Ads Manager app**.
<footer>
<a href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/" class="btn">Read more</a>
</footer>
> This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/).

View File

@ -5,7 +5,7 @@ authorTitle: Software Engineer at Instagram
authorURL: https://twitter.com/martinbigio
authorImage: https://avatars3.githubusercontent.com/u/535661?v=3&s=128
authorTwitter: martinbigio
category: announcements
category: engineering
---
React Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.

View File

@ -0,0 +1,23 @@
---
title: Dive into React Native Performance
author: Pieter De Baets
authorTitle: Software Engineer at Facebook
authorURL: https://github.com/javache
authorImage: https://avatars1.githubusercontent.com/u/5676?v=3&s=460
authorTwitter: javache
category: engineering
---
React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast.
## Why the hurry?
With an app that runs faster, content loads quickly, which means people get more time to interact with it, and smooth animations make the app enjoyable to use. In emerging markets, where [2011 class phones](https://code.facebook.com/posts/952628711437136/classes-performance-and-network-segmentation-on-android/) on [2G networks](https://newsroom.fb.com/news/2015/10/news-feed-fyi-building-for-all-connectivity/) are the majority, a focus on performance can make the difference between an app that is usable and one that isn't.
Since releasing React Native on [iOS](https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html) and on [Android](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/), we have been improving list view scrolling performance, memory efficiency, UI responsiveness, and app startup time. Startup sets the first impression of an app and stresses all parts of the framework, so it is the most rewarding and challenging problem to tackle.
<footer>
<a href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/" class="btn">Read more</a>
</footer>
> This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/).

View File

@ -0,0 +1,20 @@
---
title: React Native: A year in review
author: Martin Konicek
authorTitle: Software Engineer at Facebook
authorURL: https://github.com/mkonicek
authorImage: https://avatars1.githubusercontent.com/u/346214?v=3&s=460
authorTwitter: martinkonicek
hero: /react-native/blog/img/big-hero.jpg
category: announcements
---
It's been one year since we open-sourced React Native. What started as an idea with a handful of engineers is now a framework being used by product teams across Facebook and beyond. Today at F8 we announced that Microsoft is bringing [React Native to the Windows ecosystem](http://microsoft.github.io/code-push/articles/ReactNativeWindows.html), giving developers the potential to build React Native on Windows PC, Phone, and Xbox. It will also provide open source tools and services such as a React Native extension for Visual Studio Code and CodePush to help developers create React Native apps on the Windows platform. In addition, [Samsung](https://www.tizen.org/blogs) is building React Native for its hybrid platform, which will empower developers to build apps for millions of SmartTVs and mobile and wearable devices. We also released the [Facebook SDK for React Native](https://github.com/facebook/react-native-fbsdk), which makes it easier for developers to incorporate Facebook social features like Login, Sharing, App Analytics, and Graph APIs into their apps. In one year, React Native has changed the way developers build on every major platform.
It's been an epic ride — but we are only getting started. Here is a look back at how React Native has grown and evolved since we open-sourced it a year ago, some challenges we faced along the way, and what we expect as we look ahead to the future.
<footer>
<a href="https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/" class="btn">Read more</a>
</footer>
> This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/).

BIN
blog/img/big-hero.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

BIN
blog/img/blue-hero.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

BIN
blog/img/dark-hero.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB