Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag South Korea
Country selected
country flag Turkey
Country selected
country flag Switzerland
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Chile
Country selected
country flag Norway
Country selected
country flag Ecuador
Country selected
country flag Indonesia
Country selected
country flag New Zealand
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag Austria
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag South Africa
Country selected
country flag Malaysia
Country selected
country flag Japan
Country selected
country flag Slovakia
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Home > Mobile > Cross Platform Mobile Development > Getting Started with React Native
Getting Started with React Native
Getting Started with React Native

Getting Started with React Native: Learn to build modern native iOS and Android applications using JavaScript and the incredible power of React

Arrow left icon
Profile Icon Holmes Profile Icon Bray
Arrow right icon
S$12.99 S$35.99
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (1 Ratings)
eBook Dec 2015 172 pages 1st Edition
eBook
S$12.99 S$35.99
Paperback
S$44.99
Subscription
Free Trial
Arrow left icon
Profile Icon Holmes Profile Icon Bray
Arrow right icon
S$12.99 S$35.99
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (1 Ratings)
eBook Dec 2015 172 pages 1st Edition
eBook
S$12.99 S$35.99
Paperback
S$44.99
Subscription
Free Trial
eBook
S$12.99 S$35.99
Paperback
S$44.99
Subscription
Free Trial

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Getting Started with React Native

Chapter 2. Understanding React Native Fundamentals

You might not be familiar with how React for Web works, so we are going to cover the fundamentals in this chapter. We will also explain the core principles of how React for Web works under the hood. Once you have a solid understanding of the basics, we will dive into how React for Web works and the subtle differences between mobile and web. By the end of this chapter, you will have the necessary skills to start building the example application.

In this chapter we will cover the following topics:

  • The Virtual DOM
  • Introducing components and JSX
  • Writing our first component
  • Props and state of components

The Virtual DOM

Do you know how to write a JavaScript function? If you do, that's great! You're well on your way to understand how React and React Native work under the hood. What do we mean exactly? Well, when you research how React works, you'll eventually encounter someone explaining it in the following manner:

UI = f(data)

You may say, Nerd alert! How is this helpful? Well, it's saying that your UI is a function of your data. To put it in more familiar terms, let's say that:

var todos = function(data) { return data.join( " -- " ) }

You can call the function with an array of data, such as:

var ui = todos( ["wake up", "get out of bed", "drag a comb across my head"] );
console.log(ui);

This is not a particularly earth-shattering code; however, you're now rendering some content, in this case to the console.

What if, all your UI rendering code could be this predictable? It can be! Let's start getting a little more advanced...

Components

Now here is an interesting problem; we have come across this great framework for making fast differences between the Virtual DOM and its native components. How do we tell React Native what UI to represent or when to change it? A React Native component is a simple, reusable, function-like object that enables us to describe the native mobile components we want to render. They will always contain properties, state, and a render method. Let's start really simple by creating our own component.

Creating your first component

Creating a new component in React Native will look similar to the following:

import React, {
  Text,
  View
  } from 'react-native';
class HelloComponent extends React.Component {
  render () {
    return (
    <View>
      <Text>Hello React</Text>
    <View>
  );
  }
}

Tip

Remember to import the React Native module. Here, we are using the ES6 import statement; it is similar to how the node require module works.

Wait a second…...

Summary

Now hopefully, you understand the radical new direction React has taken in achieving performance. The Virtual DOM handles all of the DOM manipulations for us behind the scenes. At the same time, it uses efficient diffing algorithms to minimize the number of calls to the DOM. We have also seen how JSX allows us to express our components declaratively and combine our application logic into a single file. By using props and state, we can pass the data through components and update them dynamically.

I hope you can now take the information you learned in this chapter and convince your boss to start using React Native right away!

Left arrow icon

Page 1 of 4

Right arrow icon

Key benefits

  • Learn to design and build a fully-featured application using the newest cutting-edge framework from Facebook
  • Leverage your JavaScript skills to become a native app developer
  • Develop custom UI components, implement smooth navigation, and access native features such as geolocation and local storage

Description

