Getting Started with React

Table of Contents

Getting Started with React

Credits

About the Authors

Acknowledgments

About the Reviewers

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

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. Getting Started with ReactJS

Introducing ReactJS

Who uses ReactJS?

Downloading ReactJS

Installing ReactJS with NPM

Installing ReactJS with Bower

Tools

Text editors

Chrome extension

Trying ReactJS

Configuring ReactJS in a web page

Creating your first React component

Configuring JSX

Serving files through the web server

Creating a React component with the JSX syntax

Summary

2. Exploring JSX and the ReactJS Anatomy

What is JSX?

Why JSX?

Tools for transforming JSX

The ReactJS anatomy

Creating a component

Rendering a component

Maximum number of roots

Children components

Supported attributes

Supported elements

HTML elements

SVG elements

Learning JSX and Gotchas

Expressions

Properties/attributes

Transferring properties

Mutating properties

Comments

Component style

Style

CSS classes

Summary

3. Working with Properties

Component properties

Data flow with properties

Configuring Facebook Open-Graph API

What it is and how to configure it

Creating an app-id on the Facebook developers site

Open-Graph JavaScript SDK

Rendering data in a ReactJS component

Summary

4. Stateful Components and Events

Properties versus states in ReactJS

Exploring the state property

Initializing a state

Setting a state

Replacing a state

A React state example using an interactive form

Events

Form events

Mouse events

nativeEvent

Event pooling

Supported events

Summary

5. Component Life cycle and Newer ECMAScript in React

React component lifecycle

Mounting category

Updating category

Unmounting category

Other ES (ECMAScript) versions in React

ES6

ES7

Summary

6. Reacting with Flux

An overview of Flux

Flux versus the MVC architecture

Flux advantages

Flux components

Actions

Dispatchers

Stores

Controller-Views and Views

Revisiting the code

Summary

7. Making Your Component Reusable

Understanding Mixins

Exploring Mixins by example

Higher-order components in Mixins

Validations

An example using the isRequired validator

An example using custom validator

The structure of component

Summary

8. Testing React Components

Testing in JavaScript using Chai and Mocha

Testing using ReactTestUtils

Installing React and JSX

The jestTypical example of a Testsuite with Mocha, expect, ReactTestUtils and Babel

Testing with shallow rendering

Summary

9. Preparing Your Code for Deployment

An introduction to Webpack

Building a simple React application

Setting up Webpack

Advantages of Webpack

Introduction to Gulp

Installing Gulp and creating Gulp file

Summary

10. What's Next

AJAX in React

React Router

Server-side rendering

ReactDOMServer

Isomorphic applications

Hot reloading

Redux React

Relay and GraphQL

React Native

References

Summary

Index

Getting Started with React

Getting Started with React

Copyright © 2016 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 authors, 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: April 2016

Production reference: 1250416

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78355-057-9

www.packtpub.com

Credits

Authors

Doel Sengupta

Manu Singhal

Danillo Corvalan

Reviewer

Ilan Filonenko

Commissioning Editor

Sarah Crofton

Acquisition Editor

Rahul Nair

Content Development Editor

Samantha Gonsalves

Technical Editor

Mohit Hassija

Copy Editor

Dipti Mankame

Project Coordinator

Sanchita Mandal

Proofreader

Safis Editing

Indexer

Priya Sane

Graphics

Kirk D'Penha

Production Coordinator

Shantanu N. Zagade

Cover Work

Shantanu N. Zagade

About the Authors

Doel Sengupta is a software programmer and is working in the industry for over 7 years, as a DevOps engineer and as a developer building enterprise level Web and mobile applications using RubyonRails and Rhomobile, Chef. Currently she is exploring the Javascript ecosystem. She has been a speaker in Ruby conferences. She finds interest in life sciences and has publications of her work in customised human joint prostheses design using Ansys & Mimics. She is an avid blogger (www.doels.net) writing about her technical and not-so-technical passions like culinary, photography, films. Follow her on twitter @doelsengupta.

Manu Singhal has been a programmer for 8 years and loves to code on Ruby and React. These days, he is busy cofounding a startup in e-commerce. In earlier roles, he has developed many enterprise and consumer based web/mobile applications and has also been a speaker at Ruby Conferences in India and the USA. He never misses a chance to play tennis and go hiking.

He has worked with Tata Consultancy Services and McKinsey & Company as a software developer and an architect.

He has contributed in books on Rhomobile and RubyMotion by Packt earlier.

Acknowledgments

We want to extend our heartfelt thanks to our family members and friends for their tireless support and belief. Our special thanks goes to Patrick Shaughnessy, Rohan Daxini and Kiprosh team, Abhishek Nalwaya, Akshat Paul, Naveen Rawat for taking out time to review the book. We also like to extend our gratitude to the ReactJS vibrant and ever enthusiastic online community, without which the vigorous task of writing such a book won't have been possible.

