Mastering React Native: A Beginner’s Guide
- Length: 330 pages
- Edition: 1
- Language: English
- Publisher: CRC Press
- Publication Date: 2022-11-29
- ISBN-10: 1032314729
- ISBN-13: 9781032314723
- Sales Rank: #0 (See Top 100 Books)
Mastering React Native helps the reader master the React Native framework for faster and more robust mobile app development.
React Native is an open-source JavaScript framework that allows you to create applications for many platforms, including iOS, Android, and the web, all with the same code base. It is built on the React framework, and it provides all of React’s power to mobile app development.
React Native was a natural continuation of React. It is a mobile framework that includes JavaScript to create near-native apps. JSX, a hybrid of JavaScript and XML-like markup, is used to make React Native applications. The React Native “bridge” then calls the native rendering APIs in Objective-C (for iOS) or Java (for Android) behind the scenes (for Android). As a result, your app will appear and feel like any other mobile app, as it will be rendered using genuine mobile UI components instead of web views. React Native also offers JavaScript interfaces for platform APIs, allowing your React Native apps to use features such as user location and the phone camera.
If your app is UI focused, React Native is an excellent choice because it comes with an extensive UI library. Becoming a React Native developer gives you access to exciting, cutting-edge projects which frequently incorporate innovative technology like Augmented Reality. Job opportunities for React Native devs are aplenty, and it is undoubtedly a skill worthy of consideration owing to its popularity with startups and corporates alike.
With Mastering React Native, learning React Native becomes easy and will help readers undoubtedly advance their careers.
The Mastering Computer Science series is edited by Sufyan bin Uzayr, a writer and educator with more than a decade of experience in the computing field.
Cover Half Title Series Page Title Page Copyright Page Table of Contents Mastering Computer Science Series Preface About the Editor Chapter 1 Getting Started with React Native In This Chapter What Is React Native JSX Building and Testing the React Native App About React Native Release Prerequisite Installation History of React Native Various Steps to Optimizing the Performance of the React Native Applications Reduce System Size Reduce Image Size Photo Caching Improving Application Release Time JSON Data Upgrade Do Not Give if Not Needed Memory Leaks Animation in React Native Navigation Development Lack of Multithreading Improving Screen Orientations Make Maps Better Benefits of React Native Advantages Key Benefits Community Support Proper Performance Reusable Code and Advanced Components Benefits of Live and Hot Reloads Expensive Solution Simplified UI External Plugin Support Modular Architecture Growing Stability and Reliability Access to Libraries and Ready-to-Do Solutions Disadvantages of Native React Immaturity Hard to Learn Low Security Complex UI Long Initialization Time Memory Management Conclusion Chapter 2 Working with React Native In This Chapter How Does React Native Work? Process Involved in Working of React Native React Native Architecture Development Process React Native Features NPM Repository Support Reuse of Code Flexible Planning Language A Powerful Community Supports 3D Group Libraries Use High Performance in Mobile Environments HMR (Hot Module Replacement) UI-rich Skills The Future of React Native Development of Broadcast Model Advances in Platform-Agnosticism Ease of the Bridge Async Skills Expansion What Does the Development Process Look Like? React Native Component Life Cycle Phases Mounting Phase Constructor() static getDerivedStateFromProps() render() ComponentDidMount() Updating Phase Static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() Unmounting Phase componentWillUnmount() Error Handling Phase getDerivedStateFromError() componentDidCatch() Creates Components in a Traditional Responsive Way What Is the Component of React Native? React Native – Class Component Description React Native – Function Component Description Host Platform APIs Platform Module Detecting Android version Getting iOS Version Platform-Specific Extensions Native-specific Extensions (i.e. Sharing Code with NodeJS and Web) Conclusion Chapter 3 Building Your First Application In This Chapter Installation of React Native CLI Installing Windows Terminal Ways to Install Windows Terminal Installing Git How to Download Git? Install Git Installing Node.js and NPM package manager Introduction Requirements Installing Node.js and NPM on Windows System What Is NPM? How to Install or Update NPM Installing React Native CLI Installing Python React Native CLI Installing Android JDK JAVA_HOME Flexible Environment Installing Android Studio Android Studio: https://developer.android.com/studio Android Studio Configuration Installing Android SDK Android Studio SDK configuration Installing Visual Studio Code (IDE) How to Download and Install Visual Studio Code? How to Install VStudio Code on Windows? Why Do You Use React Native? Setting Up Your Environment Running React Native Application Modifying Your App Exploring the Sample code Building an App Building an Android App with React Native STEP 1: Blank React Native Project Creation STEP 2: Connect Android Device STEP 3: Getting Information from the Moviedb API STEP 4: Defining the fetchMoviesData Method STEP 5: Creating the Life Cycle componentDidMount Method STEP 6: View Creation STEP 7: Reconstructing the Return Method STEP 8: Running the App Conclusion React Native – Default Application Props and State Definition State Difference between State and Props Using State Updating State Build Your First App with React Native Creating an App At the Start of NPM What Is Cross-Platform Development? What Are Some of the Features of Cross-Platform Development? A Lot of Listeners Stability of the Court Reusable Code Rapid Development Reduced Costs Requires Additional Technology to Ensure High Performance Chapter Summary Chapter 4 Components for Mobile Development In This Chapter Components for Mobile Analogies between HTML and Native Components The Text Component The Image Component Working with Touch and Gestures Using TouchableHighlight Touch/PressDemo.js illustrates the use of TouchableHighlight GestureResponder System PanResponder Creating a PanResponder requires us to pass a set of callbacks Attaching the PanResponder using spread syntax Touch/PanDemo.js explain the use of PanResponder Choosing a Touch Management Method Working with Organizational Components Using ListView For _renderRow, we only pass along the suitable data to the <BookItem> Adding methods render to header and footer elements in BookListV2.js Bestsellers/BookItem.js Using Navigators Other Organizational Components Platform-Specific Components iOS- or Android-Only Components Components with Platform-Specific Versions Switch.ios.js CrossPlatform.js Makes Use of the <Switch> Component When to Use Platform-Specific Components Summary Conclusion Chapter 5 Styles and Layouts In This Chapter 1. Styles Are Important: Make Them Easy to Find 2. Get Atomic! 3. Styles Are Important: Make Them Easy to Use 4. Keep Styles Close Caveats Container Component Presentational Component React Native Style Method Style Props React Native Application: The Flexbox Architecture Using StyleSheet Styled-Component in React Native Using React Native SVG to Draw Certain Conditions Organization and Inheritance Style Inheritance of React Native Realistic Way to Implement Custom Fonts to Your App Creating React Application Step to Run Application Output: Positioning and Designing Layouts Positioning Starting with the View Positioning Basics Layout with Flexbox Flex Flex Direction Layout Direction Justify Content Align Items Align Yourself Align Content Flex Wrap Flex Basis, Grow, and Shrink Width and Height Absolute and Relative Layout Conclusion Chapter 6 Platform APIs In This Chapter Platform APIs What Is an API Platform? Adding to the Traditional Look in Managing the Full Life API Using Geolocation Detecting Geolocation Support Using getCurrentPosition Position Error Timeout Managing Position Errors Tracking Position Changes Setting Links Using Chromium Developer Tools How the Position Is Determined Nearby iOS Location Find User Location Using the Geolocation API Handling Errors and Rejections Showing the Result in the Map Location-Specific Information The getCurrentPosition() Method – Return Data Geolocation Object – Other interesting Methods @capacitor/geolocation Install iOS Android Variables API getCurrentPosition(…) watchPosition(…) clearWatch(…) checkPermissions() requestPermissions(…) Interfaces Type Aliases Accessing the User’s Images and Camera Create the Page Add File Input Add a Canvas Respond to Change Draw into the Canvas Options Storing Persistent Data with asyncstore Importing AsyncStorage Library Persisting Data Fetching Data Methods getItem() setItem() removeItem() mergeItem() clear() getAllKeys() flushGetRequests() multiGet() multiSet() multiRemove() multiMerge() Conclusion Chapter 7 React Native Modules In This Chapter Modules Native Modules Intro Installing JavaScript Libraries with NPM What Exactly Is NPM? How to Download NPM? How to Download Packages Using NPM? How to Download Packages Globally with NPM How to Use the package iOS Native Modules Create a Calendar Native Module Setup Create Custom Native Module Files Module Name Export a Native Method to JavaScript Synchronous Methods Test What You Have Built Building as You Iterate Recap Beyond a Calendar Native Module Better Native Module Export Argument Types Exporting Constants Callbacks Promises Sending Events to JavaScript Threading Dependency Injection Exporting Swift Reserved Method Names Native Modules for Android Create a Calendar Native Module Setup Create Custom Native Module File Module Name Export a Native Method to JavaScript Synchronous Methods Register the Module (Android Specific) Test What You Have Built Building as You Iterate Recap Beyond a Calendar Native Module Better Native Module Export Argument Types Exporting Constants Callbacks Promises Sending Events to JavaScript Getting Activity Result from startActivityForResult Listening to Lifecycle Events Threading Cross-Platform Native Modules What Are the Advantages of Cross-Platform Application Development Frameworks? Code Reusability Reduced Costs and Resources Easy Deployment and Maintenance Wider Market Reach Uniform Design Conclusion Chapter 8 Debugging and Developer Tools In This Chapter Debugging and Developer Tools Enabling Fast Refresh Enabling Keyboard Shortcuts LogBox Console Errors and Warnings Unhandled Errors Syntax Errors Chrome Developer Tools Debugging Using a Custom JavaScript Debugger Safari Developer Tools React Developer Tools Integration with React Native Inspector Inspecting Component Instances Performance Monitor Debugging Application State Native Debugging Projects with Native Code Only Accessing Console Logs Debugging on a Device with the Chrome Developer Tools Debugging Native Code Javascript Debugging Practices Translated Best Practices Beautify to Debug Debugging Methods Console Method Using a Debugger Breakpoints Unconditional Breakpoints Using a Breakpoint List Adding Logpoints Unsetting Breakpoints Using Watches Using Call Stack Debugging Tools Rookout NodeJS Inspector Using a Code Editor Framework Debugging Tools (Angular, React, Vue) JSON Formatter and Validator “use strict” Mode React Native Debugging Tools Top 6 Debugging Tools for React Native Developers Chrome’s DevTools React Developer Tools React Native Debugger Redux DevTools Nuclide – Atom’s Plug-in Reactotron Debugging Beyond JavaScript The Basics of Console Logging Beyond the Basics of Console Logging console.table() console.assert() console.trace() console.count() console.memory console.time() Conclusion Chapter 9 Putting It All Together In This Chapter The Flashcard Application React Native Flashcards How to Install How to Run Modeling and Storing Data Storing Data in the React Native Local Storage with Examples Using the Navigator React Navigation 5.0 Installing React Navigation The React Native Stack Navigator React Native Navigation Examples Using Stack Navigator to Navigate between the Screen Components Using Tab Navigation Using Drawer Navigation Conclusion Chapter 10 Deploying to the iOS App Store In This Chapter Comply with the Developer’s Specifications Choose an iOS Programming Language Tap into APIs and Libraries Expand into the Cloud Test Locally, Test Globally Publish Your App to the App Store Creating an Xcode Project for an App Overview Prepare Configuration Information Important Create a Project Manage Files in the Main Window Beta Testing With Testflight Testflight Is Used for Beta Testing Advantages of Beta Testing Beta Testing by Using Testflight Main Functions of Testflight Algorithm for Testing the Application’s Beta Versions Internal Testers External Testers and Groups Using E-mail to Invite Testers Using Public Links to Invite Testers Test Information Getting Feedback Submitting the Application for Review Code Signing: Create iOS Distribution Provisioning Profile and Distribution Certificate When you attach a new device to your Mac, Xcode detects it and adds it to your team provisioning profile automatically. It’s worth noting that in order for your app to run on a device, the device must register on your team provisioning profile. Create App Store Connect Record for Your App For Paid Apps Add a New App Archive and Upload App Using Xcode Configure App’s Metadata and Further Details in its App Store Connect Record Submit Your App for Review Check on the Status of App How Long Does It Take to Get Approval from an App Store? If Your Application Has Been Rejected If Your Application Has Been Approved Summary Conclusion Chapter 11 Deploying Android Applications In This Chapter List the Pods, with Their Attached Labels Select Pods with the Label Provided Deploy a Webserver Using the CLI List ReplicaSets and Pods Exposing an Application Accessing an Application Life and Readiness to Test Building the APK for Release Using the React Native CLI STEP 1: Generate a Keystore STEP 2: Adding Keystore to Your Project STEP 3: Uninstall the APK Generation Generate React Native Release Build with Android Studio How to Send E-mail From React Native Application Distributing the React Native App with Microsoft App Center Getting Started Three Ways to Send E-mails from React Native App Configuring Linking API Working with Your Own Server Using Third-Party Tools Wrap Up Submit Your Request to the Google Play Store Produces the Upload Key Add a Signing Setting to Gradle for Your App Generating the Release AAB Testing the Release Build of Your App Publishing in Other Stores Enables Proguard to Reduce APK Size (Optional) Modify Old Android React Native Apps to Use Google Play Signing App Conclusion Appraisal Bibliography Index
Donate to keep this site alive
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.