Hacking with React
Last updated on 2016-05-19
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!
You can download the complete source code for the book from GitHub at https://github.com/twostraws/HackingWithReact.
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!
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.
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.
See full terms...
