Introduction

I'm working on the book full-time, and would love to solicit some early feedback from interested readers. Sign up for the book announcement mailing list (no spam, ever) and I'll send you the 39 page introduction and first chapter in PDF format.


Dearest reader, this is an early version of the forthcoming book, "Easy React: Build Powerful Web Apps Using Modern JavaScript Technologies". As such, you'll quite possibly find a mistake or two, and perhaps even a horrible error or half-truth. Such is life in the dangerous world of reading technical book drafts. I can however assure you I'm working tirelessly to complete a quality book, and very much value your feedback. E-mail me anytime at wj@wjgilmore.com.

Introduction

Dearest reader, this is an early version of the forthcoming book, "Easy React: Build Powerful Web Apps Using Modern JavaScript Technologies". As such, you'll quite possibly find a mistake or two, and perhaps even a horrible error or half-truth. Such is life in the dangerous world of reading technical book drafts. I can however assure you I'm working tirelessly to complete a quality book, and very much value your feedback. E-mail me anytime at wj@wjgilmore.com.

I've been a professional web developer for the past 18 years or so, having built my first commercial website back in 1997. It has been incredibly exciting to watch the web evolve so dramatically over the course of the past two decades, transforming from a mere curiosity to a medium so indispensable to business and life. It has also been challenging, because this rapid pace of change has meant constantly evaluating new technologies and occasionally putting a few of them to good use for both myself and my clients. For the most part I believe I've succeeded at this challenge, having built dozens of solutions using a laundry list of powerful languages, databases, and frameworks.

There is however one particularly prominent technology that in years past I had not only never managed to master, but actually actively avoided: JavaScript. This aversion is rather ironic given that many of the web applications I most admire (Gmail and Trello come to mind) have been heavily dependent upon JavaScript for years. Even so, there remained plenty of reasons to deride the language as ugly, inconsistent, and annoying, and so for years my involvement remained primarily limited to begrudgingly integrating an appropriate amount of jQuery code in order to please clients desiring a bit of AJAX or some sort of visual accoutrement.

This combative relationship started to change back in 2009 following the release of Node.js and AngularJS. Although these two JavaScript technologies have strikingly different purposes, their extraordinary impact forced me to reconsider the language as a technology that could not only play a central role in future projects, but even be fun. This decision has in more recent years become even easier given the language's incredible ongoing renaissance in which developers have created countless new JavaScript-driven technologies, development tools, and methodologies.

More recently, Facebook and its subsidiary Instagram have made some particularly bold moves in the JavaScript arena with the development and release of React. React is the most exciting JavaScript technology to hit the market in years, as not only does it supercharge your productivity, but it also challenges some of the most fundamental and long-held conventions and convictions found in modern web development! In this book you'll not only learn all about React and its cutting-edge approach to application development, but also how several of these other technologies can work in conjunction with React to build really powerful and compelling web applications.

You'll often see React referred to as React.js, because JavaScript developers love tacking ".js" onto pretty much everything these days. However the official usage is indeed simply React.

The React Library Defined

So what is React? Many uninformed developers are quick to classify it as a competitor to JavaScript frameworks such as AngularJS or Ember.js, yet this assertion is just plain incorrect. React does not offer (nor seek to offer) anywhere near the range of features provided by these eminently capable solutions. Instead, the React team has focused on streamlining the workflow associated with creating JavaScript-powered user interfaces, going so far as to call React a solution for implementing the "V" (View) in MVC. It is otherwise indifferent to the technologies used to implement other aspects of the application, meaning you are free to choose whatever technology stack makes the most sense to your particular situation.

Above all, this calculated limitation of scope suggests simplicity. Having struggled with technologies that seem to embrace anything but simplicity, this is in my mind precisely what makes React such an attractive technology. You can integrate a simple React-driven widget (known as elements and components in React lingo; more about this in the next chapter) into an existing web application literally within minutes, and then introduce additional components and other more advanced features as you desire.

