Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only €10,99/month after trial. Cancel anytime.

    React and React Native
    React and React Native
    React and React Native
    Ebook871 pages6 hours

    React and React Native

    By Boduch Adam

    ()

    Read preview

    About this ebook

    About This Book
    • Build React and React Native applications using familiar component concepts
    • Dive deep into each platform, from routing in React to creating native mobile applications that can run offline
    • Use Facebook’s Relay, React and GraphQL technologies, to create a unified architecture that powers both web and native applications
    Who This Book Is For

    This book is written for any JavaScript developer—beginner or expert—who wants to start learning how to put both of Facebook’s UI libraries to work. No knowledge of React is needed, though a working knowledge of ES2015 will help you follow along better.

    LanguageEnglish
    PublisherPackt Publishing
    Release dateMar 8, 2017
    ISBN9781786469571
    React and React Native

    Read more from Boduch Adam

    Related to React and React Native

    Related ebooks

    Internet & Web For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      DJANGO Create A Database-driven Website

      Jun 4, 2019

      The Django web framework was named after the famous guitarist Django Reinhardt and was first created by web developers at a small newspaper in Kansas. The main goals of Django is to enable fast development of complex websites with database needs. It

      7 min read

    • Article

      Browser Wars 2020

      May 26, 2020

      Browser Wars 2020
      8 min read

    • Article

      Code An Admin Back-end In Django

      Dec 13, 2022

      Credit: www.djangoproject.com OUR EXPERT Matt Holder has been a fan of the open source methodology for over two decades and uses Linux and other tools where possible. More featurepacked source code for this project can be downloaded from https://

      6 min read

    • Article

      Browser wars 2020

      Nov 2, 2020

      Browser wars 2020
      8 min read

    • Article

      Browser Wars 2020

      Aug 24, 2020

      Browser Wars 2020
      8 min read

    • Article

      ReactOS: The Open Source Windows

      Dec 13, 2022

      ReactOS is an open source operating system that replicates the functionality R of the Microsoft Windows series of OSes while offering a considerable level of application compatibility. The current version is described as being at the alpha stage of d

      10 min read

    • Article

      Browser Wars 2020

      Jun 30, 2020

      Browser Wars 2020
      8 min read

    • Article

      Code A Cataloguing Application In Python

      Nov 15, 2022

      Credit: www.djangoproject.com Matt Holder has been a fan of the open source methodology for over two decades and uses Linux and other tools where possible. More featurepacked source code for this project can be downloaded from https://github.com/mat

      8 min read

    • Article

      Create Smaller Sized Apps With React

      Nov 19, 2019

      You may not be surprised that some developers have criticised Electron (see tutorials LXF256), mostly regarding the memory usage of its final binaries. The initial binary is over 100MB, because a major chunk of code from Chrome is embedded. When you

      6 min read

    • Article

      Discover Easy-to -build Desktop Apps

      Oct 22, 2019

      Electron is actually a browser packaged with node.js and a few APIs. Because it’s built on top of the Chromium browser, you have everything available from there to add to your application. GitHub developed it as part of the Atom editor; it was open-s

      7 min read

    • Article

      How To Use Mojolicious For Web Scraping

      Mar 8, 2022

      Part One Don’t miss next issue! Subscribe on page 16 Mark Gardner is a software developer and blogger with over 25 years of IT experience. You can reach him at www.phoenixtrap.com and @markjgardner. The map function is designed to transform a list or

      5 min read

    • Article

      How To Use Mojolicious For Web Scraping

      Mar 8, 2022

      Part One Don’t miss next issue! Subscribe on page 16 Mark Gardner is a software developer and blogger with over 25 years of IT experience. You can reach him at www.phoenixtrap.com and @markjgardner. The map function is designed to transform a list or

      5 min read

    • Article

      Three Low-code Options

      Nov 12, 2020

      Counting Intel, Vodafone and VW among its customers, OutSystems helps businesses create cloudbased, on-premises and hybrid applications for mobile and web. Its development environment is predominantly drag-and-drop, with views for processes, data and

      3 min read

    • Article

      Mind Your Language!

      Apr 4, 2023

      Mind Your Language!
      9 min read

    • Article

      Top 10 Programming Languages

      Jan 5, 2023

      Top 10 Programming Languages
      8 min read

    • Article

      RapidWeaver Classic

      Aug 23, 2022

      RapidWeaver Classic
      3 min read

    • Article

      Opinion

      Aug 20, 2024

      Italo Vignoli is one of the founders of LibreOffice and the Document Foundation. “Think about the personal and confidential information in your office suite documents; it’s essential your office suite respects user privacy. LibreOffice does not ask y

      3 min read

    • Article

      How Netflix’s OTT Architecture Functions?

      May 1, 2022

      With so many OTT platforms in the market today, Netflix has managed to capture a majority of the audience on a global scale. Netflix has become the go-to source of so much entertainment for consumers in less than 20 years. It can even be said that Ne

      4 min read

    • Article

      Computer-aided Design

      Jul 25, 2023

      Computer-aided Design
      13 min read

    • Article

      FLASK Web Frameworks

      Jun 4, 2019

      The main focus of Python has always been to get you cracking on with your coding – the language was never made for web programming. However, this has just made it more interesting to extend the language for the web, or to create an interface to web-b

      9 min read

    Related categories

    Reviews for React and React Native

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      React and React Native - Boduch Adam

      Table of Contents

      React and React Native

      Credits

      About the Author

      About the Reviewer

      www.PacktPub.com

      Why subscribe?

      Customer Feedback

      Dedication

      Preface

      About the book

      What this book covers

      Part I: React

      Part II: React Native

      Part III: React Architecture

      What you need for this book 

      Who this book is for

      Conventions

      Reader feedback

      Customer support

      Downloading the example code 

      Downloading the color images of this book

      Errata

      Piracy

      Questions

      1. Why React?

      What is React?

      React is just the view

      Simplicity is good

      Declarative UI structure

      Time and data

      Performance matters

      The right level of abstraction

      Summary

      2. Rendering with JSX

      What is JSX?

      Hello JSX

      Declarative UI structure

      Just like HTML

      Built-in HTML tags

      HTML tag conventions

      Describing UI structures

      Creating your own JSX elements

      Encapsulating HTML

      Nested elements

      Namespaced components

      Using JavaScript expressions

      Dynamic property values and text

      Mapping collections to elements

      Summary

      3. Understanding Properties and State

      What is component state?

      What are component properties?

      Setting component state

      Initial component state

      Setting component state

      Merging component state

      Passing property values

      Default property values

      Setting property values

      Stateless components

      Pure functional components

      Defaults in functional components

      Container components

      Summary

      4. Event Handling – The React Way

      Declaring event handlers

      Declaring handler functions

      Multiple event handlers

      Importing generic handlers

      Event handler context and parameters

      Auto-binding context

      Getting component data

      Inline event handlers

      Binding handlers to elements

      Synthetic event objects

      Event pooling

      Summary

      5. Crafting Reusable Components

      Reusable HTML elements

      The difficulty with monolithic components

      The JSX markup

      Initial state and state helpers

      Event handler implementation

      Refactoring component structures

      Start with the JSX

      Implementing an article list component

      Implementing an article item component

      Implementing an add article component

      Making components functional

      Rendering component trees

      Feature components and utility components

      Summary

      6. The React Component Lifecycle

      Why components need a lifecycle

      Initializing properties and state

      Fetching component data

      Initializing state with properties

      Updating state with properties

      Optimize rendering efficiency

      To render or not to render

      Using metadata to optimize rendering

      Rendering imperative components

      Rendering jQuery UI widgets

      Cleaning up after components

      Cleaning up asynchronous calls

      Summary

      7. Validating Component Properties

      Knowing what to expect

      Promoting portable components

      Simple property validators

      Basic type validation

      Requiring values

      Any property value

      Type and value validators

      Things that can be rendered

      Requiring specific types

      Requiring specific values

      Writing custom property validators

      Summary

      8. Extending Components

      Component inheritance

      Inheriting state

      Inheriting properties

      Inheriting JSX and event handlers

      Composition with higher-order components

      Conditional component rendering

      Providing data sources

      Summary

      9. Handling Navigation with Routes

      Declaring routes

      Hello route

      Decoupling route declarations

      Parent and child routes

      Handling route parameters

      Resource IDs in routes

      Optional parameters

      Using link components

      Basic linking

      URL and query parameters

      Lazy routing

      Summary

      10. Server-Side React Components

      What is isomorphic JavaScript?

      The server is a render target

      Initial load performance

      Sharing code between the backend and frontend

      Rendering to strings

      Backend routing

      Frontend reconciliation

      Fetching data

      Summary

      11. Mobile-First React Components

      The rationale behind mobile-first design

      Using react-bootstrap components

      Implementing navigation

      Lists

      Forms

      Summary

      12. Why React Native?

      What is React Native?

      React and JSX are familiar

      The mobile browser experience

      Android and iOS, different yet the same

      The case for mobile web apps

      Summary

      13. Kickstarting React Native Projects

      Using the React Native command-line tool

      iOS and Android simulators

      Xcode

      Genymotion

      Running the project

      Running iOS apps

      Running Android apps

      Summary

      14. Building Responsive Layouts with Flexbox

      Flexbox is the new layout standard

      Introducing React Native styles

      Building flexbox layouts

      Simple three column layout

      Improved three column layout

      Flexible rows

      Flexible grids

      Flexible rows and columns

      Summary

      15. Navigating Between Screens

      Screen organization

      Navigators, scenes, routes, and stacks

      Responding to routes

      Navigation bar

      Dynamic scenes

      Jumping back and forth

      Summary

      16. Rendering Item Lists

      Rendering data collections

      Sorting and filtering lists

      Fetching list data

      Lazy list loading

      Summary

      17. Showing Progress

      Progress and usability

      Indicating progress

      Measuring progress

      Navigation indicators

      Step progress

      Summary

      18. Geolocation and Maps

      Where am I?

      What's around me?

      Annotating points of interest

      Plotting points

      Plotting overlays

      Summary

      19. Collecting User Input

      Collecting text input

      Selecting from a list of options

      Toggling between off and on

      Collecting date/time input

      Summary

      20. Alerts, Notifications, and Confirmation

      Important information

      Getting user confirmation

      Success confirmation

      Error confirmation

      Passive notifications

      Activity modals

      Summary

      21. Responding to User Gestures

      Scrolling with our fingers

      Giving touch feedback

      Swipeable and cancellable

      Summary

      22. Controlling Image Display

      Loading images

      Resizing images

      Lazy image loading

      Rendering icons

      Summary

      23. Going Offline

      Detecting the state of the network

      Storing application data

      Synchronizing application data

      Summary

      24. Handling Application State

      Information architecture and Flux

      Unidirectionality

      Synchronous update rounds

      Predictable state transformations

      Unified information architecture

      Implementing Redux

      Initial application state

      Creating the store

      Store provider and routes

      The App component

      The Home component

      State in mobile apps

      Scaling the architecture

      Summary

      25. Why Relay and GraphQL?

      Yet another approach?

      Verbose vernacular

      Declarative data dependencies

      Mutating application state

      The GraphQL backend and microservices

      Summary

      26. Building a Relay React App

      TodoMVC and Relay

      The GraphQL schema

      Bootstrapping Relay

      Adding todo items

      Rendering todo items

      Completing todo items

      Summary

      React and React Native

      React and React Native

      Copyright © 2017 Packt Publishing

      All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

      Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

      Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

      First published: March 2017

      Production reference: 1280217

      Published by Packt Publishing Ltd.

      Livery Place

      35 Livery Street

      Birmingham 

      B3 2PB, UK.

      ISBN 978-1-78646-565-8

      www.packtpub.com

      Credits

      About the Author

      Adam Boduch has been involved with large-scale JavaScript development for nearly 10 years. Before moving to the front end, he worked on several large-scale cloud computing products, using Python and Linux. No stranger to complexity, Adam has practical experience with real-world software systems, and the scaling challenges they pose.

      He is the author of several JavaScript books, including Flux Architecture, and is passionate about innovative user experiences and high performance.

      Adam would like to acknowledge August Marcello III for all of his technical expertise and hard work that went into reviewing this book. Thanks buddy.

      About the Reviewer

      August Marcello III is a highly passionate software engineer with nearly two decades of experience in the design, implementation, and deployment of modern client-side web application architectures in the enterprise. An exclusive focus on delivering compelling SaaS-based user experiences throughout the Web ecosystem has proven both personally and professionally rewarding. His passion for emerging technologies in general, combined with a particular focus on forward-thinking JavaScript platforms, have been a primary driver in his pursuit of technical excellence. When he's not coding, he could be found trail running, mountain biking, and spending time with family and friends.

      Many thanks to Chuck, Mark, Eric, and Adam, who I have had the privilege to work with and learn from. I'm grateful to my family, friends, and the experiences I have been blessed to be a part of.

      www.PacktPub.com

      For support files and downloads related to your book, please visit www.PacktPub.com.

      Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@packtpub.com for more details.

      At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

      https://www.packtpub.com/mapt

      Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.

      Why subscribe?

      Fully searchable across every book published by Packt

      Copy and paste, print, and bookmark content

      On demand and accessible via a web browser

      Customer Feedback

      Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at https://www.amazon.com/dp/1786465655.

      If you'd like to join our team of regular reviewers, you can email us at customerreviews@packtpub.com. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!

      Dedication

      For Melissa, Jason, Simon, and Kevin

      Preface

      About the book

      I never had any interest in developing mobile apps. I used to believe strongly that it was the Web, or nothing, that there was no need for more yet more applications to install on devices that are already overflowing with apps. Then React Native happened. I was already writing React code for web applications and loving it. It turns out that I wasn’t the only developer that balked at the idea of maintaining several versions of the same app using different tooling, environments, and programming languages. React Native was created out of a natural desire to take what works well from a web development experience standpoint (React), and apply it to native app development. Native mobile apps offer better user experiences than web browsers. It turns out I was wrong, we do need mobile apps for the time being. But that’s okay, because React Native is a fantastic tool. This book is essentially my experience as a React developer for the Web and as a less experienced mobile app developer. React native is meant to be an easy transition for developers who already understand React for the Web. With this book, you’ll learn the subtleties of doing React development in both environments. You’ll also learn the conceptual theme of React, a simple rendering abstraction that can target anything. Today, it’s web browsers and mobile devices. Tomorrow, it could be anything.

      What this book covers

      This book covers the following three parts:

      React: Chapter 1 to 11

      React Native: Chapter 12 to 23

      React Architecture: Chapter 23 to 26

      Part I: React

      Chapter 1, Why React?, covers the basics of what React really is, and why you want to use it.

      Chapter 2, Rendering with JSX, explains that JSX is the syntax used by React to render content. HTML is the most common output, but JSX can be used to render many things, such as native UI components.

      Chapter 3, Understanding Properties and State, shows how properties are passed to components, and how state re-renders components when it changes.

      Chapter 4, Event Handling—The React Way, explains that events in React are specified in JSX. There are subtleties with how React processes events, and how your code should respond to them.

      Chapter 5, Crafting Reusable Components, shows that components are often composed using smaller components. This means that you have to properly pass data and behaviour to child components.

      Chapter 6, The React Component Lifecycle, explains how React components are created and destroyed all the time. There are several other lifecycle events that take place in between where you do things such as fetch data from the network.

      Chapter 7, Validating Component Properties, shows that React has a mechanism that allows you to validate the types of properties that are passed to components. This ensures that there are no unexpected values passed to your component.

      Chapter 8, Extending Components, provides an introduction to the mechanisms used to extend React components. These include inheritance and higher order components.

      Chapter 9, Handling Navigation with Routes, navigation is an essential part of any web application. React handles routes declaratively using the react-router package.

      Chapter 10, Server-Side React Components, discusses how React renders components to the DOM when rendered in the browser. It can also render components to strings, which is useful for rendering pages on the server and sending static content to the browser.

      Chapter 11 Mobile-First React Components, explains that mobile web applications are fundamentally different from web applications designed for desktop screen resolutions. The react-bootstrap package can be used to build UIs in a mobilefirst fashion.

      Part II: React Native

      Chapter 12, Why React Native?, shows that React Native is React for mobile apps. If you’ve already invested in React for web applications, then why not leverage the same technology to provide a better mobile experience?

      Chapter 13, Kickstarting React Native Projects, discusses that nobody likes writing boilerplate code or setting up project directories. React Native has tools to automate these mundane tasks.

      Chapter 14, Building Responsive Layouts with Flexbox, explains why the Flexbox layout model is popular with web UI layouts using CSS. React Native uses the same mechanism to layout screens.

      Chapter 15, Navigating Between Screens, discusses the fact that while navigation is an important part of web applications, mobile applications also need tools to handle how a user moves from screen to screen.

      Chapter 16, Rendering Item Lists, shows that React Native has a list view component that’s perfect for rendering lists of items. You simply provide it with a data source, and it handles the rest.

      Chapter 17, Showing Progress, explains that progress bars are great for showing a determinate amount of progress. When you don’t know how long something will take, you use a progress indicator. React Native has both of these components.

      Chapter 18, Geolocation and Maps, shows that the react-native-maps package provides React Native with mapping capabilities. The Geolocation API that’s used in web applications is provided directly by React Native.

      Chapter 19, Collecting User Input, shows that most applications need to collect input from the user. Mobile applications are no different, and React Native provides a variety of controls that are not unlike HTML form elements.

      Chapter 20, Alerts, Notifications, and Confirmation, explains that alerts are for interrupting the user to let them know something important has happened, notifications are unobtrusive updates, and confirmation is used for getting an immediate answer.

      Chapter 21, Responding to User Gestures, discusses how gestures on mobile devices are something that’s difficult to get right in the browser. Native apps, on the other hand, provide a much better experience for swiping, touching, and so on. React Native handles a lot of the details for you.

      Chapter 22, Controlling Image Display, shows how images play a big role in most applications, either as icons, logos, or photographs of things. React Native has tools for loading images, scaling them, and placing them appropriately.

      Chapter 23, Going Offline, explains that mobile devices tend to have volatile network connectivity. Therefore, mobile apps need to be able to handle temporary offline conditions. For this, React Native has local storage APIs.

      Part III: React Architecture

      Chapter 24, Handling Application State, discusses how application state is important for any React application, web or mobile. This is why understanding libraries such as Redux and Immutable.js is important.

      Chapter 25, Why Relay and GraphQL?, explains that Relay and GraphQL, used together, is a novel approach to handling state at scale. It’s a query and mutation language, plus a library for wrapping React components.

      Chapter 26, Building a Relay React App, shows that the real advantage of Relay and GraphQL is that your state schema is shared between web and native versions of your application.

      What you need for this book 

      A code editor

      A modern web browser

      NodeJS

      Who this book is for

      This book is written for any JavaScript developer—beginner or expert—who wants to start learning how to put both of Facebook’s UI libraries to work. No knowledge of React is needed, though a working knowledge of ES2015 will help you follow along better.

      Conventions

      In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

      Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: Instead of setting the actual Modal component to be transparent, we set the transparency in the backgroundColor, which gives the look of an overlay.

      A block of code is set as follows:

      import React, { Component } from 'react';

      import {

        AppRegistry,

        View,

      } from 'react-native';

      import styles from './styles';

      // Imports our own platform-independent DatePicker

      // and TimePicker components.

      import DatePicker from './DatePicker';

      import TimePicker from './TimePicker';

      Any command-line input or output is written as follows:

      npm install react-native-vector-icons --save react-native link

      New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: Again, the same principle with the ToastAndroid API applies here. You might have noticed that there's another button in addition to the Show Notification button.

      Note

      Warnings or important notes appear in a box like this.

      Tip

      Tips and tricks appear like this.

      Reader feedback

      Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

      To send us general feedback, simply e-mail feedback@packtpub.com, and mention the book's title in the subject of your message.

      If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

      Customer support

      Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

      Downloading the example code 

      You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support  and register to have the files e-mailed directly to you.

      You can download the code files by following these steps:

      Log in or register to our website using your e-mail address and password.

      Hover the mouse pointer on the SUPPORT tab at the top.

      Click on Code Downloads & Errata.

      Enter the name of the book in the Search box.

      Select the book for which you're looking to download the code files.

      Choose from the drop-down menu where you purchased this book from.

      Click on Code Download.

      You can also download the code files by clicking on the Code Files button on the book's webpage at the Packt Publishing website. This page can be accessed by entering the book's name in the Search box. Please note that you need to be logged in to your Packt account.

      Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

      WinRAR / 7-Zip for Windows

      Zipeg / iZip / UnRarX for Mac

      7-Zip / PeaZip for Linux

      The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/React-and-React-Native. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

      Downloading the color images of this book

      We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from: https://www.packtpub.com/sites/default/files/downloads/ReactandReactNative_ColorImages.pdf.

      Errata

      Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

      To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

      Piracy

      Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

      Please contact us at copyright@packtpub.com with a link to the suspected pirated material.

      We appreciate your help in protecting our authors and our ability to bring you valuable content.

      Questions

      If you have a problem with any aspect of this book, you can contact us at questions@packtpub.com, and we will do our best to address the problem.

      Chapter 1. Why React?

      If you're reading this book, you might already have some idea of what React is. You also might have heard a React success story or two. If not, don't worry. I'll do my best to spare you from additional marketing literature in this opening chapter. However, this is a large book, with a lot of content, so I feel that setting the tone is an appropriate first step. Yes, the goal is to learn React and React Native. But, it's also to put together a lasting architecture that can handle everything we want to build with React today, and in the future.

      This chapter starts with brief explanation of why React exists. Then, we'll talk about the simplicity that makes React an appealing technology and how React is able to handle many of the typical performance issues faced by web developers. Lastly, we'll go over the declarative philosophy of React and the level of abstraction that React programmers can expect to work with.

      Let's go!

      What is React?

      I think the one-line description of React on its homepage (https://facebook.github.io/react) is brilliant:

      A JavaScript library for building user interfaces.

      It's a library for building user interfaces. This is perfect, because as it turns out, this is all we want most of the time. I think the best part about this description is everything that it leaves out. It's not a mega framework. It's not a full-stack solution that's going to handle everything from the database to real-time updates over web socket connections. We don't actually want most of these pre-packaged solutions, because in the end, they usually cause more problems than they solve. Facebook sure did listen to what we want.

      React is just the view

      React is generally thought of as the view layer in an application. You might have used a library such as Handlebars or jQuery in the past. Just like jQuery manipulates UI elements, or Handlebars templates are inserted onto the page, React components change what the user sees. The following diagram illustrates where React fits in our frontend code:

      This is literally all there is to React—the core concept. Of course there will be subtle variations to this theme as we make our way through the book, but the flow is more or less the same. We have some application logic that generates some data. We want to render this data to the UI, so we pass it to a React component, which handles the job of getting the HTML into the page.

      You may wonder what the big deal is, especially since at the surface, React appears to be yet another rendering technology. We'll touch on some of the key areas where React can simplify application development in the remaining sections of the chapter.

      Note

      Don't worry; we're almost through the introductory stuff. Awesome code examples are on the horizon!

      Simplicity is good

      React doesn't have many moving parts to learn about and understand. Internally, there's a lot going on, and we'll touch on these things here and there throughout the book. The advantage to having a small API to work with is that you can spend more time familiarizing yourself with it, experimenting with it, and so on. The opposite is true of large frameworks, where all your time is devoted to figuring out how everything works. The following diagram gives a rough idea of the APIs that we have to think about when programming with React:

      React is divided into two major APIs. First, there's the React DOM. This is the API that's used to perform the actual rendering on a web page. Second, there's the React component API. These are the parts of the page that are actually rendered by React DOM. Within a React component, we have the following areas to think about:

      Data: This is data that comes from somewhere (the component doesn't care where), and is rendered by the component

      Lifecycle: These are methods that we implement that respond to changes in the lifecycle of the component. For example, the component is about to be rendered

      Events: This is code that we write for responding to user interactions

      JSX: This is the syntax of React components used to describe UI structures

      Don't fixate on what these different areas of the React API represent just yet. The takeaway here is that React, by nature, is simple. Just look at how little there is to figure out! This means that we don't have to spend a ton of time going through API details here. Instead, once you pick up on the basics, we can spend more time on nuanced React usage patterns.

      Declarative UI structure

      React newcomers have a hard time coming to grips with the idea that components mix markup in with their JavaScript. If you've looked at React examples and had the same adverse reaction, don't worry. Initially, we're all skeptical of this approach, and I think the reason is that we've been conditioned for decades by the separation of concerns principle. Now, whenever we see things mixed together, we automatically assume that this is bad and shouldn't happen.

      The syntax used by React components is called JSX (JavaScript XML). The idea is actually quite simple. A component renders content by returning some JSX. The JSX itself is usually HTML markup, mixed with custom tags for the React components. The specifics don't matter at this point; we'll get into details in the coming chapters. What's absolutely groundbreaking here is that we don't have to perform little micro-operations to change the content of a component.

      For example, think about using something like jQuery to build your application. You have a page with some content on it, and you want to add a class to a paragraph when a button is clicked. Performing these steps is easy enough, but the challenge is that there are steps to perform at all. This is called imperative programming, and it's problematic for UI development. While this example of changing the class of an element in response to an event is simple, real applications tend to involve more than three or four steps to make something happen.

      React components don't require executing steps in an imperative way to render content. This is why JSX is so central to React components. The XML-style syntax makes it easy to describe what the UI should look like. That is, what are the HTML elements that this component is going to render? This is called declarative programming, and is very well suited for UI development.

      Time and data

      Another area that's difficult for React newcomers to grasp is the idea that JSX is like a static string, representing a chunk of rendered output. Are we just supposed to keep rendering this same view? This is where time and data come into play. React components rely on data being passed into them. This data represents the dynamic aspects of the UI. For example, a UI element that's rendered based on a Boolean value could change the next time the component is rendered. Here's an illustration of the idea:

      Each time the React component is rendered, it's like taking a snapshot of the JSX at that exact moment in time. As our application moves forward through time, we have an ordered collection of rendered user interface components. In addition to declaratively describing what a UI should be, re-rendering the same JSX content makes things much easier for developers. The challenge is making sure that React can handle the performance demands of this approach.

      Performance matters

      Using React to build user interfaces means that we can declare the structure of the UI with JSX. This is less error-prone than the imperative approach to assembling the UI piece by piece. However, the declarative approach does present us with one challenge: performance.

      For example, having a declarative UI structure is fine for the initial rendering, because there's nothing on the page yet. So, the React renderer can look at the structure declared in JSX, and render it into the browser DOM. This is illustrated in the following diagram:

      On the initial render, React components and their JSX

      Enjoying the preview?
      Page 1 of 1