Gain insights into Test-driven Development with React. Learn unit and integration testing using Jest and Enzyme, and explore tools like ESlint, Prettier, Babel, Webpack, and Travis CI.

react.tar.gz

intro

intro-copy

ch3-something

generic

ch3-1

ch3-2

ch4-1

ch2-1

ch2-2

ch2-3

ch5-copy

intro-copy-wmhr0i

ch3-1-copy

ch4-1-copy

ch4-1-copy-2

generic-copy

ch4-copy

This course is a deep dive into testing in React. You will learn unit testing and integration testing using tools such as Jest and Enzyme. You will also learn about other tools such as ESlint, Prettier, Babel, Webpack, and Travis CI that add convenience for coding and testing.

Test-driven Development with React

# Using Babel for JSX

Like any other JavaScript library, React is fully usable through plain, ordinary JavaScript code. But hardly anyone uses it that way. Instead, they compile a language called <firstuse>JSX</firstuse> down to ordinary JavaScript.

JSX allows HTML-like markup to be embedded within JavaScript code. Every tag in JSX is converted to a call to `React.createElement()`. For example, consider the following code:


~~~
const helloJSX = # Hello, JSX!;
~~~

This code would be compiled to:

~~~
const helloJSX = React.createElement(
  'h1',
  { className: 'super-big' },
  'Hello, JSX!'
);
~~~

If you’re new to JSX, this new syntax will take some getting used to. But it makes code much easier to read and write than the equivalent series of `React.createElement()` calls would be. For more details on JSX syntax, take a look at the [React docs](https://reactjs.org/docs/getting-started.html).

The compiler that translates JSX into ordinary JavaScript is known as Babel. And it does so much more than just JSX: with Babel, you can write code that uses JavaScript features that are only implemented in leading-edge browsers and run that code everywhere. More precisely, you can run that code in any JavaScript environment that supports the ECMAScript 5 standard (2009). Remember Internet Explorer 9? Thanks to Babel, it can run React code.

>**An Ode to CoffeeScript**<p>CoffeeScript was a language introduced by Jeremy Ashkenas in 2009 as “a little language that compiles into JavaScript.” CoffeeScript was hugely influential in two respects:<ul><li>It pioneered a number of syntax features that would make their way into the ECMAScript 6 standard. </li><li>It was the first compile-to-JavaScript language to catch on. The success of CoffeeScript sparked widespread interest in ES6-to-ES5 compilers, which is how Babel came to be.</li></ul></p><p>CoffeeScript’s time has passed, but today’s JavaScripters may have it to thank for kicking off an era of innovation for the once stagnant language.</p>

To start using Babel, add its core package to the project:

~~~sh
$ npm install --save-dev @babel/core@7.2.0
+ @babel/core@7.2.0
~~~

As with ESLint, Babel requires some configuration to make it useful. For this project, you’ll start with two popular Babel presets:

* The React preset, which provides support for JSX.
* The env preset, which provides support for all new JavaScript syntax features defined in ES2015 (a.k.a. ES6), ES2016, and ES2017. The name “env” refers to its ability to tailor the transpilation pipeline to a specified set of target environments.

## Steps to incorporate Babel with React

Following are the steps to incorporate Babel with React:

* Install the presets with npm:

   ~~~sh
   $ npm install --save-dev @babel/preset-react@7.0.0 @babel/preset-env@7.2.0
   + @babel/preset-react@7.0.0
   + @babel/preset-env@7.2.0
   ~~~

* Then bring in the two presets from a new file called `.babelrc.js`:

   ~~~js
   // .babelrc.js
   module.exports = {
     presets: ['@babel/preset-react', '@babel/preset-env'],
   };
   ~~~

* Babel will now apply this configuration to every JS file in the project. To try it out, create a JS file called `hello-babel.js`:

  ~~~
  // hello-babel.js
  import figlet from 'figlet';
  console.log(figlet.textSync('Hello, Babel!'));
  ~~~

  This file uses the syntax of the ES2015 module in the form of the `import` keyword. If you try running it in Node without Babel, you’ll get a syntax error:

  ~~~sh
  $ node hello-babel.js
  /Users/tburnham/code/test-driven-carousel/hello-babel.js:1
  (function (exports, require, module, __filename, __dirname) {
      import figlet from 'figlet';
    ^^^^^^
  
  SyntaxError: Unexpected token import
      at createScript (vm.js:80:10)
      at Object.runInThisContext (vm.js:139:10)
      at Module._compile (module.js:616:28)
      at Object.Module._extensions..js (module.js:663:10)
      at Module.load (module.js:565:32)
      at tryModuleLoad (module.js:505:12)
      at Function.Module._load (module.js:497:3)
      at Function.Module.runMain (module.js:693:10)
      at startup (bootstrap_node.js:191:16)
      at bootstrap_node.js:612:3
  ~~~

* To run this file through Babel from the command line, you will need the `@babel/cli` package:

  ~~~sh
  $ npm install @babel/cli@7.2.0
  + @babel/cli@7.2.0
  ~~~

  `@babel/cli` includes an executable called `babel` that you can run with npx:

  ~~~sh
  $ npx babel hello-babel.js
  "use strict";

  var _figlet = _interopRequireDefault(require("figlet"));

  function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : { default: obj };
  }
  
  console.log(_figlet.default.textSync('Hello, Babel!'));
  ~~~

  You don’t need to understand the details of this code. Long story short, Babel has compiled the `import` syntax into something that’s compatible with Node and other environments that don’t support ES2015 modules.

* You can run the compiled script by piping it into `node`. But first, install the package it’s trying to `import`:


  ~~~sh
  $ npm install figlet@1.2.0
  + figlet@1.2.0
  ~~~

  Now check out what happens:

  ~~~sh
  $ npx babel hello-babel.js | node
    _   _      _ _          ____        _          _ _
   | | | | ___| | | ___    | __ )  __ _| |__   ___| | |
   | |_| |/ _ \ | |/ _ \   |  _ \ / _` | '_ \ / _ \ | |
   |  _  |  __/ | | (_) |  | |_) | (_| | |_) |  __/ |_|
   |_| |_|\___|_|_|\___( ) |____/ \__,_|_.__/ \___|_(_)
  ~~~

  Figlet took a plain old string and turned it into ASCII art. Pretty cool!

* You can clean up `hello-babel.js` and its dependencies, as we won’t need them:

  ~~~sh
  $ rm hello-babel.js
  $ npm uninstall @babel/cli figlet
  ~~~

Then commit the new `.babelrc.js` and the changes to `package.json`:

~~~sh
:wrench: Initial Babel setup
~~~

In the next section, we’ll use the power of Babel to bring exciting new syntax features to the world of Jest testing.

> Try to carry out steps to incorporate Babel with React below. All the files have been completed for you.

Learn how Babel compiles JSX to JS and how to create a React project from Scratch.

React, Babel and JSX

Before We Begin

Test-Driven Development with Jest

Integrated Tooling with VS Code

Testing React with Enzyme

Styling in JavaScript with Styled-Components

Refactoring with Higher-Order Components

Continuous Integration and Collaboration

Conclusion

React, Babel and JSX

Using Babel for JSX