You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.3 KiB
43 lines
1.3 KiB
# 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.
|
|
|
|
|
|
|
|
- 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
|