So what else does React have to offer besides simplicity? I'll summarize a few other key features here:

  • Declarative syntax: With React gone are the headaches associated with managing the application's control flow. Instead, you'll declare components, and leave it to React to manage the behavior based on your description of the problem domain. This reduces all of the maddening side effects introduced through JavaScript spaghetti code which attempts to manage both the components and the behavior (I am incidentally a master at cooking up this particular brand of pasta, so don't feel bad if you are too). If you haven't heard of declarative programming before, don't fret because by the end of the next chapter you'll totally have the hang of it.
  • One-way data binding: React simplifies the process associated with ensuring the UI matches the current state of your application data by enforcing a rigorous flow of data from a component owner to its children. You'll use a well-defined convention to listen for changes in "state" and informing the application to respond accordingly.
  • Virtual DOM: React maintains a copy of the DOM in memory (known as the virtual DOM), and when informed of data-related changes, React uses this virtual representation to calculate the difference and then update only the necessary part of the DOM. Only changing updated elements in the DOM results in significant performance benefits.
  • JSX: React's JavaScript syntax extension (JSX) reduces the amount of JavaScript you would otherwise need to write when developing your application interface. You're not compelled to use it, but after seeing a few examples I think you'll be sufficiently convinced of its ability to save some serious keystrokes. Chapter 1 offers a detailed introduction to JSX.
  • Isomorphic: React is what's known as an isomorphic JavaScript library, meaning it is capable of running on both "sides" of a web application, namely the client-side and the server-side. If you're new to the concept of Isomorphic JavaScript, you might need to read that last sentence a few times for it to sink in. We'll talk about this capability in chapter 2.
  • Testable: React applications are not monolithic; they are assembled from many relatively small, isolated components, encouraging automated testing. At the end of chapter 2 I'll show you how to test your React components.
  • Open source: React is released under a BSD license, and Facebook provides an additional patent grant. You can learn more about both the licensing and grant in the React README.

We'll spend the first four chapters of this book focused almost exclusively on React-specific concepts and features before devoting the rest of the book to explaining how React works in conjunction with other powerful technologies such as the Express web application framework and the MongoDB database.

Don't worry if you're not familiar with technologies such as Node.js or Express (although it helps) as each respective chapter includes an introduction intended to get you up and running as quickly as possible.

About the Book

This book is organized into nine chapters, each of which is briefly described below.

Chapter 1. Introducing React

In this opening chapter you'll learn all about React fundamentals. Among other topics we'll get acquainted with JSX, creating composable components, working with props and state, responding to user input, and loading JSON. You'll also learn all about React's various component lifecycle methods, and work through a comprehensive example demonstrating exactly when and how each method executes in conjunction with a rendered component.

Chapter 2. Configuring a Sane React Development Environment

With a basic understanding of React fundamentals out of the way, in this chapter we'll turn our attention to configuring a sane development environment. You'll learn how to integrate React into the larger JavaScript ecosystem, and we'll explore several useful development, debugging, and testing tools. We'll also talk about cool capabilities such as ES6 support.

Chapter 3. Integrating HTML, CSS, Layouts and Routes

In chapter 2 we'll build upon React fundamentals by focusing on several key aspects of developing a React-powered web application. You'll learn about React's unconventional approach to CSS integration, how to create manageable layouts, and various approaches to defining and managing routes.

Chapter 4. Getting Fluxxy With It

Everything we've discussed so far has been primarily focused on React's view-oriented capabilities. However in order to build a complete application you'll ultimately need look at the larger picture. In this chapter you'll learn how to do so through an introduction to Facebook's Flux application architecture. I'll also introduce you to several open source, Flux-inspired solutions such as Redux.

Chapter 5. Integrating a REST API with Express

Logically your application will integrate with a data store such as MySQL or MongoDB. But how is this data passed between your React components and the data store? For many applications the conventional approach involves a REST API. In this chapter you'll learn how to create a REST API using the Express web framework, and integrate it alongside the example React application.

Chapter 6. Integrating MongoDB

We'll need a place to store data, and while options abound in regards to databases these days, I thought this would be a fun opportunity to introduce MongoDB and take advantage of MongoDB's JSON-related features. Even if you don't plan on using MongoDB in your own projects, embrace this opportunity to at least learn more about what all the buzz is about and have fun with it. In any case, by the end of this chapter we'll have successfully integrated MongoDB into the application, connecting the REST API developed in the last chapter to the database.

Chapter 7. Integrating Forms

Logically the success of many applications depends upon a high degree of user interaction. In this chapter we'll integrate forms and learn how to process data submitted through these forms. I'll also discuss various other UI-related matters which can contribute to providing users with a highly interactive experience.

Chapter 8. Integrating User Accounts

In this chapter you'll learn how to integrate user account management capabilities, adding user registration, sign in, and other related features such as password recovery. We'll also talk about how to restrict application content to users in a variety of ways.

Chapter 9. Going Native

In this final chapter, we'll have a look at React Native, a fantastic solution for building and deploying applications on native platforms such as iOS and Android using the very same React and JavaScript technologies you already know and love.

About the VocabGiant Example Project

I've experimented with a number of language learning apps over the years, and find several to be indispensable (Duolingo and Memrise, to name a few). However, none offer exactly the combination of features I'm looking for in such an app, and so like any self-respecting nerd I thought it would be fun to create my own. It's called VocabGiant, and we'll spend much of this book creating this app using React and other modern JavaScript technologies. Obviously we won't exhaustively recreate every VocabGiant feature, however we will devote time to exploring key React-related capabilities such as:

  • User interface creation and management
  • Data-driven features such as loading of vocabulary lists from the database
  • User interactivity associated with vocabulary review and testing
  • User accounts and preferences
  • Building a native iOS app using React Native

If anything, basing much of this instruction around a thematic project keeps the material practical and helps to frame the discussion within the greater goal of creating a working application.

Reader Prerequisites

If you're relatively new to JavaScript, I suggest spending some time getting acquainted with language fundamentals before moving on to the first chapter. If you're in need of some introductory-level JavaScript learning resources, I suggest starting with the following guides:

  • JavaScript: The Good Parts: Written by JavaScript guru Douglas Crockford, this unsurprisingly thin book (given the title) does a fantastic job of both introducing readers to key language syntax and dispelling widespread confusion about certain features. If you're in the market for any single JavaScript book, this is it.

  • JavaScript: The Definitive Guide: In print for almost 20 years and tipping the scales at 1,000 pages, this book has long been considered the de facto reference for JavaScript developers. While it doesn't exactly make for scintillating reading, you're guaranteed to find a relevant example and useful instruction regarding every conceivable JavaScript-related topic.

  • Mozilla Developer Network JavaScript Basics: The company behind Firefox has published quite a few useful JavaScript tutorials, including this introduction to language fundamentals.

In addition to possessing at least some JavaScript proficiency, I suggest taking the time to learn at least a bit about the following technologies:

  • Git: We'll tangentially use Git throughout the book to retrieve the companion repository and switch between example branches. If you're not familiar with Git check out Scott Chacon's great book, "Pro Git".

  • Node: Although I introduce Node.js in chapter 5, it would be swell if you installed it now because we will use it (and npm) in chapter 1 to run the starter project. While you're not required to use it in chapter 1, doing so will save you a tiny bit of hassle in the long run.

  • Chrome DevTools: All modern browsers offer some level of debugging capabilities, however the Chrome browser's tools far surpass those available elsewhere. While you're not required to use Chrome DevTools at any point in the book, I nonetheless suggest familiarizing yourself with at least one of the available browser debugging solutions.

About the Author

W. Jason Gilmore is a software developer, consultant, and bestselling author. He has spent much of the past 18 years helping companies of all sizes build amazing solutions. Recent projects include a Rails-driven e-commerce analytics application for a globally recognized publisher, a Linux-powered autonomous environmental monitoring buoy, and a 10,000+ product online store.

Jason is the author of nine books, including the bestselling "Easy Laravel 5", "Easy E-Commerce Using Laravel and Stripe", "Beginning PHP and MySQL, Fourth Edition", and "Easy Active Record for Rails Developers".

Over the years Jason has published more than 300 articles within popular publications such as Developer.com, JSMag, and Linux Magazine, and instructed hundreds of students in the United States and Europe. Jason is cofounder of the wildly popular CodeMash Conference, the largest multi-day developer event in the Midwest.

Away from the keyboard, you'll often find Jason playing with his kids, hunched over a chess board, and having fun with DIY electronics.

Errata and Suggestions

Nobody is perfect, particularly when it comes to writing about technology. I've surely made some mistakes in both code and grammar, and probably completely botched more than a few examples and explanations. If you would like to report an error, ask a question or offer a suggestion, please e-mail me at wj@wjgilmore.com.