React Native is a game-changing approach to hybrid mobile development. Web developers can leverage their existing skills to write mobile applications in JavaScript that are truly native without using cross-compilation or web views. These applications have all of the advantages of those written in Objective-C or Java, combined with the rapid development cycle that JavaScript developers are accustomed to. Web developers who want to develop native mobile applications face a high barrier to entry, because they are forced to learn platform-specific languages and frameworks. Numerous hybrid technologies have tried to simplify this process, but have failed to achieve the performance and appearance that users expect. This book will show you all the advantages of true native development that React Native has without the steep learning curve, leveraging the knowledge you already have. We do this by getting you up and running quickly with a sample application. Next, we’ll introduce you to the fundamentals of creating components and explain how React Native works under the hood. Once you have established a solid foundation, you will dive headfirst into developing a real-world application from start to finish. Along the way, we will demonstrate how to create multiple screens and navigate between them,use layout and style native UI components, and access native APIs such as local storage and geolocation. Finally, we tackle the advanced topic of Native modules, which demonstrates that there are truly no limits to what you can do with React Native.

Who is this book for?

This book is for web developers who want to learn to build fast, good-looking, native mobile applications using the skills they already have. If you already have some JavaScript knowledge or are using React on the web, then you will be able to quickly get up and running with React Native for iOS and Android.

What you will learn

  • Set up the React Native environment on both devices and emulators
  • Gain an in-depth understanding of how React Native works behind the scenes
  • Write your own custom native UI components
  • Learn the ins and outs of screen navigation
  • Master the art of layout and styles
  • Work with device-exclusive data such as geolocation
  • Develop native modules in Objective-C and Java that interact with JavaScript
  • Test and deploy your application for a production-ready environment

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Dec 18, 2015
Length: 172 pages
Edition : 1st
Language : English
ISBN-13 : 9781785886232
Vendor :
Facebook
Category :
Mobile
Languages :
JavaScript
Concepts :
Cross Platform Mobile Development
Tools :
React Native

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Dec 18, 2015
Length: 172 pages
Edition : 1st
Language : English
ISBN-13 : 9781785886232
Vendor :
Facebook
Category :
Mobile
Languages :
JavaScript
Concepts :
Cross Platform Mobile Development
Tools :
React Native

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
START FREE TRIAL
BUY NOW
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just S$6 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just S$6 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

ReactJS by Example - Building Modern Web Applications with React
ReactJS by Example - Building Modern Web Applications with React
Read more
Apr 2016 280 pages
Full star icon 2.4 (9)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$66.99
S$12.99 S$52.99
S$66.99
React.js Essentials
React.js Essentials
Read more
Aug 2015 208 pages
Full star icon 4 (32)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$44.99
S$12.99 S$35.99
S$44.99
Getting Started with React Native
Getting Started with React Native
Read more
Dec 2015 172 pages
Full star icon 5 (1)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$44.99
S$12.99 S$35.99
S$44.99
Stars icon
Total S$ 156.97
ReactJS by Example - Building Modern Web Applications with React
S$66.99
React.js Essentials
S$44.99
Getting Started with React Native
S$44.99
Total S$ 156.97 Stars icon
Banner background image

Table of Contents

9 Chapters
1. Exploring the Sample Application Chevron down icon Chevron up icon
1. Exploring the Sample Application
Installing Xcode
Running the sample application
Experimenting with the sample application
Summary
2. Understanding React Native Fundamentals Chevron down icon Chevron up icon
2. Understanding React Native Fundamentals
The Virtual DOM
Components
Summary
3. Beginning with the Example Application Chevron down icon Chevron up icon
3. Beginning with the Example Application
Generating the projects
Structuring the application
Navigation
Summary
4. Working with Styles and Layout Chevron down icon Chevron up icon
4. Working with Styles and Layout
React CSS
Layout and Flexbox
Styling the NavigationBar component
Styling the NoteScreen
Summary
5. Displaying and Saving Data Chevron down icon Chevron up icon
5. Displaying and Saving Data
Lists
Summary
6. Working with Geolocation and Maps Chevron down icon Chevron up icon
6. Working with Geolocation and Maps
Introducing the Geolocation API
Tagging notes with geolocation
NoteLocationScreen
Summary
7. Integrating Native Modules Chevron down icon Chevron up icon
7. Integrating Native Modules
Adding images to notes
Installing react-native-camera on iOS
Viewing images
Connecting the final pieces
Summary
8. Releasing the Application Chevron down icon Chevron up icon
8. Releasing the Application
Generating the static bundle in iOS
Testing the static bundle in iOS
Creating an iOS release in Xcode
Generating the Android APK
Summary
Index Chevron down icon Chevron up icon
Index

