ReactJS by Example - Building Modern Web Applications with React

Vipul A M, Prathamesh Sonpatki

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

Get up and running with ReactJS by developing five cutting-edge and responsive projects

About This Book

• Create pragmatic real-world applications while learning React and its modern developer tools
• Build sustainable user interfaces by transforming data into components of UI
• Learn how to generate reusable ReactJS components effectively

Who This Book Is For

If you are a web developer and wish to learn ReactJS from scratch, then this book is tailor-made for you. Good understanding of Javascript, HTML, and CSS is expected.

What You Will Learn

• Create, reuse, and compose React components using JSX
• Share data between various React components and techniques for data flow within a React app
• Handle user interactions with the help of event handlers and dynamic components
• Set up and use various next generation ES2015/ES6 features with React
• Understand the performance and immutability features of React using React add-ons
• Learn the techniques of Animation in React
• Use data stores to store model-related data and information
• Create a flux-based React application by using Reflux library

In Detail

ReactJS is an open-source JavaScript library that brings the power of reactive programming to web applications and sites. It aims to address the challenges encountered in developing single-page applications, and is intended to help developers build large, easily scalable and changing web apps.

Starting with a project on Open Library API, you will be introduced to React and JSX before moving on to learning about the life cycle of a React component. In the second project, building a multi-step wizard form, you will learn about composite dynamic components and perform DOM actions. You will also learn about building a fast search engine by exploring server-side rendering in the third project on a search engine application. Next, you will build a simple frontpage for an e-commerce app in the fourth project by using data models and React add-ons. In the final project you will develop a complete social media tracker by using the flux way of defining React apps and know about the best practices and use cases with the help of ES6 and redux.

By the end of this book, you will not only have a good understanding of ReactJS but will also have built your very own responsive frontend applications from scratch.

Style and approach

An easy-to-follow program to learn ReactJS with the help of real world projects. Each topic is explained within the context of a project and provides plenty of tips and tricks for using ReactJS.

ReactJS by Example - Building Modern Web Applications with React

---

Table of Contents

ReactJS by Example - Building Modern Web Applications with React

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

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

Errata

Piracy

Questions

1. Getting Started with React

What is React?

When Shawn meets Mike and ReactJS

Requiring React library

Building our first component

Back to work

Displaying static data

Passing data to components

Summary

2. JSX in Depth

Why JSX?

Transforming JSX into JavaScript

HTML tags vs React components

Self closing tag

Multiple components

JavaScript expressions

Namespaced components

Spread attributes

Styles in JSX

JSX Gotchas

Conditionals in JSX

Non-DOM attributes

Summary

3. Data Flow and Life Cycle Events

Data flow in React

Props validation

Specifying default props

Modifying this.props.children

State

Setting initial state

Setting state

Avoiding state

State versus props

Component life cycle overview

Component life cycle methods

Summary

4. Composite Dynamic Components and Forms

Forms in React

Setting up the application

Getting started with forms

Interactive props

Controlled components

Uncontrolled components

Getting started with form wizard

Form events

Parent Child relationship

Form validation

Shipping details step

Delivery details step

Summary

5. Mixins and the DOM

Back at the office

Adding a modal

Refs

Summary

6. React on the Server

Getting React to render on server

On the server

Summary

7. React Addons

Getting started with Addons

Immutability helpers

Available commands

Cloning components

Helpers for testing React apps

Setting up Jest

Testing structure of React components

Testing behavior of React components

Shallow rendering

Summary

8. Performance of React Apps

Performance of React apps

Virtual DOM

The PERF addon

DOM operations performed by React

Time taken to render all the components

Time wasted by React

The shouldComponentUpdate hook

PureRenderMixin

The PureRenderMixin anti pattern

Immutable data

Summary

9. React Router and Data Models

A new adventure

Creating Backbone models

Incorporating defined Backbone models

Data models and Backbone

Summary

10. Animation

Fun stuff at Adequate LLC!

Model updates

Animate

Summary

11. React Tools

Development tools

Using Babel for ES6 and JSX

ESLint

React Dev Tools

Build tools

What is Webpack?

Webpack configuration

Loaders

Hot module replacement

Summary

12. Flux

Flux architecture and unidirectional flow

Flux actions

Flux stores

Summary

13. Redux and React

Redux

Setting up Redux

Summary

Index

ReactJS by Example - Building Modern Web Applications 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: 1110416

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78528-964-4

www.packtpub.com

Credits

Authors

Vipul A M

Prathamesh Sonpatki

Reviewers

Muhammad Arslan

Pawel Czekaj

Matt Goldspink

Commissioning Editor

Dipika Gaonkar

Acquisition Editor

Larissa Pinto

Content Development Editor

Mamata Walkar

Technical Editor

Bharat Patil

Copy Editor

Vibha Shukla

Project Coordinator

Kinjal Bari

Proofreader

Safis Editing

Indexer

Monica Ajmera Mehta

Graphics

Disha Haria

Production Coordinator

Arvindkumar Gupta

Cover Work

Arvindkumar Gupta

About the Authors

Vipul A M is Director at BigBinary. He is part of Rails Issues Team, and helps triaging issues. His spare time is spent exploring and contributing to many Open Source ruby projects, when not dabbling with React JS.

Vipul loves Ruby's vibrant community and helps in building PuneRb, is the founder of and runs RubyIndia Community Newsletter and RubyIndia Podcast, and organizes Deccan Ruby Conference in Pune.

He can be found @vipulnsward on twitter and on his site http://vipulnsward.com.

Prathamesh Sonpatki is Director at BigBinary. He builds web applications using Ruby on Rails and ReactJS. He loves learning new programming languages and contributing to open source.

He can be found @_cha1tanya on twitter.

About the Reviewers

Muhammad Arslan has been working in different roles: Senior IT-Developer, IT-Consultant, TechLead and Architect. He has vast experience of frontend and backend technologies and agile development. He has two master's degrees in Software Engineering and E-commerce. He has done his master's thesis in Usability and User Experience. He is also Oracle Certified Professional, Java Programmer (OCPJP).

He is currently working in biggest Nordic bank Nordea as Senior IT-Developer. He has previously worked in Digital River World Payments on bank gateway/iso connections and designed user interfaces. He worked in Accedo on SmartTV applications and application management products as well.

You can follow him on Twitter @arslan_mecom or you can check out his blog http://www.jhear.com/.

I would like to thank my mother, father (late), and my better half, for their continuous support for making me successful in my career.

Pawel Czekaj has a bachelor's degree in computer science. He is a web developer with strong backend (PHP, Java, MySQL, and Unix system) and frontend (AngularJS, Backbone, React.js, and jQuery) experience. He loves JavaScript, React.js, and Angular.js. Previously, he worked as a senior full stack web developer. Currently, he is working as a frontend developer for Cognifide and Toptal. You can contact him at http://yadue.eu.

Matt Goldspink is currently the lead engineer at Vlocity, Inc., based in San Francisco, working on their mobile and web platforms. Prior to this, he has held various roles at startups, banks, and also spent time as a technology trainer. Matt was the lead developer and architect for the award-winning mobile web platform for one of the world's leading investment banks.

www.PacktPub.com

Support files, eBooks, discount offers, and more

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 <[email protected]> for more details.

At www.Pack...

Table of contents

• ReactJS by Example - Building Modern Web Applications with React