React Workshop for AthenaHacks

A brief introduction to React Native

Transcript

1. Welcome to the React Workshop! Schedule: Introductions React Native – Up and Running History of React Q & A
2. React Native Up and Running!
3. So you want to build a mobile app? 1. Buy a $$$Mac and an $$$iPhone. 2. Set up Xcode. 3. Get an $$$iOS Developer Account. 4. Learn Objective C. 5. Download the Java JDK5 or JDK6 6. Configure Android SDK 7. Set up Eclipse IDE 8. Learn Java 9. Rewrite your whole application! 10. Want to share your app before it’s published? Good luck!
4. So you want to build a mobile app? 1. Buy a $$$Mac and an $$$iPhone. 2. Set up Xcode. 3. Get an $$$iOS Developer Account. 4. Learn Objective C. 5. Download the Java JDK5 or JDK6 6. Configure Android SDK 7. Set up Eclipse IDE 8. Learn Java 9. Learn Want to share your app before it’s published? Good luck!
5. Initial Set-Up While we talk about React Native… Do these steps (if you have not already): 1. install node.js on your laptop, which will also install npm: https://nodejs.org/en/download/ 2. update node if you haven't updated recently 3. Install the Expo Mobile Client for iOS or Android • search on your mobile phone app store for “Expo Project” • connect to the same wifi with your mobile phone and your laptop Bonus: Install the Expo “Desktop Development Tool” on your laptop • https://docs.epo.io/versions/v15.0.0/introduction/installation.html#installation Bonus: Install Android simulator, and (Mac only) Xcode and iOS simulator
6. If you are on windows : • You likely want to try using ‘yarn’ instead of ‘npm’. 1. Install node.js with npm as usual if you don’t have it. 2. Install the yarn package manager: https://yarnpkg.com/en/ 3. Use the word ‘yarn’ instead of ‘npm’ when running the installation for ’create-react-native-app’.
7. “Hello World” in 5 minutes tldr; Run these commands in your terminal: npm install -g create-react-native-app create-react-native-app my-app cd my-app/ npm start • Open the app in Expo on your smart phone (iOS or Android) • You must install the 'Expo' app on your phone AND be on the same wifi network as your laptop • If you have problems connecting please raise your hand and let us know. Tips on next slide! • Try changing the `App.js` file and see updates on your phone. Troubleshooting: • If ‘npm’ commands are slow on Windows, try ‘yarn’. See https://yarnpkg.com/en/ • Getting 'npm ERR! Error: EACCESS: permission denied'? See https://docs.npmjs.com/getting-started/fixing-npm-permissions • If a pop-up says ‘Xcode Devtools Required’ then choose the option to install Xcode devtools.
8. Problems connecting via the Expo app? • It may be that the campus wifi has settings or a firewall that prevent the Expo app from accessing the application you are running on your laptop. • Tips: • Try setting up a wifi hotspot and tethering on your phone and connecting to that network with your laptop. • If you are not able to use the tethering work-around; • If you have a Mac, or have the Genymotion Android emulator installed, try the Expo desktop application: . • Or use nGrok to set up a tunnel for connecting: • https://github.com/react-community/create-react-native-app/blob/master/react-native- scripts/template/README.md#networking • Shortened url: https://goo.gl/HK7kxK
10. React Native Components Example: https://facebook.github.io/react-native/docs/button.html
11. Adding a <Button> import { Stylesheet, Text, View, Button } from ‘react-native’; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <Text>Shake your phone to open the developer menu.</Text> <Button onPress={() => alert(‘Helloooooo world!’)} title=”Click me!" /> </View> ); } }
12. Adding Styles <Text style={styles.title}>Open up App.js to start working on your app!</Text> // … put it in the Stylesheet.create call const styles = StyleSheet.create({ container: { // … }, title: { fontSize: 30, }, });
13. Adding <ListView> import { Stylesheet, Text, View, ListView } from ‘react-native’; export default class App extends Component { constructor() { super(); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(['row 1', 'row 2']), }; } render() { return ( <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} /> ); } }
14. Network Requests • Fetch and Promises – this is just ES2015 JavaScript Fetch(‘…api url here’) .then((response) => { console.log(’got a response! ‘, response); // do something with it }) .catch((error) => { console.error(error); });
15. Network Requests in React Native If you want to try a real API endpoint here is an example: http://api.giphy.com/v1/gifs/search?q=funny+cat &api_key=dc6zaTOxFJmzC&rating=pg // … componentDidMount() { const apiEndpointURL = // your url here… fetch(apiEndpointURL) .then((response) => { this.setState({loading: false, data: response.data}); }) }
16. More Tasty Info: • React Native Docs: • https://facebook.github.io/react-native/docs/getting-started.html • Create-React-Native-App Docs: • https://github.com/react-community/create-react-native-app • Expo Docs: • https://docs.expo.io/versions/v15.0.0/index.html Happy hacking!