Book Image

Mastering React Native

Book Image

Mastering React Native

Overview of this book

React Native has completely revolutionized mobile development by empowering JavaScript developers to build world-class mobile apps that run natively on mobile platforms. This book will show you how to apply JavaScript and other front-end skills to build cross-platform React Native applications for iOS and Android using a single codebase. This book will provide you with all the React Native building blocks necessary to become an expert. We’ll give you a brief explanation of the numerous native components and APIs that come bundled with React Native including Images, Views, ListViews, WebViews, and much more. You will learn to utilize form inputs in React Native. You’ll get an overview of Facebook’s Flux data architecture and then apply Redux to manage data with a remote API. You will also learn to animate different parts of your application, as well as routing using React Native’s navigation APIs. By the end of the book, you will be able to build cutting-edge applications using the React Native framework.
Table of Contents (20 chapters)
Mastering React Native
Credits
Disclaimer
About the Authors
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

Getting started in React


To begin creating an interface in React, the first thing we need to do is break down the interface into conceptual components. We start with a large component, for instance, a news feed. We then say our large component is made up of, or composed of, other smaller components. In the case of our news feed, these smaller components might be individual news items. Each news item, in turn, might be composed of several even smaller components, such as images, a description, and a byline.

This process should continue until the smallest components are bite-sized, reusable visual units that can no longer be easily broken down into smaller pieces. Doing this exercise sets us up well for writing our first code in React. Here is what this process might look like for our hypothetical news reader application.

First, identify and give a name to the largest component we can find, in this case, a NewsFeed:

Now, draw boxes around the next largest set of components, the NewsItem components:

Next, we can zoom in on a single NewsItem and identify the components that it is made of. Here, we can see that there is an Image, a Title, a Description and a Byline:

We've now laid the groundwork to start creating a React application. We have identified six components and their relationships: the NewsFeed, which is composed of NewsItem components, which in turn are composed of Image, Title, Description, and Byline components.