Update README (#23779)

Summary:
Clean up and make the README look a bit nicer. Inspired by https://github.com/gatsbyjs/gatsby/blob/master/README.md.

This PR brings back an introduction to React Native that focuses on our strengths. I'm happy to punt updates to the marketing copy for later, if we want to focus on updating the README layout first.

![readme](https://user-images.githubusercontent.com/165856/53846592-59f3b700-3f62-11e9-95cf-4391c74460f4.png)

[General][Changed] - Nicer README.
Pull Request resolved: https://github.com/facebook/react-native/pull/23779

Differential Revision: D14341562

Pulled By: hramos

fbshipit-source-id: 87dba4fe4e3598f638fdc499347a2c9aedde8f8d
This commit is contained in:
Héctor Ramos 2019-03-06 06:17:05 -08:00 committed by Facebook Github Bot
parent fe80a0c01d
commit ea8571b0eb

153
README.md
View File

@ -1,58 +1,147 @@
# [React Native](https://facebook.github.io/react-native/) · [![Circle CI Status](https://circleci.com/gh/facebook/react-native.svg?style=shield)](https://circleci.com/gh/facebook/react-native) [![Build status](https://ci.appveyor.com/api/projects/status/g8d58ipi3auqdtrk/branch/master?svg=true)](https://ci.appveyor.com/project/facebook/react-native/branch/master) [![npm version](https://badge.fury.io/js/react-native.svg)](https://badge.fury.io/js/react-native) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
<h1 align="center">
<a href="https://facebook.github.io/react-native/">
React Native
</a>
</h1>
Learn once, write anywhere: Build mobile apps with React.
<p align="center">
<strong>Learn once, write anywhere:</strong><br>
Build mobile apps with React.
</p>
See the official [React Native website](https://facebook.github.io/react-native/) for an introduction to React Native.
<p align="center">
<a href="https://github.com/facebook/react-native/blob/master/LICENSE">
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="React Native is released under the MIT license." />
</a>
<a href="https://circleci.com/gh/facebook/react-native">
<img src="https://circleci.com/gh/facebook/react-native.svg?style=shield" alt="Current CircleCI build status." />
</a>
<a href="https://ci.appveyor.com/project/facebook/react-native/branch/master">
<img src="https://ci.appveyor.com/api/projects/status/g8d58ipi3auqdtrk/branch/master?svg=true" alt="Current Appveyor build status." />
</a>
<a href="https://www.npmjs.org/package/react-native">
<img src="https://badge.fury.io/js/react-native.svg" alt="Current npm package version." />
</a>
<a href="https://facebook.github.io/react-native/docs/contributing">
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
</a>
<a href="https://twitter.com/intent/follow?screen_name=reactnative">
<img src="https://img.shields.io/twitter/follow/reactnative.svg?label=Follow%20@reactnative" alt="Follow @reactnative" />
</a>
</p>
<h3 align="center">
<a href="https://facebook.github.io/react-native/docs/getting-started">Getting Started</a>
<span> · </span>
<a href="https://facebook.github.io/react-native/docs/tutorial">Learn the Basics</a>
<span> · </span>
<a href="https://facebook.github.io/react-native/showcase.html">Showcase</a>
<span> · </span>
<a href="https://facebook.github.io/react-native/docs/contributing">Contribute</a>
<span> · </span>
<a href="https://facebook.github.io/react-native/en/help">Community</a>
<span> · </span>
<a href="https://github.com/facebook/react-native/blob/master/.github/SUPPORT">Support</a>
</h3>
React Native brings [**React**'s][r] declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.
- **Declarative.** React makes it painless to create interactive UIs. Declarative views make your code more predictable and easier to debug.
- **Component-Based.** Build encapsulated components that manage their own state, then compose them to make complex UIs.
- **Developer Velocity.** See local changes in seconds. Changes to JavaScript code can be live reloaded without rebuilding the native app.
- **Portability.** Reuse code across iOS, Android, and [other platforms][p].
[r]: https://reactjs.org/
[p]: https://facebook.github.io/react-native/docs/out-of-tree-platforms
## Contents
- [Requirements](#requirements)
- [Getting Started](#building-your-first-react-native-app)
- [Documentation](#full-documentation)
- [Upgrading](https://facebook.github.io/react-native/docs/upgrading)
- [Contributing](#join-the-react-native-community)
- [Code of Conduct](./CODE_OF_CONDUCT.md)
- [Building your first React Native app](#building-your-first-react-native-app)
- [Documentation](#documentation)
- [Upgrading](#upgrading)
- [How to Contribute](#how-to-contribute)
- [Code of Conduct](#code-of-conduct)
- [License](#license)
---
## Requirements
## 📋 Requirements
Supported target operating systems are >= Android 4.1 (API 16) and >= iOS 9.0. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS by default (tools like [Expo](https://expo.io) can be used to get around this).
React Native apps may target iOS 9.0 and Android 4.1 (API 16) or newer. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS. Tools like [Expo](https://expo.io) can be used to work around this.
## Building your first React Native app
## 🎉 Building your first React Native app
Follow the [Getting Started guide](https://facebook.github.io/react-native/docs/getting-started.html). The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:
- [Trying out React Native](https://snack.expo.io/BJ-uC-nrb)
- [Creating a New Application](https://facebook.github.io/react-native/docs/getting-started.html)
- [Adding React Native to an Existing Application](https://facebook.github.io/react-native/docs/integration-with-existing-apps.html)
- [Trying out React Native][hello-world]
- [Creating a New Application][new-app]
- [Adding React Native to an Existing Application][existing]
## How React Native works
[hello-world]: https://snack.expo.io/@hramos/hello,-world!
[new-app]: https://facebook.github.io/react-native/docs/getting-started.html
[existing]: https://facebook.github.io/react-native/docs/integration-with-existing-apps.html
React Native lets you build mobile apps using JavaScript. It uses the same design as [React](https://facebook.github.io/react), letting you compose a rich mobile UI from declarative components.
## 📖 Documentation
With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C, Java, Kotlin, or Swift. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
The full documentation for React Native can be found on our [website][docs].
React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state.
The React Native documentation discusses components, APIs, and topics that are specific to React Native. For further documentation on the React API that is shared between React Native and React DOM, refer to the [React documentation][r-docs].
React Native combines smoothly with components written in Objective-C, Java, Kotlin, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.
The source for the React Native documentation and website is hosted on a separate repo, [**@facebook/react-native-website**][repo-website].
The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native. You can learn more about our open source roadmap in this blog post: [Open Source Roadmap](https://facebook.github.io/react-native/blog/2018/11/01/oss-roadmap).
[docs]: https://facebook.github.io/react-native/docs/getting-started.html
[r-docs]: https://reactjs.org/docs/getting-started.html
[repo-website]: (https://github.com/facebook/react-native-website)
## Full documentation
## 🚀 Upgrading
The full documentation for React Native can be found on our [website](https://facebook.github.io/react-native/docs/getting-started.html). The source for the React Native documentation and website is hosted on a separate repo, <https://github.com/facebook/react-native-website>. Releases are discussed in the React Native Community, <https://github.com/react-native-community/react-native-releases>, and larger discussions and proposals are in <https://github.com/react-native-community/discussions-and-proposals>.
Upgrading to new versions of React Native may give you access to more APIs, views, developer tools and other goodies. See the [Upgrading Guide][u] for instructions.
The React Native documentation only discusses the components, APIs, and topics specific to React Native (React on iOS and Android). For further documentation on the React API that is shared between React Native and React DOM, refer to the [React documentation](https://facebook.github.io/react/).
React Native releases are discussed in the React Native Community, [**@react-native-community/react-native-releases**][repo-releases].
## Join the React Native community
* Website: https://facebook.github.io/react-native
* Twitter: https://twitter.com/reactnative
* Help: https://facebook.github.io/react-native/en/help
[u]: https://facebook.github.io/react-native/docs/upgrading
[repo-releases]: https://github.com/react-native-community/react-native-releases
See the [CONTRIBUTING](./CONTRIBUTING.md) file for how to help out.
## 👏 How to Contribute
## License
The main purpose of this repository is to continue evolving React Native core. We want to make contributing to this project as easy and transparent as possible, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React Native.
React Native is MIT licensed, as found in the LICENSE file.
### [Code of Conduct][code]
React Native documentation is Creative Commons licensed, as found in the LICENSE-docs file.
Facebook has adopted a Code of Conduct that we expect project participants to adhere to.
Please read the [full text][code] so that you can understand what actions will and will not be tolerated.
[code]: https://code.fb.com/codeofconduct/
### [Contributing Guide][contribute]
Read our [**Contributing Guide**][contribute] to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native.
[contribute]: https://facebook.github.io/react-native/docs/contributing
### [Open Source Roadmap][roadmap]
You can learn more about our vision for React Native in the [**Roadmap**][roadmap].
[roadmap]: https://github.com/facebook/react-native/wiki/Roadmap
### Good First Issues
We have a list of [good first issues][gfi] that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
[gfi]: https://github.com/facebook/react-native/labels/good%20first%20issue
### Discussions
Larger discussions and proposals are discussed in [**@react-native-community/discussions-and-proposals**][repo-meta].
[repo-meta]: https://github.com/react-native-community/discussions-and-proposals
## 📄 License
React Native is MIT licensed, as found in the [LICENSE][l] file.
React Native documentation is Creative Commons licensed, as found in the [LICENSE-docs][ld] file.
[l]: https://github.com/facebook/react-native/blob/master/LICENSE
[ld]: https://github.com/facebook/react-native/blob/master/LICENSE-docs