babel script.jsx -o script.js fails for ch10 tooltip code

[calkusi]

Had to move script.jsx to a directory outside ch10 tooltip folder to convert script.jsx to script.js with the command: babel script.jsx -o script.js

Issuing the command above inside ch10 tooltip folder fails with error:

Error: Couldn't find preset "react" relative to directory "../tooltip"
    at /usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/usr/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transform (/usr/lib/node_modules/babel-cli/lib/babel/util.js:50:22)

[calkusi]

Issue the following command to install babel-cli and babel-preset-react to node-modules folder in the local folder:

npm i babel-cli babel-preset-react

Then try the command again: babel script.jsx -o script.js

[calkusi]

The jsx files need to be transpiled into js (javascript) files. This requires babel to be installed on the operating system in addition to node packages that ideally should be installed to the parent folder containing all project files for the chapter. The package.json file should also be installed at that level with instructions to facilitate transpiling jsx code to js. The basic node packages should be installed via the following command prompt commands at the level of the package.json file that is above all the project folders - in this case inside "ch04" folder:

npm i babel-cli babel-preset-react --save-dev
npm i react react-dom --save-dev
npm audit fix

Inspect the package.json file immediately under section on ( "scripts": { ... } ).

See:

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build-clock": "./node_modules/.bin/babel clock/jsx -d clock/js -w", "build-clock-es6": "./node_modules/.bin/babel clock-es6/jsx -d clock-es6/js -w", "build-clock-analog-digital": "./node_modules/.bin/babel clock-analog-digital/jsx -d clock-analog-digital/js -w", "build": "npm run build-clock & npm run build-clock-es6 & npm run build-clock-analog-digital" },

Note: JSON comments take the form of an underscore "_" preceding an identifier. For example, if require "build-clock-analog-digital" to be commented-out, then do this: "_build-clock-analog-digital" : { ... }

Once all the jsx files are ready, then run the following command, at the level of the package.json file, for transpiling the jsx files to js for the current project (in this case "clock"):

npm run build-clock

Then launch another console session, inside of the project folder (clock), and issue the following command to start an static server on port 3030:

static -p 3030

Then launch a web browser and point the url to localhost:3030