How to Get the Most Out of This Book

Overview

This book aims to be the single most useful resource on learning React. By the time you're done reading this book, you (and your team) will have everything you need to build reliable, powerful React apps.

React core is lean and powerful. After the first few chapters, you'll have a solid understanding of React's fundamentals and will be able to build a wide array of rich, interactive web apps with the framework.

But beyond React's core, there are many tools in its ecosystem that you might find helpful for building production apps. Things like client-side routing between pages, managing complex state, and heavy API interaction at scale.

This book consists of two parts.

In Part I, we cover all the fundamentals with a progressive, example-driven approach. You'll create your first apps, learn how to write components, start handling user interaction, manage rich forms, and even interact with servers.

We bookend the first part by exploring the inner workings of Create React App (Facebook's tool for running React apps), writing automated unit tests, and building a multi-page app that uses client-side routing.

Part II of this book moves into more advanced concepts that you'll see used in large, production applications. These concepts explore strategies for data architecture, transport, and management:

Redux is a state management paradigm based on Facebook's Flux architecture. Redux provides a structure for large state trees and allows you to decouple user interaction in your app from state changes.

GraphQL is a powerful, typed, REST API alternative where the client describes the data it needs. We also cover how to write your own GraphQL servers for your own data.

Relay is the glue between GraphQL and React. Relay is a data-fetching library that makes it easy to write flexible, performant apps without a lot of data-fetching code.

Finally, in the last chapter, we'll talk about how to write native, cross-platform mobile apps using React Native.

There are a few guidelines we want to give you in order to get the most out of this book.

First, know that you do not need to read this book linearly from cover-to-cover. However, we've ordered the contents of the book in a way we feel fits the order you should learn the concepts. We encourage you to learn all the concepts in Part I of the book first before diving into concepts in Part II.

Second, keep in mind this package is more than just a book - it's a course complete with example code for every chapter. Below, we'll tell you:

  • how to approach the code examples and
  • how to get help if something goes wrong

Running Code Examples

This book comes with a library of runnable code examples. The code is available to download from the same place where you purchased this book. If you purchased this book on Amazon, you should have received an email with instructions.

If you have any trouble finding or downloading the code examples, email us at [email protected].

We use the program npm to run every example in this book. You can boot most apps with the following two commands:


npm install
npm start

If you're unfamiliar with npm, we cover how to get it installed in the "Setting Up" section in the first chapter.

After running npm start, you will see some output on your screen that will tell you what URL to open to view your app.

Some apps require a few more commands to setup. If you're ever unclear on how to run a particular sample app, checkout the README.md in that project's directory. Every sample project contains a README.md that will give you the instructions you need to run each app.

Project setups

The first two projects begin with a simple React setup that allows us to quickly write React applications.

From there, with a couple exceptions, every project in this book was built using Create React App.

Create React App is based on Webpack, a tool which helps process and bundle our various JavaScript, CSS, HTML, and image files. We explore Create React App in-depth in the chapter "Using Webpack with Create React App." But, Create React App is not a requirement for using React. It's simply a wrapper around Webpack (and some other tooling) that makes it easy to get started.

Code Blocks and Context

Nearly every code block in this book is pulled from a runnable code example which you can find in the sample code. For example, here is a code block pulled from the first chapter:


class ProductList extends React.Component {
  render() {
    return (
      <div className='ui unstackable items'>
        {/* leanpub-start-insert */}
        <Product />
        {/* leanpub-end-insert */}
      </div>
    );
  }
}

Notice that the header of this code block states the path to the file which contains this code: voting_app/public/js/app-2.js.

If you ever feel like you're missing the context for a code example, open up the full code file using your favorite text editor. This book is written with the expectation that you'll also be looking at the example code alongside the manuscript.

For example, we often need to import libraries to get our code to run. In the early chapters of the book we show these import statements, because it's not clear where the libraries are coming from otherwise. However, the later chapters of the book are more advanced and they focus on key concepts instead of repeating boilerplate code that was covered earlier in the book. If at any point you're not clear on the context, open up the code example on disk.

Code Block Numbering

In this book, we sometimes build up a larger example in steps. If you see a file being loaded that has a numeric suffix, that generally means we're building up to something bigger.

For instance, above the code block has the filename: app-2.js. When you see the -N.js syntax that means we're building up to a final version of the file. You can jump into that file and see the state of all the code at that particular stage.

Getting Help

While we've made every effort to be clear, precise, and accurate you may find that when you're writing your code you run into a problem.

Generally, there are three types of problems:

  • A "bug" in the book (e.g. how we describe something is wrong)
  • A "bug" in our code
  • A "bug" in your code

If you find an inaccuracy in how we describe something, or you feel a concept isn't clear, email us! We want to make sure that the book is both accurate and clear.

If you suspect a problem with the example code, make sure that your version of the book's code package is up to date. We release code updates periodically.

If you're using the latest code download and you think you've found a bug in our code we definitely want to hear about it.

If you're having trouble getting your own app working (and it isn't our example code), this case is a bit harder for us to handle.

Your first line of defense, when getting help with your custom app, should be our unofficial community chat room. We (the authors) are there from time-to-time, but there are hundreds of other readers there who may be able to help you faster than we can.

If you're still stuck, we'd still love to hear from you, and here some tips for getting a clear, timely response.

Emailing Us

If you're emailing us asking for technical help, here's what we'd like to know:

  • What revision of the book are you referring to?
  • What operating system are you on? (e.g. Mac OS X 10.8, Windows 95)
  • Which chapter and which example project are you on?
  • What were you trying to accomplish?
  • What have you tried already?
  • What output did you expect?
  • What actually happened? (Including relevant log output.)

The absolute best way to get technical support is to send us a short, self-contained example of the problem. Our preferred way to receive this would be for you to send us a Plunkr link by using this URL.

That URL contains a runnable, boilerplate React app. If you can copy and paste your code into that project, reproduce your error, and send it to us you'll greatly increase the likelihood of a prompt, helpful response.

When you've written down these things, email us at [email protected]. We look forward to hearing from you.

Technical Support Response Time

We perform our free, technical support once per week.

If you need a faster response time and help getting any of your team's questions answered, then you may consider our premium support option. Email us at [email protected].

Get excited

Writing web apps with React is fun. And by using this book, you're going to learn how to build real React apps fast. (Much faster than spending hours parsing out-dated blog posts.)

If you've written client-side JavaScript before, you'll find React refreshingly intuitive. If this is your first serious foray into the front-end, you'll be blown away at how quickly you can create something worth sharing.

So hold on tight - you're about to become a React expert and have a lot of fun along the way. Let's dig in!