I'm new to React and Babel and JSX. I'm trying to figure out how to install Babel so it will "do the right thing" with React and JSX in the browser.

However, the documentation for Babel assumes that I already know the entire NPM/Node + many other package managers + frameworks ecosystem, which I don't.

Is there any documentation out there for someone who simply wants to use Babel to pile JSX for a React application? I want to learn how to do it on my machine (not on a hosted site) but it just seems like there is zero beginner documentation out there.

It also seems like various versions of these pieces no longer work together so I'm a bit confused about what I need.

So far I have downloaded React 16.2, and used npm to install Babel with

npm install --save-dev babel-plugin-transform-react-jsx

and have a node_modules/ folder in my folder where Babel is (seems to be version 6.24.1, no idea if that's the right one for React 16.2), and where I'd like to put my HTML and JavaScript.

But now I'm stuck. I have no idea how to get Babel to do what I need. I'd like to just write some HTML with some React + JSX in it and have the "right thing" happen, but cannot find any documentation as to how to do that.

Thank you!

I'm new to React and Babel and JSX. I'm trying to figure out how to install Babel so it will "do the right thing" with React and JSX in the browser.

However, the documentation for Babel assumes that I already know the entire NPM/Node + many other package managers + frameworks ecosystem, which I don't.

Is there any documentation out there for someone who simply wants to use Babel to pile JSX for a React application? I want to learn how to do it on my machine (not on a hosted site) but it just seems like there is zero beginner documentation out there.

It also seems like various versions of these pieces no longer work together so I'm a bit confused about what I need.

So far I have downloaded React 16.2, and used npm to install Babel with

npm install --save-dev babel-plugin-transform-react-jsx

and have a node_modules/ folder in my folder where Babel is (seems to be version 6.24.1, no idea if that's the right one for React 16.2), and where I'd like to put my HTML and JavaScript.

But now I'm stuck. I have no idea how to get Babel to do what I need. I'd like to just write some HTML with some React + JSX in it and have the "right thing" happen, but cannot find any documentation as to how to do that.

Thank you!

• javascript
• reactjs
• build
• jsx
• babeljs

• 1 If you want to "just write some HTML with some React + JSX in it and have the "right thing" happen", use create-react-app, it will do all the configuration of babel and webpack for you. Later when you want to know what is going on behind the scenes you can eject the config. Here is a direct link to What's Included? with create-react-app. – Kyle Richardson Commented Jan 24, 2018 at 4:36
• Possible duplicate of Setup React.js and Babel – Yilmaz Commented Jul 15, 2019 at 9:28

4 Answers 4

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 piler 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./[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg./[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg./[email protected]/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.

As pointed out in the React website (about using a script to add JSX functionality):

This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production.

So it suggests instead to use a JSX preprocessor named Babel (it works more or less like a CSS preprocessor would work, so translates JSX into javascript).

The only requirement is to have Node.js installed, so that you could download Babel and add it to your project as a npm.

Below the link to follow all the instructions:

Add react to website

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 pilation 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 newer, ' + this.props.name + '!')
    ]
);

Or use preact:

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

In either case, nest elements to any depth desired.