What Is This Course About?

Get introduced to what and what not to expect from this course.

We'll cover the following

Test-Driven development

Test-driven development (TDD) is the art of minimizing uncertainty, allowing you to feel confident about your code from the moment you write it. This is done by making a few assertions about that code beforehand. This groundwork sets up a short, satisfying feedback loop: as soon as you write your code, the tests light up green. Afterward, the tests remain in place, standing guard against regressions.

What’s in this course

This is a course about React. But it’s not like any other course or book about React. This is a course about writing React code in a joyful way. You might learn a few new things about React, but that’s not my goal. My goal is to help you write better code and to have more fun doing it.

In the chapter Test-Driven Development with Jest, you’ll get a taste of test-driven development, a programming methodology that uses tests to create a feedback loop as you work. For the test framework, you’ll use the lightning-fast Jest library.

Integrated Tooling with VS Code will introduce you to some of great tools: VS Code, an amazingly powerful editor; ESLint and Prettier, the ultimate code beautification duo; and Wallaby.js. You’ll experience the wonder of instantaneous feedback as you code.

Then in the Chapter Testing React with Enzyme, you’ll start writing React components and testing them with the Enzyme library. You’ll get acquainted with Babel, and you’ll build a complex component the TDD way with 100% code coverage.

Styling in JavaScript with Styled-Components is all about style. You’ll use the styled-components library to add pizzazz to React components. All of these styles will be defined in JavaScript, making them easy to test. You’ll start using one of Jest’s most powerful features: snapshots. And you’ll set up a webpack so that you can view your work in the browser.

In the chapter Refactoring with Higher-Order Components, you’ll learn some important techniques for refactoring React components. You’ll extract pieces of functionality into higher-order components (HOCs), encouraging code reuse and allowing core components to stay small and easy to test. And you’ll look at your components in depth through the power of the React Devtools.

Finally, in the chapter Continuous Integration and Collaboration, you’ll acquire all the tools you’ll need to share what you have built with the world. You will run your tests in the cloud with Travis CI, enforce your project’s rules with Husky, and create beautiful, interactive documentation with Storybook

What’s not in This Course

This is not an introduction to JavaScript. If you’re new to the language or just want a refresher, there is an excellent series of courses regarding JavaScript that can be searched easily on Educative’s platform. Most of the code in this course will employ features added to the language as part of the ECMAScript 6 (also known as ES6 or ES2015) standard. Here’s a quick test:

const stringifyAll = (...args) => args.map(String);

Some familiarity with React is helpful but not required. We’ll go over a brief explanation for each React concept we encounter.

All tests in this course are unit tests, meaning the JavaScript code is tested in isolation. We won’t be covering integration tests (e.g., a test where the JavaScript code talks to a database) or functional tests (e.g., a test where a tool like Selenium interacts with the code as it runs in a browser). These tests require far more effort to implement, run, and maintain than unit tests.

It’s best to achieve a high degree of code coverage with unit tests first, then add more layers of testing as needed.