Getting Started with React
()
About this ebook
- 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
This book is for any frontend web or mobile-app developer who wants to learn ReactJS. Knowledge of basic JavaScript will give you a good head start with the book.
Related to Getting Started with React
Related ebooks
React.js Essentials Rating: 4 out of 5 stars4/5Getting Started with React Native Rating: 4 out of 5 stars4/5React Projects: Build 12 real-world applications from scratch using React, React Native, and React 360 Rating: 0 out of 5 stars0 ratingsAdvanced Web Development with React: SSR and PWA with Next.js using React with advanced concepts Rating: 0 out of 5 stars0 ratingsNode.js By Example Rating: 2 out of 5 stars2/5Learn React Hooks: Build and refactor modern React.js applications using Hooks Rating: 0 out of 5 stars0 ratingsMastering JavaScript Design Patterns - Second Edition Rating: 5 out of 5 stars5/5ReactJS by Example - Building Modern Web Applications with React Rating: 4 out of 5 stars4/5Mastering JavaScript Object-Oriented Programming Rating: 0 out of 5 stars0 ratingsReactJS for Jobseekers: The Only Guide You Need to Learn React and Crack Interviews (English Edition) Rating: 0 out of 5 stars0 ratingsClean Code in JavaScript: Develop reliable, maintainable, and robust JavaScript Rating: 5 out of 5 stars5/5React.js Design Patterns: Learn how to build scalable React apps with ease (English Edition) Rating: 0 out of 5 stars0 ratingsBuilding Scalable Apps with Redis and Node.js Rating: 0 out of 5 stars0 ratingsExploring Web Components: Build Reusable UI Web Components with Standard Technologies (English Edition) Rating: 0 out of 5 stars0 ratingsLearning jQuery 3 - Fifth Edition Rating: 0 out of 5 stars0 ratingsLearning AngularJS Animations Rating: 4 out of 5 stars4/5Building a RESTful Web Service with Spring Rating: 5 out of 5 stars5/5JavaScript Regular Expressions Rating: 3 out of 5 stars3/5ASP.NET Core 3 and React: Hands-On full stack web development using ASP.NET Core, React, and TypeScript 3 Rating: 0 out of 5 stars0 ratingsAngularJS Deployment Essentials Rating: 0 out of 5 stars0 ratingsHands-On Parallel Programming with C# 8 and .NET Core 3: Build solid enterprise software using task parallelism and multithreading Rating: 0 out of 5 stars0 ratingsMastering Bootstrap 4 Rating: 5 out of 5 stars5/5React and React Native Rating: 0 out of 5 stars0 ratingsReact Deep Dive Rating: 5 out of 5 stars5/5React Components Rating: 0 out of 5 stars0 ratingsMastering React Native Rating: 5 out of 5 stars5/5React to Python: Creating React Front-End Web Applications with Python Rating: 0 out of 5 stars0 ratingsReact: Building Modern Web Applications Rating: 5 out of 5 stars5/5Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications, and libraries Rating: 3 out of 5 stars3/5
Internet & Web For You
Coding For Dummies Rating: 5 out of 5 stars5/5How to Be Invisible: Protect Your Home, Your Children, Your Assets, and Your Life Rating: 4 out of 5 stars4/5The Gothic Novel Collection Rating: 5 out of 5 stars5/5HTML in 30 Pages Rating: 5 out of 5 stars5/5How to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsNo Place to Hide: Edward Snowden, the NSA, and the U.S. Surveillance State Rating: 4 out of 5 stars4/5Social Engineering: The Science of Human Hacking Rating: 3 out of 5 stars3/5The Hacker Crackdown: Law and Disorder on the Electronic Frontier Rating: 4 out of 5 stars4/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5Mike Meyers' CompTIA Security+ Certification Guide, Third Edition (Exam SY0-601) Rating: 5 out of 5 stars5/5Tor and the Dark Art of Anonymity Rating: 5 out of 5 stars5/5Remote/WebCam Notarization : Basic Understanding Rating: 3 out of 5 stars3/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5An Ultimate Guide to Kali Linux for Beginners Rating: 3 out of 5 stars3/5Six Figure Blogging Blueprint Rating: 5 out of 5 stars5/5The Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5Podcasting For Dummies Rating: 4 out of 5 stars4/5Wordpress for Beginners: The Easy Step-by-Step Guide to Creating a Website with WordPress Rating: 5 out of 5 stars5/5Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Rating: 4 out of 5 stars4/5The Digital Marketing Handbook: A Step-By-Step Guide to Creating Websites That Sell Rating: 5 out of 5 stars5/5How To Make Money Blogging: How I Replaced My Day-Job With My Blog and How You Can Start A Blog Today Rating: 4 out of 5 stars4/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsBeginner's Guide To Starting An Etsy Print-On-Demand Shop Rating: 0 out of 5 stars0 ratingsThe Cyber Attack Survival Manual: Tools for Surviving Everything from Identity Theft to the Digital Apocalypse Rating: 0 out of 5 stars0 ratingsContent Chemistry: The Illustrated Handbook for Content Marketing Rating: 5 out of 5 stars5/5Wireless Hacking 101 Rating: 5 out of 5 stars5/5
Reviews for Getting Started with React
0 ratings0 reviews
Book preview
Getting Started with React - Doel Sengupta
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
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