These are the steps to take when developing a React application with automatic JSX (and es2015 to es5) transformation with Babel. I don't use a bundel in this example, so you cannot use things like "import" and you have to add script tags to your HTML page to import Javascript files.
Initialize your NPM project - this will create a package.json file:
npm init
Install babel-cli, babel-preset-react and babel-preset-es2015 locally as devDependencies:
npm install --save-dev babel-cli babel-preset-react babel-preset-es2015
Now you can create some React code. In this example I'll have the JSX code in src/ and want to transform it automatically to build/. I'll do this by adding the babel transformations to the package.json file:
"scripts": { "build" : "babel src --watch --out-dir build" }
To make Babel also use the presets, we'll create a .babelrc file:
{ "presets": ["es2015", "react"] }
Now we can run:
npm run build
And our React code in the src/ directory will be automatically transformed to the build/ directory.