Getting Started with React

Doel Sengupta, Manu Singhal, Danillo Corvalan

• Publisher: Packt Publishing
• Year: 2016
• eBook ISBN: 9781783550579
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

A light but powerful way to build dynamic real-time applications using ReactJS

About This Book

• Learn how to develop powerful JavaScript applications using ReactJS
• Integrate a React-based app with an external API (Facebook login) while using React components, with the Facebook developer app
• Implement the Reactive paradigm to build stateless and asynchronous apps with React

Who This Book Is For

This book is for any front-end web or mobile-app developer who wants to learn ReactJS. Knowledge of basic JavaScript will give you a good head start with the book.

What You Will Learn

• Understand the ReactJS basics through an overview
• Install and create your first React component
• Refactor the ReactJS component using JSX
• Integrate your React application with the Facebook login and Graph API, then fetch data from your liked pages in Facebook and display them in a browser
• Handle UI elements events with React, respond to users input, and create stateful components
• Use some core lifecycle events for integration and find out about ES6 syntaxes in the React world
• Understand the FLUX architecture and create an application using FLUX with React
• Make a component more reusable with mixins and validation helpers and structure your components properly
• Explore techniques to test your ReactJS code
• Deploy your code using webpack and Gulp

In Detail

ReactJS, popularly known as the V (view) of the MVC architecture, was developed by the Facebook and Instagram developers. It follows a unidirectional data flow, virtual DOM, and DOM difference that are generously leveraged in order to increase the performance of the UI.

Getting Started with React will help you implement the Reactive paradigm to build stateless and asynchronous apps with React. We will begin with an overview of ReactJS and its evolution over the years, followed by building a simple React component. We will then build the same react component with JSX syntax to demystify its usage. You will see how to configure the Facebook Graph API, get your likes list, and render it using React.

Following this, we will break the UI into components and you'll learn how to establish communication between them and respond to users input/events in order to have the UI reflect their state. You'll also get to grips with the ES6 syntaxes.

Moving ahead, we will delve into the FLUX and its architecture, which is used to build client-side web applications and complements React's composable view components by utilizing a unidirectional data flow. Towards the end, you'll find out how to make your components reusable, and test and deploy them into a production environment. Finally, we'll briefly touch on other topics such as React on the server side, Redux and some advanced concepts.

Style and approach

The book follows a step-by-step, practical, tutorial approach with examples that explain the key concepts of ReactJS. Each topic is sequentially explained and contextually placed to give sufficient details of ReactJS.

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

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 Rho...

Table of contents

• Getting Started with React