More Resources doc, updating Support doc and quickstart too
Summary: TLDR even more docs changes So I created a More Resources doc that aggregates the high-quality-but-off-site stuff. Let's try to put more outlinks there. Also I removed the stuff on Support that was not support, and some misc changes to clean stuff up. Closes https://github.com/facebook/react-native/pull/8329 Differential Revision: D3471669 Pulled By: JoelMarcey fbshipit-source-id: 54edd543ced1b3a8f3d0baca5475ac96bae6e487
This commit is contained in:
Kevin Lacker
Facebook Github Bot 3
parent
f4a8efa452
commit
072ef0a0d4
|
|
@ -2,7 +2,7 @@
|
|||
id: basics-component-image
|
||||
title: Image
|
||||
layout: docs
|
||||
category: Basics
|
||||
category: The Basics
|
||||
permalink: docs/basics-component-image.html
|
||||
next: basics-component-view
|
||||
---
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
id: basics-component-listview
|
||||
title: ListView
|
||||
layout: docs
|
||||
category: Basics
|
||||
category: The Basics
|
||||
permalink: docs/basics-component-listview.html
|
||||
next: basics-network
|
||||
---
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
id: basics-component-scrollview
|
||||
title: ScrollView
|
||||
layout: docs
|
||||
category: Basics
|
||||
category: The Basics
|
||||
permalink: docs/basics-component-scrollview.html
|
||||
next: basics-component-listview
|
||||
---
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
id: basics-component-text
|
||||
title: Text
|
||||
layout: docs
|
||||
category: Basics
|
||||
category: The Basics
|
||||
permalink: docs/basics-component-text.html
|
||||
next: basics-component-image
|
||||
---
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
id: basics-component-textinput
|
||||
title: TextInput
|
||||
layout: docs
|
||||
category: Basics
|
||||
category: The Basics
|
||||
permalink: docs/basics-component-textinput.html
|
||||
next: basics-component-scrollview
|
||||
---
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
id: basics-component-view
|
||||
title: View
|
||||
layout: docs
|
||||
category: Basics
|
||||
category: The Basics
|
||||
permalink: docs/basics-component-view.html
|
||||
next: basics-component-textinput
|
||||
---
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
id: basics-components
|
||||
title: Components
|
||||
layout: docs
|
||||
category: Basics
|
||||
category: The Basics
|
||||
permalink: docs/basics-components.html
|
||||
next: basics-component-text
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
id: basics-integration-with-existing-apps
|
||||
id: integration-with-existing-apps
|
||||
title: Integration With Existing Apps
|
||||
layout: docs
|
||||
category: Basics
|
||||
permalink: docs/basics-integration-with-existing-apps.html
|
||||
next: sample-application-movies
|
||||
category: Guides
|
||||
permalink: docs/integration-with-existing-apps.html
|
||||
next: style
|
||||
---
|
||||
|
||||
<div class="integration-toggler">
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
id: basics-network
|
||||
title: Network
|
||||
layout: docs
|
||||
category: Basics
|
||||
category: The Basics
|
||||
permalink: docs/network.html
|
||||
next: basics-integration-with-existing-apps
|
||||
next: more-resources
|
||||
---
|
||||
|
||||
One of React Native's goals is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change anything, we tried to be as faithful as possible to the browser APIs. The networking stack is a great example.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
id: more-resources
|
||||
title: More Resources
|
||||
layout: docs
|
||||
category: The Basics
|
||||
permalink: docs/more-resources.html
|
||||
next: integration-with-existing-apps
|
||||
---
|
||||
|
||||
If you just read through this website, you should be able to build a pretty cool React Native app. But React Native isn't just a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out.
|
||||
|
||||
## Popular Libraries
|
||||
|
||||
If you're using React Native, you probably already know about [React](https://facebook.github.io/react/). So I feel a bit silly mentioning this. But if you haven't, check out React - it's the best way to build a modern website.
|
||||
|
||||
One common question is how to handle the "state" of your React Native application. The most popular library for this is [Redux](http://redux.js.org/). Don't be afraid of how often Redux uses the word "reducer" - it's a pretty simple library, and there's also a nice [series of videos](https://egghead.io/courses/getting-started-with-redux) explaining it.
|
||||
|
||||
If you're looking for a library that does a specific thing, check out [Awesome React Native](https://github.com/jondot/awesome-react-native), a curated list of components that also has demos, articles, and other stuff.
|
||||
|
||||
## Example Apps
|
||||
|
||||
There are a lot of example apps at the [React Native Playground](https://rnplay.org/apps/picks). You can see the code running on a real device, which is a neat feature.
|
||||
|
||||
The folks who built the app for Facebook's F8 conference in 2016 also [open-sourced the code](https://github.com/fbsamples/f8app) and wrote up a [detailed series of tutorials](http://makeitopen.com/tutorials/building-the-f8-app/planning/). This is useful if you want a more in-depth example that's more realistic than most sample apps out there.
|
||||
|
||||
## Development Tools
|
||||
|
||||
[Nuclide](https://nuclide.io/) is the IDE that Facebook uses internally for React Native development. The killer feature of Nuclide is its debugging ability. It also has great inline Flow support.
|
||||
|
||||
[Ignite](https://github.com/infinitered/ignite) is a starter kit that uses Redux and a few different common UI libraries. It has a CLI to generate apps, components, and containers. If you like all of the individual tech choices, Ignite could be perfect for you.
|
||||
|
||||
[CodePush](https://microsoft.github.io/code-push/) is a service from Microsoft that makes it easy to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give CodePush a try.
|
||||
|
||||
[Exponent](http://docs.getexponent.com/versions/v6.0.0/index.html) is a development environment plus application that focuses on letting you build React Native apps in the Exponent development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Exponent.
|
||||
|
||||
[Deco](https://www.decosoftware.com/) is an all-in-one development environment specifically designed for React Native. It can automatically set up a new project, search for open source components, and insert them. You can also tweak your app graphically in real time. Check it out if you use macOS.
|
||||
|
||||
## Where React Native People Hang Out
|
||||
|
||||
The [React Native Community](https://www.facebook.com/groups/react.native.community) Facebook group has thousands of developers, and it's pretty active. Come there to show off your project, or ask how other people solved similar problems.
|
||||
|
||||
[Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n) is a Discord chat where a lot of React-related discussion happens, including React Native. Discord is just like Slack except it works better for open source projects with a zillion contributors. Check out the #react-native channel.
|
||||
|
||||
The [React Twitter account](https://twitter.com/reactjs) covers both React and React Native. Following that account is a pretty good way to find out what's happening in the world of React.
|
||||
|
||||
There are a lot of [React Native Meetups](http://www.meetup.com/topics/react-native/) that happen around the world. Often there is React Native content in React meetups as well.
|
||||
|
||||
Sometimes we have React conferences. We posted the [videos from React.js Conf 2016](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY), and we'll probably have more conferences in the future, too. Stay tuned.
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
id: quick-start-getting-started
|
||||
title: Getting Started
|
||||
layout: docs
|
||||
category: Quick Start
|
||||
category: The Basics
|
||||
permalink: docs/getting-started.html
|
||||
next: basics-components
|
||||
---
|
||||
|
|
@ -50,7 +50,7 @@ block { display: none; }
|
|||
|
||||
## Unsupported
|
||||
|
||||
<div>Unfortunately, Apple only lets you develop for iOS on a Mac machine. Please check out the <a href="" onclick="display('platform', 'android')">Android</a> instructions instead.</div>
|
||||
<div>Unfortunately, Apple only lets you develop for iOS on a Mac. If you want to build an iOS app but you don't have a Mac yet, you can try starting with the <a href="" onclick="display('platform', 'android')">Android</a> instructions instead.</div>
|
||||
|
||||
<center><img src="img/react-native-sorry-not-supported.png" width="150"></img></center>
|
||||
|
||||
|
|
@ -58,74 +58,51 @@ block { display: none; }
|
|||
|
||||
<block class="mac ios" />
|
||||
|
||||
## Installing React Native
|
||||
## Dependencies
|
||||
|
||||
There's a few things you need to install first. You will need Node.js, the React Native command line tools, Watchman, and Xcode.
|
||||
You will need Xcode, node.js, the React Native command line tools, and Watchman.
|
||||
|
||||
<block class="mac android" />
|
||||
|
||||
## Installing React Native
|
||||
## Dependencies
|
||||
|
||||
There's a few things you need to install first. You will need Node.js, the React Native command line tools, Watchman, and Android Studio.
|
||||
You will need Android Studio, node.js, the React Native command line tools, and Watchman.
|
||||
|
||||
<block class="mac ios android" />
|
||||
|
||||
#### Node.js
|
||||
|
||||
We recommend installing Node.js via [Homebrew](http://brew.sh/), a popular package manager for OS X:
|
||||
We recommend installing node and watchman via [Homebrew](http://brew.sh/).
|
||||
|
||||
```
|
||||
brew install node
|
||||
brew install watchman
|
||||
```
|
||||
|
||||
#### React Native command line tools
|
||||
|
||||
Use Node's package manager to install the React Native command line tools. These will allow you to easily create your first React Native project.
|
||||
Node comes with npm, which lets you install the React Native command line interface.
|
||||
|
||||
```
|
||||
npm install -g react-native-cli
|
||||
```
|
||||
|
||||
> If you see the error, `EACCES: permission denied`, please run the command:
|
||||
> `sudo npm install -g react-native-cli`.
|
||||
|
||||
#### Watchman
|
||||
|
||||
[Watchman](https://facebook.github.io/watchman/docs/install.html) is a tool by Facebook for watching
|
||||
changes in the filesystem. It is recommended you install it for better performance.
|
||||
|
||||
```
|
||||
brew install watchman
|
||||
```
|
||||
If you get a permission error, try with sudo: `sudo npm install -g react-native-cli`.
|
||||
|
||||
<block class="mac ios" />
|
||||
|
||||
#### Xcode
|
||||
|
||||
You can install Xcode via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12), or download it directly from the [Apple Developer portal](https://developer.apple.com/xcode/downloads/).
|
||||
The easiest way to install Xcode is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12).
|
||||
|
||||
<block class="mac android" />
|
||||
|
||||
#### Android Studio
|
||||
|
||||
Download and install [Android Studio](https://developer.android.com/studio/install.html).
|
||||
|
||||
#### Gradle Daemon
|
||||
|
||||
While optional, enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) will greatly improve incremental build times for changes in Java code.
|
||||
If you plan to make changes in Java code, we recommend [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) which speeds up the build.
|
||||
|
||||
|
||||
<!-- ######### LINUX and WINDOWS for ANDROID ##################### -->
|
||||
|
||||
<block class="linux windows android" />
|
||||
|
||||
## Installing React Native
|
||||
## Dependencies
|
||||
|
||||
There's a few things you need to install first. You will need Node.js, the React Native command line tools, Watchman, and Android Studio.
|
||||
|
||||
<block class="linux windows android" />
|
||||
|
||||
#### Node.js
|
||||
You will need node.js, the React Native command line tools, Watchman, and Android Studio.
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
|
|
@ -133,51 +110,33 @@ Follow the [installation instructions for your Linux distribution](https://nodej
|
|||
|
||||
<block class='windows android' />
|
||||
|
||||
We recommend installing Node.js via [Chocolatey](https://chocolatey.org), a popular package manager for Windows. Open a Command Prompt as Administrator, then run the following command:
|
||||
We recommend installing node.js and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows. Open a Command Prompt as Administrator, then run:
|
||||
|
||||
```
|
||||
choco install nodejs.install
|
||||
```
|
||||
|
||||
##### Python
|
||||
|
||||
The React Native command line tools require Python2. Install it using Chocolatey:
|
||||
|
||||
```
|
||||
choco install python2
|
||||
```
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
#### React Native command line tools
|
||||
|
||||
Use Node's package manager to install the React Native command line tools. These will allow you to easily create your first React Native project.
|
||||
Node comes with npm, which lets you install the React Native command line interface.
|
||||
|
||||
```
|
||||
npm install -g react-native-cli
|
||||
```
|
||||
|
||||
> If you see the error, `EACCES: permission denied`, please run the command:
|
||||
> `sudo npm install -g react-native-cli`.
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
#### Android Studio
|
||||
|
||||
Download and install [Android Studio](https://developer.android.com/studio/install.html).
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
#### Watchman
|
||||
|
||||
[Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is recommended you install
|
||||
it for better performance. You can follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install.html#installing-from-source) to compile and install from source.
|
||||
[Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. Installing it should
|
||||
improve performance, but you can also try not installing it, if the installation process is too annoying. You can follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install.html#installing-from-source) to compile and install from source.
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
#### Gradle Daemon
|
||||
|
||||
While optional, enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) will greatly improve incremental build times for changes in Java code.
|
||||
If you plan to make changes in Java code, we recommend [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) which speeds up the build.
|
||||
|
||||
<block class="mac ios android" />
|
||||
|
||||
|
|
@ -193,13 +152,7 @@ cd AwesomeProject
|
|||
react-native run-ios
|
||||
```
|
||||
|
||||
If everything is set up correctly, you should see your new app running in the iOS Simulator shortly.
|
||||
|
||||
> You can also
|
||||
> [open the `AwesomeProject`](http://nuclide.io/docs/quick-start/getting-started/#adding-a-project)
|
||||
> folder in [Nuclide](http://nuclide.io) and
|
||||
> [run the application](http://nuclide.io/docs/platforms/react-native/#command-line), or open
|
||||
> `ios/AwesomeProject.xcodeproj` and hit the `Run` button in Xcode.
|
||||
You should see your new app running in the iOS Simulator shortly. `react-native run-ios` is just one way to run your app - you can also run it directly from within Xcode or Nuclide.
|
||||
|
||||
<block class="mac android" />
|
||||
|
||||
|
|
@ -211,12 +164,7 @@ cd AwesomeProject
|
|||
react-native run-android
|
||||
```
|
||||
|
||||
If everything is set up correctly, you should see your new app running in your Android emulator shortly.
|
||||
|
||||
> You can also
|
||||
> [open the `AwesomeProject`](http://nuclide.io/docs/quick-start/getting-started/#adding-a-project)
|
||||
> folder in [Nuclide](http://nuclide.io) and
|
||||
> [run the application](http://nuclide.io/docs/platforms/react-native/#command-line).
|
||||
If everything is set up correctly, you should see your new app running in your Android emulator shortly. `react-native run-android` is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.
|
||||
|
||||
<block class="mac ios android" />
|
||||
|
||||
|
|
@ -274,35 +222,15 @@ Now that you have successfully run the app, let's modify it.
|
|||
|
||||
### That's it!
|
||||
|
||||
Congratulations! You've successfully run and modified your first React Native app.
|
||||
Congratulations! You've successfully run and modified a React Native app.
|
||||
|
||||
<center><img src="img/react-native-congratulations.png" width="150"></img></center>
|
||||
|
||||
<block class="mac ios android" />
|
||||
<block class="mac windows linux ios android" />
|
||||
|
||||
## Common Followups
|
||||
## Special Cases
|
||||
|
||||
- Learn how to access the Developer Menu, reload your JavaScript, access logs, and more in the [Debugging guide](docs/debugging.html#content).
|
||||
|
||||
<block class="mac ios" />
|
||||
|
||||
- If you want to run on a physical device, see the [Running on iOS Device page](docs/running-on-device-ios.html#content).
|
||||
|
||||
<block class="mac android" />
|
||||
|
||||
- If you want to run on a physical device, see the [Running on Android Device page](docs/running-on-device-android.html#content).
|
||||
|
||||
<block class="mac ios android" />
|
||||
|
||||
- If you run into any issues getting started, see the [Troubleshooting](docs/troubleshooting.html#content) page.
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
## Common Followups
|
||||
|
||||
- Learn how to access the Developer Menu, reload your JavaScript, access logs, and more in the [Debugging guide](docs/debugging.html#content).
|
||||
|
||||
- If you want to run on a physical device, see the [Running on Android Device page](docs/running-on-device-android.html#content).
|
||||
- This page explains how to create a new React Native app. If you are adding React Native components to an existing application, check out the [Integration guide](docs/integration-with-existing-apps.html).
|
||||
|
||||
- If you run into any issues getting started, see the [Troubleshooting](docs/troubleshooting.html#content) page.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
id: sample-application-f8
|
||||
title: F8 2016 App
|
||||
layout: docs
|
||||
category: Sample Applications
|
||||
permalink: http://makeitopen.com/
|
||||
next: style
|
||||
---
|
||||
|
|
@ -1,504 +0,0 @@
|
|||
---
|
||||
id: sample-application-movies
|
||||
title: Movie Fetcher
|
||||
layout: docs
|
||||
category: Sample Applications
|
||||
permalink: docs/sample-application-movies.html
|
||||
next: sample-application-f8
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
In this tutorial we'll be building a simple version of a Movies app that fetches 25 movies that are in theaters and displays them in a `ListView`.
|
||||
|
||||
## Setup
|
||||
|
||||
> This sample application requires the basic setup explained at
|
||||
> [React Native Getting Started](docs/quick-start/getting-started.html#content).
|
||||
|
||||
After installing these dependencies there are two simple commands to get a React Native project all set up for development.
|
||||
|
||||
1. `npm install -g react-native-cli`
|
||||
|
||||
react-native-cli is a command line interface that does the rest of the set up. It’s installable via npm. This will install `react-native` as a command in your terminal. You only ever need to do this once.
|
||||
|
||||
2. `react-native init SampleAppMovies`
|
||||
|
||||
This command fetches the React Native source code and dependencies and then creates a new Xcode project in `SampleAppMovies/iOS/SampleAppMovies.xcodeproj` and a gradle project in `SampleAppMovies/android/app`.
|
||||
|
||||
### Starting the app on iOS
|
||||
|
||||
Open this new project (`SampleAppMovies/ios/SampleAppMovies.xcodeproj`) in Xcode and simply build and run it with `⌘+R`. Doing so will also start a Node server which enables live code reloading. With this you can see your changes by pressing `⌘+R` in the simulator rather than recompiling in Xcode.
|
||||
|
||||
### Starting the app on Android
|
||||
|
||||
In your terminal navigate into the `SampleAppMovies` and run:
|
||||
|
||||
react-native run-android
|
||||
|
||||
This will install the generated app on your emulator or device, as well as start the Node server which enables live code reloading. To see your changes you have to open the rage-shake-menu (either shake the device or press the menu button on devices, press F2 or Page Up for emulator, ⌘+M for Genymotion), and then press `Reload JS`.
|
||||
|
||||
### Hello World
|
||||
|
||||
`react-native init` will generate an app with the name of your project, in this case `SampleAppMovies`. This is a simple hello world app. For iOS, you can edit `index.ios.js` to make changes to the app and then press ⌘+R in the simulator to see the changes. For Android, you can edit `index.android.js` to make changes to the app and press `Reload JS` from the rage shake menu to see the changes.
|
||||
|
||||
## Actual App
|
||||
|
||||
Now that we have initialized our React Native project, we can begin creating our Movie application.
|
||||
|
||||
### Mocking data
|
||||
|
||||
Before we write the code to fetch actual Rotten Tomatoes data let's mock some data so we can get our hands dirty with React Native. At Facebook we typically declare constants at the top of JS files, just below the imports, but feel free to add the following constant wherever you like. In `index.ios.js` or `index.android.js` :
|
||||
|
||||
```javascript
|
||||
var MOCKED_MOVIES_DATA = [
|
||||
{title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
|
||||
];
|
||||
```
|
||||
|
||||
### Render a movie
|
||||
|
||||
We're going to render the title, year, and thumbnail for the movie. Since thumbnail is an Image component in React Native, add Image to the list of React imports below.
|
||||
|
||||
```javascript
|
||||
import React, {
|
||||
Component,
|
||||
} from 'react';
|
||||
import {
|
||||
AppRegistry,
|
||||
Image,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
```
|
||||
|
||||
Now change the render function so that we're rendering the data mentioned above rather than hello world.
|
||||
|
||||
```javascript
|
||||
render() {
|
||||
var movie = MOCKED_MOVIES_DATA[0];
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>{movie.title}</Text>
|
||||
<Text>{movie.year}</Text>
|
||||
<Image source={{uri: movie.posters.thumbnail}} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Press `⌘+R` / `Reload JS` and you should see "Title" above "2015". Notice that the Image doesn't render anything. This is because we haven't specified the width and height of the image we want to render. This is done via styles. While we're changing the styles let's also clean up the styles we're no longer using.
|
||||
|
||||
```javascript
|
||||
var styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
thumbnail: {
|
||||
width: 53,
|
||||
height: 81,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
And lastly we need to apply this style to the Image component:
|
||||
|
||||
```javascript
|
||||
<Image
|
||||
source={{uri: movie.posters.thumbnail}}
|
||||
style={styles.thumbnail}
|
||||
/>
|
||||
```
|
||||
|
||||
Press `⌘+R` / `Reload JS` and the image should now render.
|
||||
|
||||
<div class="tutorial-mock">
|
||||
<img src="img/TutorialMock.png" />
|
||||
<img src="img/TutorialMock2.png" />
|
||||
</div>
|
||||
|
||||
|
||||
### Add some styling
|
||||
|
||||
Great, we've rendered our data. Now let's make it look better. I'd like to put the text to the right of the image and make the title larger and centered within that area:
|
||||
|
||||
```
|
||||
+---------------------------------+
|
||||
|+-------++----------------------+|
|
||||
|| || Title ||
|
||||
|| Image || ||
|
||||
|| || Year ||
|
||||
|+-------++----------------------+|
|
||||
+---------------------------------+
|
||||
```
|
||||
|
||||
We'll need to add another container in order to vertically lay out components within horizontally laid out components.
|
||||
|
||||
```javascript
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Image
|
||||
source={{uri: movie.posters.thumbnail}}
|
||||
style={styles.thumbnail}
|
||||
/>
|
||||
<View style={styles.rightContainer}>
|
||||
<Text style={styles.title}>{movie.title}</Text>
|
||||
<Text style={styles.year}>{movie.year}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
```
|
||||
|
||||
Not too much has changed, we added a container around the Texts and then moved them after the Image (because they're to the right of the Image). Let's see what the style changes look like:
|
||||
|
||||
```javascript
|
||||
container: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
```
|
||||
|
||||
We use FlexBox for layout - see [this great guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to learn more about it.
|
||||
|
||||
In the above code snippet, we simply added `flexDirection: 'row'` that will make children of our main container to be layed out horizontally instead of vertically.
|
||||
|
||||
Now add another style to the JS `style` object:
|
||||
|
||||
```javascript
|
||||
rightContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
```
|
||||
|
||||
This means that the `rightContainer` takes up the remaining space in the parent container that isn't taken up by the Image. If this doesn't make sense, add a `backgroundColor` to `rightContainer` and then try removing the `flex: 1`. You'll see that this causes the container's size to be the minimum size that fits its children.
|
||||
|
||||
Styling the text is pretty straightforward:
|
||||
|
||||
```javascript
|
||||
title: {
|
||||
fontSize: 20,
|
||||
marginBottom: 8,
|
||||
textAlign: 'center',
|
||||
},
|
||||
year: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
```
|
||||
|
||||
Go ahead and press `⌘+R` / `Reload JS` and you'll see the updated view.
|
||||
|
||||
<div class="tutorial-mock">
|
||||
<img src="img/TutorialStyledMock.png" />
|
||||
<img src="img/TutorialStyledMock2.png" />
|
||||
</div>
|
||||
|
||||
### Fetching real data
|
||||
|
||||
Fetching data from Rotten Tomatoes's API isn't really relevant to learning React Native so feel free to breeze through this section.
|
||||
|
||||
Add the following constants to the top of the file (typically below the imports) to create the `REQUEST_URL`s used to request data with.
|
||||
|
||||
```javascript
|
||||
/**
|
||||
* For quota reasons we replaced the Rotten Tomatoes' API with a sample data of
|
||||
* their very own API that lives in React Native's Github repo.
|
||||
*/
|
||||
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
|
||||
```
|
||||
|
||||
Add some initial state to our application so that we can check `this.state.movies === null` to determine whether the movies data has been loaded or not. We can set this data when the response comes back with `this.setState({movies: moviesData})`. Add this code just above the render function inside our React class.
|
||||
|
||||
```javascript
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
movies: null,
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
We want to send off the request after the component has finished loading. `componentDidMount` is a function of React components that React will call exactly once, just after the component has been loaded.
|
||||
|
||||
```javascript
|
||||
componentDidMount() {
|
||||
this.fetchData();
|
||||
}
|
||||
```
|
||||
|
||||
Now add `fetchData` function used above to our main component. This method will be responsible for handling data fetching. All you need to do is call `this.setState({movies: data})` after resolving the promise chain because the way React works is that `setState` actually triggers a re-render and then the render function will notice that `this.state.movies` is no longer `null`. Note that we call `done()` at the end of the promise chain - always make sure to call `done()` or any errors thrown will get swallowed.
|
||||
|
||||
```javascript
|
||||
fetchData() {
|
||||
fetch(REQUEST_URL)
|
||||
.then((response) => response.json())
|
||||
.then((responseData) => {
|
||||
this.setState({
|
||||
movies: responseData.movies,
|
||||
});
|
||||
})
|
||||
.done();
|
||||
}
|
||||
```
|
||||
|
||||
Now modify the render function to render a loading view if we don't have any movies data, and to render the first movie otherwise.
|
||||
|
||||
```javascript
|
||||
render() {
|
||||
if (!this.state.movies) {
|
||||
return this.renderLoadingView();
|
||||
}
|
||||
|
||||
var movie = this.state.movies[0];
|
||||
return this.renderMovie(movie);
|
||||
}
|
||||
|
||||
renderLoadingView() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>
|
||||
Loading movies...
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
renderMovie(movie) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Image
|
||||
source={{uri: movie.posters.thumbnail}}
|
||||
style={styles.thumbnail}
|
||||
/>
|
||||
<View style={styles.rightContainer}>
|
||||
<Text style={styles.title}>{movie.title}</Text>
|
||||
<Text style={styles.year}>{movie.year}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Now press `⌘+R` / `Reload JS` and you should see "Loading movies..." until the response comes back, then it will render the first movie it fetched from Rotten Tomatoes.
|
||||
|
||||
<div class="tutorial-mock">
|
||||
<img src="img/TutorialSingleFetched.png" />
|
||||
<img src="img/TutorialSingleFetched2.png" />
|
||||
</div>
|
||||
|
||||
## ListView
|
||||
|
||||
Let's now modify this application to render all of this data in a `ListView` component, rather than just rendering the first movie.
|
||||
|
||||
Why is a `ListView` better than just rendering all of these elements or putting them in a `ScrollView`? Despite React being fast, rendering a possibly infinite list of elements could be slow. `ListView` schedules rendering of views so that you only display the ones on screen and those already rendered but off screen are removed from the native view hierarchy.
|
||||
|
||||
First things first: add the `ListView` import to the top of the file.
|
||||
|
||||
```javascript
|
||||
import React, {
|
||||
Component,
|
||||
} from 'react';
|
||||
import {
|
||||
AppRegistry,
|
||||
Image,
|
||||
ListView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
```
|
||||
|
||||
Now modify the render function so that once we have our data it renders a ListView of movies instead of a single movie.
|
||||
|
||||
```javascript
|
||||
render() {
|
||||
if (!this.state.loaded) {
|
||||
return this.renderLoadingView();
|
||||
}
|
||||
|
||||
return (
|
||||
<ListView
|
||||
dataSource={this.state.dataSource}
|
||||
renderRow={this.renderMovie}
|
||||
style={styles.listView}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
The `dataSource` is an interface that `ListView` is using to determine which rows have changed over the course of updates.
|
||||
|
||||
You'll notice we used `dataSource` from `this.state`. The next step is to add an empty `dataSource` to the object returned by `constructor`. Also, now that we're storing the data in `dataSource`, we should no longer use `this.state.movies` to avoid storing data twice. We can use boolean property of the state (`this.state.loaded`) to tell whether data fetching has finished.
|
||||
|
||||
```javascript
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: new ListView.DataSource({
|
||||
rowHasChanged: (row1, row2) => row1 !== row2,
|
||||
}),
|
||||
loaded: false,
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
And here is the modified `fetchData` method that updates the state accordingly:
|
||||
|
||||
```javascript
|
||||
fetchData() {
|
||||
fetch(REQUEST_URL)
|
||||
.then((response) => response.json())
|
||||
.then((responseData) => {
|
||||
this.setState({
|
||||
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
|
||||
loaded: true,
|
||||
});
|
||||
})
|
||||
.done();
|
||||
}
|
||||
```
|
||||
|
||||
Finally, we add styles for the `ListView` component to the `styles` JS object:
|
||||
```javascript
|
||||
listView: {
|
||||
paddingTop: 20,
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
```
|
||||
|
||||
And here's the final result:
|
||||
|
||||
<div class="tutorial-mock">
|
||||
<img src="img/TutorialFinal.png" />
|
||||
<img src="img/TutorialFinal2.png" />
|
||||
</div>
|
||||
|
||||
There's still some work to be done to make it a fully functional app such as: adding navigation, search, infinite scroll loading, etc. Check the [Movies Example](https://github.com/facebook/react-native/tree/master/Examples/Movies) to see it all working.
|
||||
|
||||
|
||||
### Final source code
|
||||
|
||||
```javascript
|
||||
/**
|
||||
* Sample React Native App
|
||||
* https://github.com/facebook/react-native
|
||||
*/
|
||||
|
||||
import React, {
|
||||
Component,
|
||||
} from 'react';
|
||||
import {
|
||||
AppRegistry,
|
||||
Image,
|
||||
ListView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
|
||||
|
||||
class SampleAppMovies extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: new ListView.DataSource({
|
||||
rowHasChanged: (row1, row2) => row1 !== row2,
|
||||
}),
|
||||
loaded: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
fetchData() {
|
||||
fetch(REQUEST_URL)
|
||||
.then((response) => response.json())
|
||||
.then((responseData) => {
|
||||
this.setState({
|
||||
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
|
||||
loaded: true,
|
||||
});
|
||||
})
|
||||
.done();
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.state.loaded) {
|
||||
return this.renderLoadingView();
|
||||
}
|
||||
|
||||
return (
|
||||
<ListView
|
||||
dataSource={this.state.dataSource}
|
||||
renderRow={this.renderMovie}
|
||||
style={styles.listView}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderLoadingView() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>
|
||||
Loading movies...
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
renderMovie(movie) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Image
|
||||
source={{uri: movie.posters.thumbnail}}
|
||||
style={styles.thumbnail}
|
||||
/>
|
||||
<View style={styles.rightContainer}>
|
||||
<Text style={styles.title}>{movie.title}</Text>
|
||||
<Text style={styles.year}>{movie.year}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
rightContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
marginBottom: 8,
|
||||
textAlign: 'center',
|
||||
},
|
||||
year: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
thumbnail: {
|
||||
width: 53,
|
||||
height: 81,
|
||||
},
|
||||
listView: {
|
||||
paddingTop: 20,
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
});
|
||||
|
||||
AppRegistry.registerComponent('SampleAppMovies', () => SampleAppMovies);
|
||||
```
|
||||
|
|
@ -29,102 +29,30 @@ var support = React.createClass({
|
|||
<h1>Need help?</h1>
|
||||
<div className="subHeader"></div>
|
||||
<p>
|
||||
<strong>React Native</strong> is worked on full-time by Facebook's
|
||||
product infrastructure user interface
|
||||
engineering teams. They're often around and available for
|
||||
questions.
|
||||
At Facebook, there are dozens of engineers who work on React Native full-time. But there are far more people in the community who make key contributions and fix things. So if you need help with your React Native app, the right place to go depends on the type of help that you need.
|
||||
</p>
|
||||
|
||||
<H2>Community translation</H2>
|
||||
<p>The following is a list of translated docs offered by community volunteers. Send a pull request to fill the list!</p>
|
||||
<ul>
|
||||
<li><a href="http://reactnative.cn">Chinese</a> (<a href="https://github.com/reactnativecn/react-native-docs-cn">source</a>)</li>
|
||||
</ul>
|
||||
<H2>Technical Questions</H2>
|
||||
<p>If you're wondering how to solve a specific technical problem in React Native, the best place to ask is on Stack Overflow. You can check <a href="http://stackoverflow.com/questions/tagged/react-native">existing questions</a> tagged with react-native, <a href="http://stackoverflow.com/questions/ask">ask your own</a>, or just Google it and click on the Stack Overflow answer that will inevitably come up.</p>
|
||||
|
||||
<H2>Stack Overflow</H2>
|
||||
<p>Many members of the community use Stack Overflow to ask questions. Read through the <a href="http://stackoverflow.com/questions/tagged/react-native">existing questions</a> tagged with <strong>react-native</strong> or <a href="http://stackoverflow.com/questions/ask">ask your own</a>!</p>
|
||||
<H2>Random Questions</H2>
|
||||
<p>If you have an open-ended question or you just want to get a general sense of what React Native folks talk about, check out the <a href="https://www.facebook.com/groups/react.native.community">React Native Community</a> Facebook group. It has thousands of developers and almost all posts get a response.</p>
|
||||
|
||||
<H2>Chat</H2>
|
||||
<p>Join us in <strong><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">#react-native on Reactiflux</a></strong>.</p>
|
||||
<H2>Urgent Questions</H2>
|
||||
<p>If you need an answer right away, check out #react-native on the <a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux chat</a>. There are usually a number of React Native experts there who can help out or point you to somewhere you might want to look.</p>
|
||||
|
||||
<H2>Product Pains</H2>
|
||||
<p>React Native uses <a href="https://productpains.com/product/react-native/">Product Pains</a> for feature requests. It has a voting system to surface which issues are most important to the community. GitHub issues should only be used for bugs.</p>
|
||||
<H2>Feature Requests</H2>
|
||||
<p>React Native uses <a href="https://productpains.com/product/react-native/">Product Pains</a> for feature requests. It has a voting system to surface which issues are most important to the community. So if you have a feature request, add it or upvote a similar one.</p>
|
||||
|
||||
<iframe
|
||||
width="100%"
|
||||
height="600px"
|
||||
scrolling="yes"
|
||||
src="https://productpains.com/widget.html?token=3b929306-e0f7-5c94-7d7c-ecc05d059748"
|
||||
/>
|
||||
/>
|
||||
|
||||
<H2>Twitter</H2>
|
||||
<p><a href="https://twitter.com/search?q=%23reactnative"><strong>#reactnative</strong> hash tag on Twitter</a> is used to keep up with the latest React Native news.</p>
|
||||
|
||||
<p><center><a className="twitter-timeline" data-dnt="true" data-chrome="nofooter noheader transparent" href="https://twitter.com/search?q=%23reactnative" data-widget-id="565960513457098753"></a></center></p>
|
||||
|
||||
<h2>Newsletter</h2>
|
||||
<p>Community member Brent Vatne runs an occasional <a href="http://reactnative.cc/">React Native newsletter</a> with news and happenings from the world of React Native.</p>
|
||||
|
||||
<h2>Audio and Video</h2>
|
||||
<p>Check out various audio and video of those speaking about React Native at conferences, in podcasts, etc.</p>
|
||||
<h3>React.js Conf 2016</h3>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/2Zthnq-hIXA" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/Xnqy_zkBAew" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/RBg2_uQE4KM" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/0MlT74erp60" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/B8J8xn3pLpk" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/f1Sj48rJE3I" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/uBYPqb83C7k" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/09ddrCaLo10" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/d3VVfA9hWjc" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/impQkQOCbMw" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/wuLKELLuwVk" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/Zoerbz5Mu5U" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
<h3>React.js Conf 2015</h3>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/X6YbAKiLCLU" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/oWPoW0gIzvs" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/hDviGU-57lU" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/8N4f4h6SThc" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/-XxSCi8TKuk" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<h3><a href="https://thechangelog.com/149/">The Changelog #149</a></h3>
|
||||
<p>With Christopher "vjeux" Chedeau and Spencer Ahrens</p>
|
||||
|
||||
<audio src="http://fdlyr.co/d/changelog/cdn.5by5.tv/audio/broadcasts/changelog/2015/changelog-149.mp3" controls="controls" preload="none"></audio>
|
||||
|
||||
<h3><a href="http://devchat.tv/js-jabber/146-jsj-react-with-christopher-chedeau-and-jordan-walke">JSJabber #146</a></h3>
|
||||
<p>With Christopher "vjeux" Chedeau and Jordan Walke</p>
|
||||
|
||||
<audio controls>
|
||||
<source ng-src="http://www.podtrac.com/pts/redirect.mp3/media.devchat.tv/js-jabber/JSJ146React.mp3?player=true" type="audio/mpeg" src="http://www.podtrac.com/pts/redirect.mp3/media.devchat.tv/js-jabber/JSJ146React.mp3?player=true" />
|
||||
<p>
|
||||
This player is only available in HTML5 enabled browsers. Please update your browser or
|
||||
<a download="146-jsj-react-with-christopher-chedeau-and-jordan-walke.mp3" href="http://www.podtrac.com/pts/redirect.mp3/media.devchat.tv/js-jabber/JSJ146React.mp3?download=true?download=true">download the episode</a>
|
||||
</p>
|
||||
</audio>
|
||||
<H2>Bug Reports</H2>
|
||||
<p>If you have discovered a bug in React Native, keep in mind that it's an open source project. Take a look at the <a href="https://github.com/facebook/react-native/">code on GitHub</a>, and see if it's something you could fix yourself. If you don't think you can fix it yourself, you can file it as a GitHub issue. Be sure to providing a crisp description and reproduction of the bug, to improve the chance that someone will be able to help you out.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue