Hacking with React

Hacking with React

Get started with React, React Router, Jest, Webpack, ES6 and more with this hands-on guide.

Want to learn React? Of course you do, which is why this book is for you: I'll teach you React programming from scratch, with no time wasted on pointless history lessons or random tangents. You'll learn how to make a real web app using React 0.14, React Router, JSX, Jest, Webpack, Babel, ES6 and more, and you'll do it at a pace you never thought...

About the Book

It's impossible to work on the web without having heard about React. Facebook developed it, but Airbnb are using it, as are Netflix, Uber and many more. And with good reason: React is a whole new way of developing complex web applications in a way that allows you to spend more time writing great code and less time fighting with the DOM.

I wrote Hacking with React with one goal in mind: to teach React coding in the fastest, most efficient way possible. After setting up your computer so that it's ready for development, you start coding with React immediately – there's no boring "History of web" chapter that rants on about how the internet was created. Instead, it's all code, all the time.

"What code is it?" I hear you ask. Well, let me tell you: it's React 0.14, the incredible new user interface toolkit. It's React Router, the smartest way to load and unload components as users change URL. It's JSX, the incredible new JavaScript syntax extension that lets you write inline XML. It's ES6, Webpack and Babel so you get to use powerful new features like string interpolation and classes along with hot reloading for faster development. It's Jest and ESLint, so you can write tests that prove your code works and has consistent syntax.

In short, it uses the very latest technology the web has to offer so that you learn quickly and easily.

Here are just some of the topics covered:

How to install Webpack, Babel and React for development with ES6.

How to create a React component and import it into an application.

How to write JSX to render content.

How to use props to give a component values.

How to handle events such as onClick.

How to use React state, and how it differs from props.

How to fetch data from GitHub using SuperAgent and Ajax.

How to use string interpolation and computed property names.

How to create routes using React Router.

How to create links between pages using <Link>.

How to render default content using <IndexRoute>.

How to use Jest to test React component rendering.

How to use Jest to simulate user interface with controls.

How to create asynchronous tests using waitFor() and runs().

How to lint your React code using ESLint and Babel.

In short, this book is the fastest way to get up to speed with React development, and is guaranteed to jump start your learning. Even better, your purchase includes any future updates free of charge!

Share this book

Feedback

About the Author

Paul Hudson is an award-winning developer and technical writer, having published Hacking with Swift, Hacking with PHP, PHP in a Nutshell, Ubuntu Unleashed, and been editor of Linux Format magazine. His apps are used by the likes of MacLife magazine, Edge magazine, Fender, Virgin, Jamie Oliver, Odeon, Tesco, and more.

Table of Contents

Welcome!

Begin at the Beginning: Chapter One

The Importance of using Webpack with React

Introduction to JSX

Importing React Components using ES6

What are React Props?

Generating Random Values for Our Page

How to Write if/else Conditional Statements in JSX

Using JSX to Render Several Elements at Once

Handling Events with JSX: onClick

State vs Props in React

Changing a React Component’s State with setState()

State and the Single Source of Truth

Rendering an Array of Data with map() and JSX

Cleaning up and Preparing for a Real Project

Fetching Ajax Data from GitHub using SuperAgent

Converting GitHub’s JSON into Meaningful JSX

Time for a Task: Reading from Three Feeds

How to Upgrade Our App to Read Three Feeds

Refactoring our Ajax Code: Don’t Repeat Yourself

Refactoring our State Code: Passing Parameters in onClick

Introducing React Router

How to Add a New Route to React Router

Creating a Link Between Pages in React Router

Making Custom URLs with React Router Params

Adding a Root Route Using React Router and IndexRoute

Cleaning up Our Routes and Preparing for the Next Step

Time for a Test: Clickable Usernames

Making Usernames Clickable: My Solution

Time for some Basic User Interface Polish

Adding React Router Breadcrumbs with Link and IndexLink

The First 80% is Done: Now What?

How to Configure Jest to Test React and ES6

Creating our First React Test with Jest

Using Jest to Test Our React Components

Using Jest to Simulate User Interaction on a React Component

Time for Ajax: Using Jest with Asynchronous Tests

Mocking Ajax with Jest: Making an Asynchronous Test Become Synchronous

Cleaning up Our Tests: Last Tweaks

Linting React using ESLint and Babel

Linting React using Airbnb’s ESLint Rules

How to Add React Component Prop Validation in Minutes

Bringing it all Together: Project Complete!

The Leanpub 45-day 100% Happiness Guarantee

Within 45 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Write and Publish on Leanpub

Authors, publishers and universities use Leanpub to publish amazing in-progress and completed books and courses, just like this one. You can use Leanpub to write, publish and sell your book or course as well! Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks. Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. It really is that easy.