Thanks to the entire Packt publishing house especially Rahul Nair and team who helped in editing, proof reading and reviewing the book. As the famous saying goes The journey is the reward, the very experience of writing this book is such a tremendous experience for us.

Danillo Corvalan is a software engineer who is passionate about software patterns and practices. He has a keen interest in the rapidly changing world of software development. He is quite insistent about the need of fast and reliable frameworks. He is originally from Brazil, now living in Amsterdam, the Netherlands. He loves biking a lot.

In Brazil, he worked on applications for the general public and lawyers, at the Court of Justice in his hometown city, Cuiabá/MT. Then, he moved to Florianópolis/SC, and worked at Bravi Software for developing hybrid and responsive web apps for education. Now, in Amsterdam, he is working at Vigour.io and helping to develop live multiscreen and responsive apps. From the web client-side perspective, in general, he has been in touch with technologies, such as vanilla JavaScript, jQuery, Backbone, and ReactJS.

For the past 5 years, Danillo has also worked with open source platforms and JavaScript on the server side (Node.js). He has played with React Native in order to develop native mobile applications with ReactJS.

About the Reviewers

Ilan is currently an undergraduate studying computer science in the College of Engineering at Cornell University. His interests in computer science stemmed from his early work in biophysics where he proposed a schematic that could potentially be used to synthetically create a proton transport Complex I and a virtual representation of the mitochondrion that can now function as the framework to synthesize a real biological system. Throughout his high school education and early years of college, he built various computational models and full-stack applications that showcased his expertise across a wide range of technologies from Mathematica to Ruby on Rails. In his first year of college, he cofounded and led the engineering team for four start-ups that have primarily disrupted their respective industries—MusicTech: Tunetap, MedTech: saund, FinTech: TheSimpleGroup, and FoodTech: Macrofuel. To this day, he contributes to these ventures as a project manager and continues to lead the backend engineering initiative for two Cornell engineering project teams. In addition to his academics and entrepreneurial endeavors, he works as a part-time software engineer for the R&D division at Bloomberg L.P., where he spent two summers researching and optimizing their distributed systems platform for large-scale data analytics.

www.PacktPub.com

eBooks, discount offers, and more

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 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://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.

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

Preface

Learning ReactJS is a light but powerful way to build fantastic UI components! This book will help you develop robust, reusable, and fast user interfaces with ReactJS. This book will ensure a smooth and seamless transition to the ReactJS ecosystem. The books is full of hands on real applications. From setup to implementation, testing, and deployment: discover the new frontier of front-end web development. ReactJS, popularly known as V of MVC architecture, is developed by the Facebook and Instagram developers. We will take a deep dive on the ReactJS world and explore the unidirectional data flow, virtual DOM, DOM difference, which ReactJS leverages in order to increase the performance of the UI. You will learn the key concepts of ReactJS in a step-by-step process. You will also learn ES6 syntaxes used in ReactJS for the future browsers, with the transpiling techniques to be used in order to support it in current browsers.

You will not only learn to apply and implement ReactJS concepts but also know how you can test JS-based applications and deploy them. In addition to this, you will also be developing a full-fledged application using Flux architecture. You will also learn about Redux, which lets you understand how you can manipulate the data in ReactJS applications easily, by introducing some limitations on the updates. With ample codes covering the concepts and their theoretical explanations coupled with screenshots of the application, you will gain a deep understanding of ReactJS.

What this book covers

Chapter 1, Getting Started with ReactJS, is a brief overview of React about where to download and how to make it work on your web page. It will demonstrate how to create your first React component.

Chapter 2, Exploring JSX and the ReactJS Anatomy, will show the same simple react component, created in the first chapter, built with the JSX syntax. It'll explain the purpose of JSX and demystify its usage. It will compare some older template techniques to JSX and try to clarify some common questions about it.

Chapter 3, Working with Properties, will make you start developing your own app. It will use Facebook Open Graph API. This will cover how to configure it, get your friends' list, and render it using React. After this, we're going to break UI into small components.

Chapter 4, Stateful Components and Events, covers components that have state, practices to communicate between them, and how to respond to 'users' input/events in order to have UI reflect this state. This chapter also covers how the state changes your React UI performance with the Virtual DOM.

Chapter 5, Component Life cycle and Newer ECMAScript in React, explores what is the life cycle of such a React component. Furthermore, we will also dig into the future ECMA Script syntaxes and few changes that the React community also used from version 0.13.0. For this, we will review some ES6 and ES7 features within the react library.

Chapter 6, Reacting with Flux, will explain the flux architecture, which is used to build client-side web applications. It complements React's composable view components by using a unidirectional data flow. There is an in-depth explanation of all the components of the FLUX architecture (view, stores, action, and dispatchers).

Chapter 7, Making Your Component Reusable, will cover React good practices and patterns. This includes practices to develop reusable components, how to