Installing Babel to use with React and JSX

You should start your project with Create React App (CRA).

It's a React app initializer made by the React team. It makes all the setup for you (including Babel and Webpack configurations) and add some really nice features to your development environment.

If you don't want to use CRA, you will need to install:

• babel-core
• babel-preset-env
• babel-preset-react

Then create a file .babelrc in the root of your project containing:

{ "presets": ["env", "react"] }

Then install and configure Webpack to run the Babel transforms.

(Or you could also run Babel manually with babel-cli).

The React documentation slightly addresses the Babel setup problem here.

They also suggest to use CRA here.

Ah, I found an answer in a Beginner's Guide to React at https://egghead.io/courses/the-beginner-s-guide-to-reactjs.

Apparently there is a standalone Babel compiler you can just link to in the head of the document, along with the links to ReactJS and it "does the right thing". Yay! Here are the links I'm using:

<script src="https://unpkg.com/react@16.2.0/umd/react.production.min.js"></script><script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

In the script tag that contains the ReactJS and JSX code, you must use type=text/babel:

<script type="text/babel">...</script>

I hope this helps other people starting out with React and JSX.

I'm guessing I'll eventually need to learn how to use NPM, NPX, Node, Webpack, and Babel (and possibly other tools) to run production ReactJS code, but for now I'm hoping this will allow me to learn ReactJS without having to worry about all that.

This is not an exact answer to your exact question, but it may help some people who end up here. Forget Babel, skip the extra compilation step and the project bloat, and:

Use something like React.createElement():

React.createElement('div', {className="container"},     [        React.createElement('h1', {key: "title"}, 'Greetings'),        React.createElement('p',  {key: "para"}, 'To the newcomer, ' + this.props.name + '!')    ]);

Or use preact:

h(    'div',    { id: 'foo' },    h('span', null, 'Hello!'));

In either case, nest elements to any depth desired.