Include Create React Native App in Getting Started #13303
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,8 +12,40 @@ your system, so that you can build apps with it right away. If you already | |
| have React Native installed, you can skip ahead to the | ||
| [Tutorial](docs/tutorial.html). | ||
|
|
||
| ## Quick Start | ||
|
|
||
| [Create React Native App](https://github.com/react-community/create-react-native-app) is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any native build tools. | ||
|
Contributor
Author
There was a problem hiding this comment. This phrasing is meant to mirror Create React App's in the React docs, but is fungible as far as I'm concerned. |
||
|
|
||
| Assuming that you have Node installed, no Xcode or Android Studio installation is required: | ||
|
Contributor
Author
There was a problem hiding this comment. Technically CRNA supports Node 6 or higher, not sure it's worth specifying here due to risk of bitrot.
Contributor
There was a problem hiding this comment. The phrasing here seems a bit odd to me (but keep in mind, English is my second language). The way I read it, Xcode or Android Studio may be required if I don't have Node installed.
I'm mirroring the instructions for Native Builds at the end here, "AwesomeProject" could be anything but ideally it would match the original RN init commands. After this PR gets merged I'll probably take another pass at updating the Getting Started guide and subsequent pages, as I'd like to update the tutorial so that it builds on top of the CRNA started project similar to what we did at F8 this year.
Contributor
Author
There was a problem hiding this comment. That's a good point -- writing for ESL audiences is not my strength. |
||
|
|
||
| ``` | ||
| npm install -g create-react-native-app | ||
| create-react-native-app hello-world | ||
|
Contributor
There was a problem hiding this comment. Change this and the next line to AwesomeApp (or update the instructions for RN init to use "hello-world", too) |
||
| cd hello-world | ||
| npm start | ||
| ``` | ||
|
|
||
| This will start a development server for you, and print a QR code in your terminal. | ||
|
|
||
| Install the [Expo](https://expo.io) client app on your iOS or Android phone, make sure your phone is on the same network as your computer, and scan the QR code in your terminal to open your project. The QR scanner is available under the "Projects" tab of the app. Create React Native App also has a [user guide](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md) you can reference if you have questions specific to the tool. | ||
|
Contributor
There was a problem hiding this comment. I think we can leave out "The QR scanner is available under the Projects tab of the app". When I launch the Expo app, the Projects tab is visible by default and I can see a "Scan QR Code" callout at the top so it seems people can figure this out. I don't feel too strongly about this though, if for example you've found that Expo users tend to be confused by this bit then we can leave this in. |
||
|
|
||
| Once you've created your project and opened it in the Expo client app, you can proceed to the [Tutorial](docs/tutorial.html). | ||
|
|
||
| ### Caveats | ||
|
Contributor
Author
There was a problem hiding this comment. I think having this as a subsection makes sense because we want to surface the information for advanced users (read: the ones who are willing to read more than 3 sentences due to existing investment) early on without muddying the waters for really new people. Very open to suggestions on the structure of this though.
Contributor
There was a problem hiding this comment. Ideally we'd have a standalone CRNA doc that covers any caveats, as well as the ejection process. We can tackle that in a different PR though, I'm OK with this section here for now.
Contributor
Author
There was a problem hiding this comment. I'll make a note to follow up with you on that after you're back. |
||
|
|
||
| Because you don't build any native code with Create React Native App, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app. | ||
|
Contributor
Author
There was a problem hiding this comment. Technically this includes the Expo SDK as well, but there's a tradeoff here:
I think it's OK to favor the former over the latter, myself.
Contributor
There was a problem hiding this comment. Looks good to me, once we have a CRNA doc we can be more verbose there. |
||
|
|
||
| If you know that you'll eventually need to include your own native code, Create React Native App is still a good way to get started. In that case you'll just need to "[eject](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#ejecting-from-create-react-native-app)" eventually to create your own native builds. If you do eject, the native build instructions below will be required to continue working on your project. | ||
|
|
||
| If you're integrating React Native into an existing project, you'll want to skip Create React Native App and go directly to setting up the native build environment. See below for instructions on configuring a native build environment for React Native. | ||
|
|
||
| <hr style="margin-top:25px"/> | ||
|
Contributor
Author
There was a problem hiding this comment. halp i'm trapped in 1999 and can't get out |
||
|
|
||
| ## Native Builds | ||
|
Contributor
There was a problem hiding this comment. I'm not sure about this section title yet but I don't have a better suggestion just yet shrug
Contributor
Author
There was a problem hiding this comment. Alternatives I see right off the bat:
Contributor
There was a problem hiding this comment. I've been thinking about this and have currently landed on these two terms to distinguish between the two types of React Native projects people might be working with:
The second one covers any project created using If we use these terms, then this section could be named "Building Projects with Native Code". Thoughts? |
||
|
|
||
| Follow these instructions if you need your own native build configuration. For example, if you "ejected" from Create React Native app, or if you are integrating React Native into an existing application, you'll need this section. | ||
|
Contributor
There was a problem hiding this comment. Maybe explain that, if you "ejected" or are integrating into an existing app, you will need to setup all the dependencies covered in this section. The idea would be to make it clear RN init is not necessary (as you already have a project). To me it's obvious RN init is not needed, but it may not be clear to a new user if RN init does some additional, required setup.
Contributor
Author
There was a problem hiding this comment. That's a great point. What do you think about making the example commands something like this? I think that's the most likely place for users to see it, but it might be better to have a more thorough explanation elsewhere? Doing both might be too much given the limited real estate, but I'm very open to suggestions here.
Contributor
Author
There was a problem hiding this comment. OK, I pushed up a commit that implements the example I previously commented, let me know if you think it's too clunky or should be moved to a central location? |
||
|
|
||
| The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you just have to pick | ||
| one to start with, since the setup is a bit different. | ||
|
|
||
| <div class="toggler"> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /** | ||
| * Copyright (c) 2015-present, Facebook, Inc. | ||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the BSD-style license found in the | ||
| * LICENSE file in the root directory of this source tree. An additional grant | ||
| * of patent rights can be found in the PATENTS file in the same directory. | ||
| * | ||
| * @providesModule EjectBanner | ||
| */ | ||
| 'use strict'; | ||
|
|
||
| var React = require('React'); | ||
|
|
||
| var EjectBanner = React.createClass({ | ||
| render: function() { | ||
| return ( | ||
| <div className="banner-crna-ejected"> | ||
| <h3>Native Build Required</h3> | ||
| <p> | ||
| This page only applies to apps made with <code>react-native init</code> or to those made | ||
| with Create React Native App which have since ejected. For more information about ejecting, | ||
| please see the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on the Create React Native App repository. | ||
| </p> | ||
| </div> | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| module.exports = EjectBanner; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/me pours one out for Parse.