Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] First pass at tutorial (#6769)
- Loading branch information
1 parent
fbbb3fe
commit c5ff7e9
Showing
45 changed files
with
2,339 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from 'react'; | ||
| import { css } from 'react-emotion'; | ||
|
|
||
| const STYLES_HIGHLIGHT = css` | ||
| text-shadow: rgba(255, 255, 0, 1) 0px 0px 10px, rgba(255, 255, 0, 1) 0px 0px 10px, | ||
| rgba(255, 255, 0, 1) 0px 0px 10px, rgba(255, 255, 0, 1) 0px 0px 10px; | ||
| `; | ||
|
|
||
| const Highlight = ({ children }) => <span className={`${STYLES_HIGHLIGHT}`}>{children}</span>; | ||
|
|
||
| export default Highlight; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| --- | ||
| title: Creating a button | ||
| --- | ||
|
|
||
| import SnackInline from '~/components/plugins/SnackInline'; | ||
|
|
||
| We're going to create our own custom button using the `TouchableOpacity` component and some styled `Text` inside of it. | ||
|
|
||
| <SnackInline label="Simple button"> | ||
|
|
||
| ```jsx | ||
| import React from 'react'; | ||
| import { Image, StyleSheet, Text, /* @info Add the TouchableOpacity component to your list of imports */ TouchableOpacity,/* @end */ View } from 'react-native'; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <View style={styles.container}> | ||
| <Image source={{ uri: 'https://i.imgur.com/TkIrScD.png' }} style={styles.logo} /> | ||
| <Text style={styles.instructions}> | ||
| To share a photo from your phone with a friend, just press the button below! | ||
| </Text> | ||
|
|
||
| /* @info onPress takes a function that should be called when the button is pressed */ | ||
| <TouchableOpacity | ||
| onPress={() => alert('Hello, world!')} | ||
| style={{ backgroundColor: 'blue' }}> | ||
| <Text style={{ fontSize: 20, color: '#fff' }}>Pick a photo</Text> | ||
| </TouchableOpacity>/* @end */ | ||
|
|
||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| backgroundColor: '#fff', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }, | ||
| logo: { | ||
| width: 305, | ||
| height: 159, | ||
| marginBottom: 20, | ||
| }, | ||
| instructions: { | ||
| color: '#888', | ||
| fontSize: 18, | ||
| marginHorizontal: 15, | ||
| marginBottom: 10, | ||
| }, | ||
| }); | ||
| ``` | ||
|
|
||
| </SnackInline> | ||
|
|
||
| <br /> | ||
|
|
||
| Give it a try! Notice that when you press on the button it fades a little bit — this is because our background is white and the button becomes slightly translucent. When you release, you will see an alert dialog. You can show this dialog any time in your apps by calling the `alert` function. | ||
|
|
||
| ## Making it easier to press the button | ||
|
|
||
| When you are using your finger to tap on a button, you don't want to have to hold your breathe and carefully aim your finger — the button should be big enough that it's easy to press for people with varying levels of dexterity and an assortment of finger sizes, from baby right up to big boy. | ||
|
|
||
| We can make our button bigger by adding some `padding` to our `TouchableOpacity`. We've already seen `width`, `height`, and various `margin` properties on our styles, `padding` is in the same family as those. They all tell React Native's layout system how big components should be and how they should be positioned relative to other components. The layout system is called [flexbox](https://facebook.github.io/react-native/docs/flexbox), but don't worry about that for now, in this tutorial we will tell you exactly what styles to use and you can learn about flexbox later. | ||
|
|
||
| <SnackInline label="Simple button"> | ||
|
|
||
| ```jsx | ||
| import React from 'react'; | ||
| import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <View style={styles.container}> | ||
| <Image source={{ uri: 'https://i.imgur.com/TkIrScD.png' }} style={styles.logo} /> | ||
| <Text style={styles.instructions}> | ||
| To share a photo from your phone with a friend, just press the button below! | ||
| </Text> | ||
|
|
||
| <TouchableOpacity onPress={() => alert('Hello, world!')} /* @info We moved our our style down to the StyleSheet, keep scrolling! */ style={styles.button}/* @end */> | ||
| <Text /* @info See StyleSheet */style={styles.buttonText}/* @end */>Pick a photo</Text> | ||
| </TouchableOpacity> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| backgroundColor: '#fff', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }, | ||
| logo: { | ||
| width: 305, | ||
| height: 159, | ||
| marginBottom: 20, | ||
| }, | ||
| instructions: { | ||
| color: '#888', | ||
| fontSize: 18, | ||
| marginHorizontal: 15, | ||
| marginBottom: 10, | ||
| }, | ||
| /* @info Our button, now with some padding. Rounded corners are a bonus thanks to borderRadius. */ | ||
| button: { | ||
| backgroundColor: "blue", | ||
| padding: 20, | ||
| borderRadius: 5, | ||
| }, | ||
| buttonText: { | ||
| fontSize: 20, | ||
| color: '#fff', | ||
| }, /* @end */ | ||
|
|
||
| }); | ||
| ``` | ||
|
|
||
| </SnackInline> | ||
|
|
||
| <br /> | ||
|
|
||
| > 📜 Yikes, these code snippets are getting long. For the rest of the tutorial we'll show only relevant code here, and you can click through to Snack to see the full code. | ||
| - We have a button! We can now make that button do what we want it to do: open an "image picker" - a screen with a gallery of images on your device. [Continue to the next section](../../tutorial/image-picker/). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| --- | ||
| title: Learning more | ||
| --- | ||
|
|
||
| We tried to set expectations early on that this tutorial is more focused towards *doing* than *explaining*. Now that the doing is done, explanations are in order. | ||
|
|
||
| <br /> | ||
|
|
||
| # Filling in the gaps on concepts that we applied | ||
|
|
||
| ## React | ||
|
|
||
| We used React components and APIs here with little explaination. Having a solid understanding of React is essential to using Expo to build your app. We recommend reading the [Main Concepts section](https://reactjs.org/docs/hello-world.html) and the [Hooks section](https://reactjs.org/docs/hooks-intro.html) of the React documentation. | ||
|
|
||
| <!-- TODO: replace this recommendation with the react-native tutorial when it's live --> | ||
|
|
||
| ### How to verify your Learning | ||
|
|
||
| - You understand how to use `React.useState`, that it is a *hook*, and what the equivalent for React *class* components is. | ||
| - Add a new button to clear the selected image state. | ||
| - You can create a reusable `Button` component to clean up duplication of `TouchableOpacity` / `Text`. | ||
|
|
||
| ## async/await, import, and other JavaScript features | ||
|
|
||
| Read about [Modern JavaScript on React Native Express](http://www.reactnativeexpress.com/modern_javascript). | ||
|
|
||
| ### How to verify your Learning | ||
|
|
||
| - You can move part of the code from our app into a separate file, export it, and import it successfully into App.js. | ||
|
|
||
| ## View and Text styles | ||
|
|
||
| Read through the [View API reference](https://facebook.github.io/react-native/docs/view) and [Text API reference](https://facebook.github.io/react-native/docs/text) in the React Native documentation. | ||
|
|
||
| ### How to verify your Learning | ||
|
|
||
| - Remove all of the styles from your app and attempt to re-create them from scratch, only referring to the View and Text API reference pages when needed. | ||
|
|
||
| ## Flexbox | ||
|
|
||
| This is the way you position and size the components on your screen. Learn more about it in [Height & Width](https://facebook.github.io/react-native/docs/height-and-width) and [Layout with Flexbox](https://facebook.github.io/react-native/docs/flexbox) in the React Native documentation. | ||
|
|
||
| ### How to verify your Learning | ||
|
|
||
| - Remove the logo image and re-build it using just `View`, `Text`. Use the "sunrise over mountains" 🌄 emoji where needed. | ||
|
|
||
| <br /> | ||
|
|
||
| # Topics that we didn't cover and you will soon care about | ||
|
|
||
| ## Deployment | ||
|
|
||
| How can you take what you have built and turn it into an app that you ship to the App Store and Play Store. Learn more about [distributing your app to stores](../../distribution/introduction/) and [deploying websites](../../guides/deploying-websites/). | ||
|
|
||
| ## Configuration with app.json | ||
|
|
||
| You will want to configure your app icon, splash screen, and other things that are done in `app.json` rather than in your app code. Learn more about [app icons](../../guides/splash-screens/) and [splash screens](../../guides/app-icons/). | ||
|
|
||
| ## Navigation | ||
|
|
||
| Most apps have multiple screens, we just have one here! Learn more about how to add navigation to your app by following the [Fundamentals guide](https://reactnavigation.org/docs/en/getting-started.html) in the React Navigation documentation. | ||
|
|
||
| ## Debugging | ||
|
|
||
| Sometimes things go wrong, and when they do you need to use debugging tools to figure out where your code is having trouble. [Read more about debugging](../../workflow/debugging/). | ||
|
|
||
| ## Using the documentation | ||
|
|
||
| [Read more about how you can navigate this documentation and use it effectively](../../next-steps/using-the-documentation/). |
Oops, something went wrong.