Installing Babel to use with React and JSX

Question

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 compile 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!

Answer 1

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 .

Answer 2

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.

Answer 3

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.

Answer 4

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