Recommendations for you

Left arrow icon
.NET MAUI Cookbook
.NET MAUI Cookbook
Read more
Dec 2024 384 pages
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$60.99
S$12.99 S$48.99
S$60.99
iOS 18 Programming for Beginners
iOS 18 Programming for Beginners
Read more
Dec 2024 584 pages
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$60.99
S$12.99 S$48.99
S$60.99
Apps and Services with .NET 8
Apps and Services with .NET 8
Read more
Dec 2023 798 pages
Full star icon 4.8 (22)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$67.99
S$12.99 S$53.99
S$67.99
Flutter Design Patterns and Best Practices
Flutter Design Patterns and Best Practices
Read more
Sep 2024 362 pages
Full star icon 5 (4)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$60.99
S$12.99 S$48.99
S$60.99
Mastering iOS 18 Development
Mastering iOS 18 Development
Read more
Nov 2024 418 pages
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$56.99
S$12.99 S$45.99
S$56.99
Mastering Kotlin for Android 14
Mastering Kotlin for Android 14
Read more
Apr 2024 370 pages
Full star icon 5 (8)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$53.99
S$12.99 S$43.99
S$53.99
Thriving in Android Development Using Kotlin
Thriving in Android Development Using Kotlin
Read more
Jul 2024 410 pages
Full star icon 5 (5)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$74.99
S$12.99 S$59.99
S$74.99
Swift Cookbook
Swift Cookbook
Read more
Jun 2024 422 pages
Full star icon 5 (3)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$53.99
S$12.99 S$43.99
S$53.99
Android Programming for Beginners
Android Programming for Beginners
Read more
Apr 2021 742 pages
Full star icon 4.2 (12)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$59.99
S$12.99 S$47.99
S$59.99
How to Build Android Apps with Kotlin
How to Build Android Apps with Kotlin
Read more
May 2023 704 pages
Full star icon 4.4 (14)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$140.99
S$12.99 S$112.99
S$140.99
Right arrow icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(1 Ratings)
5 star 100%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
CrescendoLife Sep 22, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
The star rating is provisional--I wanted to post a timely answer/reply to those struggling to get book code functioning as previously noted. A solution was found for the issue I noted on the following url: [note: Amazon blocks all non-Amazon urls so looking for possible way to link the essential info to get code working] (title of page: RCTRootView.h' file not found #1) Steps are outlined on resolving issue. Sample code ran after this fix.
Amazon Verified review Amazon

People who bought this also bought

Left arrow icon
Apps and Services with .NET 7
Apps and Services with .NET 7
Read more
Nov 2022 814 pages
Full star icon 4.8 (27)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$67.99
S$12.99 S$53.99
S$67.99
Apps and Services with .NET 8
Apps and Services with .NET 8
Read more
Dec 2023 798 pages
Full star icon 4.8 (22)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$67.99
S$12.99 S$53.99
S$67.99
Machine Learning Techniques for Text
Machine Learning Techniques for Text
Read more
Oct 2022 448 pages
Full star icon 4.8 (6)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$63.99
S$12.99 S$50.99
S$63.99
iOS 16 Programming for Beginners
iOS 16 Programming for Beginners
Read more
Nov 2022 686 pages
Full star icon 4.7 (50)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$60.99
S$12.99 S$48.99
S$60.99
Test-Driven iOS Development with Swift
Test-Driven iOS Development with Swift
Read more
Apr 2022 280 pages
Full star icon 5 (3)
eBook
eBook
  • eBook eBook S$12.99
  • Paperback Paperback S$45.99
S$12.99 S$36.99
S$45.99
Right arrow icon

About the authors

Left arrow icon
Profile icon Holmes
Holmes
nan
Read more
See other products by Holmes
Profile icon Bray
Bray
nan
Read more
See other products by Bray
Right arrow icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.