Download as PDF, PPTX
Uploaded byTracy Lee
React Native - Getting Started
The document provides an overview of React Native, focusing on its components, styling methods using styled-components, and navigation using react-navigation. It outlines steps for setting up a React Native project along with tips for troubleshooting and managing state. Additionally, various resources are mentioned for further assistance in learning and utilizing React Native effectively.
More Related Content
Similar to React Native - Getting Started
![Inclusive Architecture - Introducing the PAMstack - [Refactr.tech]](https://cdn.slidesharecdn.com/ss_thumbnails/refactr-190614202717-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
React Native - Getting Started
- 3. TRACY LEE |@ladyleet SPEAKER & GOOGLE DEVELOPER EXPERT DEV - ANGULAR, EMBER, REACT, RXJS TECH WRITER & PODCASTER THIS DOT MEDIA / LABS MENTOR
- 4. React + ReactNative + Native
- 5. React Native isnot ALL JavaScript
- 6. React Native isnot ALL JavaScript
- 7. React Native ispowerful because we have a JavaScript interface for code implemented natively.
- 8. A PRACTICAL APPROACH TOREACT NATIVE
- 10. OUR AGENDA 1. @ladyleet 2. Buildingan app 4. Navigation 5. React Native Ecosystem React Native Components 3. Styling
- 11. @ladyleet React Native Components BasicComponents User Interface List Views iOS Components & APIs Android Components & APIs
- 12.
- 13. CREATING A PROJECT 1.Install Xcode 2. $ yarn global add react-native-cli 3. $ react-native init <appName> @ladyleet
- 14.
- 15.
- 16. 1. kill allyour processes 2. $ npm start — —reset-cache @ladyleet (solves 99% of your problems) THE MAGIC TRICK
- 17.
- 18.
- 19. SETUP TIPS Create an/src folder with an App.js @ladyleet Copy/paste index.ios.js into App.js Import App.js into index.ios.js and index.android.js
- 20.
- 21.
- 22.
- 23.
- 24. $ yarn addstyled-components @ladyleet
- 25. @ladyleet$ yarn addstyled-components STYLED COMPONENTS
- 26. @ladyleet STYLED COMPONENTS Create anew variable, which becomes a React Native component.
- 27.
- 28.
- 29.
- 30. $ yarn addreact-navigation @ladyleet USING REACT-NAVIGATION
- 31.
- 32.
- 33. @ladyleet TabNavigator import { TabNavigator} from ‘react-navigation’;
- 34. @ladyleet Create components youwill be navigating to in /src. Create a variable to define the TabNavigator. TabNavigator Import those components into your App.js
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. @ladyleet Create 2 componentsQuestions.js and Answer.js DISPLAYING DATA Each component should have a <View/> and <Text/> Use { this.props.q } and { this.props.a } We’ll pass the data on the parent component
- 42.
- 43. @ladyleet Import Questions.js andAnswer.js into a component DISPLAYING DATA Ex. the React.js component Create an array of data with questions and answers
- 44.
- 45.
- 46. OUR AGENDA 1. @ladyleet 2. Buildingan app 4. Navigation 5. React Native Components 3. Styling React Native Ecosystem
- 47. @ladyleet State Management Animations React NativeEcosystem Where to find help
- 48. @ladyleet State Management setState -react default Redux - redux.js.org MobX - mobx.js.org Morearty - github.com/moreartyjs
- 49. @ladyleet Animations React Native Animatable github.com/oblador/react-native-animatable facebook.github.io/react-native/docs/animated.html Lottieby Airbnb airbnb.design/introducing-lottie React Native’s Animated API
- 50. @ladyleet React Native’s AnimatedAPI Animated gives you 4 animatable component types: Text, Image, View & ScrollView Or you can create your own using Animated.createAnimatedComponent()
- 51. @ladyleet Lottie by Airbnb RenderAfter Effects animations in real time
- 52. @ladyleet Where to findhelp Twitter Documentation Medium articles egghead.io Front End Masters
- 53. @ladyleet React Native isamazing for JavaScript developers who want high flexibility and the ability to build mobile apps with a powerful JavaScript interface.
- 54. @ladyleet React Native isbest for people who want to have full control of their applications and understand the intricacies of their code’s inner workings without heavy abstractions.
- 55. Let’s get intobuilding the actual app!