React Native Masterclass
Download as PPTX, PDF•0 likes•257 views
This document provides instructions for installing and setting up React Native on a development environment. It lists the necessary prerequisites including Node.js, JDK 8, Android Studio, and Python. It then explains how to install React Native using either the quick start method with Create React Native App or the native code method. It also provides instructions for setting up Sublime Text as the code editor along with packages for Babel, ES6, ES7, and JSX syntax. Finally, it gives an overview of core React Native components like View and Flexbox for building user interfaces.
React Native Masterclass
- 1. Facebook Masterclass By：Ahmad Arif Faizin
- 3. What is React-Na • Text
- 4. Preparation • Node.js : https://nodejs.org/en/download/ • JDK 8 : http://www.oracle.com/technetwork/java/javase/downloads/jdk8- downloads-2133151.html • Android Studio : https://developer.android.com/studio/index.html?hl=id • Python 2 : https://www.python.org/downloads/windows/ • Open SSL : https://www.openssl.org/source/
- 5. Install React-Native (Quick Start) • npm install -g create-react-native-app • create-react-native-app AwesomeProject • cd AwesomeProject • npm start • Install Expo di Play Store Source : https://facebook.github.io/react-native/docs/getting- started.html
- 6. Install React-Native ver2 (Native Code) • npm install -g react-native-cli • react-native init AwesomeProject • cd AwesomeProject • react-native run-android Source : https://facebook.github.io/react-native/docs/getting-started.html
- 7. Install React-Native ver2 (Native Code) • npm install -g react-native-cli • react-native init AwesomeProject • cd AwesomeProject • react-native run-android Source : https://facebook.github.io/react-native/docs/getting-started.html
- 8. Sublime Setting • Use Sublime 3 • Preferences > Package Control > Install package control • Preferences > Package Control > search : babel • View > Syntax > Babel > Javascript Source : https://facebook.github.io/react-native/docs/tutorial.html https://packagecontrol.io/installation
- 9. ES6, ES7, & JSX ES6 • import, • from, • class, • extends, • () => JSX • <Text>Hello world!</Text> Source : http://www.reactnativeexpress.com/mo dern_javascript https://reactjs.org/docs/jsx-in- depth.html
- 10. View export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app cuy!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu.</Text> </View> ); } } - Hanya boleh ada 1 view di dalam return Source : http://www.reactnative express.com/view
- 11. Flexbox export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app cuy!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu.</Text> </View> ); } } - Hanya boleh ada 1 view di dalam return Source : http://www.reactnative express.com/flexbox
- 12. Thanks