# Tools

## Lesson Objectives

1. Make Atom recognize JSX
1. Transpile ES2015 to ES5 Using Babel.io
1. Debug React Using React Dev Tools

## Make Atom recognize JSX

- By default, text editors like Atom don't recognize JSX code
- Atom allows us to install packages to enhance it

To Install from Atom:

1. Go to `Atom->Preferences`
1. Click `+ Install`
1. Search for `"react"`
1. Click `Install`

To Install from Terminal:

```
apm install react
```

You might need to do `Atom->Install Shell Commands`

## Transpile ES2015 to ES5 Using Babel.io

- Babel is an NPM package that converts ES2015 to ES5
- See what it does at: https://babeljs.io/repl/
- You can run it from the command line, but it's more common to use it as a plug-in to Webpack

## Debug React Using React Dev Tools

The [React dev tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en-US) allow you to inspect elements and see their properties, etc.

![react dev tools](https://lh3.googleusercontent.com/GjX6Q3_FVJfc0DqE2wiPKkgOfth6otzV-D7GV-wB6sH5_t1oodMaHOBLsYOLeydb85bKWu6X=s1280-h800-e365-rw)

- Follow [this link](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en-US) and click "Add To Chrome"
- You may need to refresh/restart chrome