9

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!

GG.
  • 21,083
  • 14
  • 84
  • 130
Elisabeth
  • 2,972
  • 6
  • 35
  • 39
  • 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](https://github.com/facebook/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?](https://github.com/facebook/create-react-app#whats-included) with create-react-app. – Kyle Richardson Jan 24 '18 at 04:36
  • Possible duplicate of [Setup React.js and Babel](https://stackoverflow.com/questions/43060582/setup-react-js-and-babel) – Yilmaz Jul 15 '19 at 09:28

4 Answers4

2

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.

GG.
  • 21,083
  • 14
  • 84
  • 130
  • I tried to figure out the create react app, but it does require knowledge of npm, npx, node, webpack, and babel, and how to configure everything. So I abandoned that path for now... although I'll have to learn it all eventually... – Elisabeth Jan 24 '18 at 19:18
  • Sorry that you feel that way. To run create react app you only need Node actually (NPM comes with it). There is nothing to configure. But I can understand that all these technologies feel overwhelming at first, especially if you just want to try React. Hope you'll success in your project. Good luck! :) – GG. Jan 25 '18 at 00:19
  • Thank you! I will definitely be coming back to Create React App later, when I need to set up a build process... and I'll learn more about Node before I do that :-) I just wish there were two guides to these tools; one for experts and one for beginners that actually explain why you're doing what, etc. I don't like blindly following instructions when I don't know what it all means... :-) – Elisabeth Jan 26 '18 at 03:04
  • By the way, the very first instruction was to use npx. I hadn't heard of npx before (I had npm) and it took me a little while to figure out what it was and how to install it (and that I needed up upgrade both my Node and npm installs to do it). – Elisabeth Jan 26 '18 at 03:06
  • To be fair with you, I heard about `npx` for the first time this week and I was a bit surprised too! It seems like it has been added to node quite recently. But you still can use `npm` instead of `npx`. I don't know why they replaced `npm` with `npx` in the Create React App doc. I agree it's a bit confusing. – GG. Jan 26 '18 at 03:13
  • To sum up: my wish is that the people who write documentation would think a little bit more about us newbies :-) – Elisabeth Jan 27 '18 at 06:18
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.

Elisabeth
  • 2,972
  • 6
  • 35
  • 39
  • Something you might find useful is [codesandbox.io](https://codesandbox.io). You write the code and it live updates like a hot module reloader but without you having to do any setup. – Kyle Richardson Jan 25 '18 at 05:43
  • Hi Kyle - thank you! I have tried those, but wanted to avoid the sandboxes so I could (eventually) figure out more what is required and how to set it up. – Elisabeth Jan 26 '18 at 03:02
1

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

Dema
  • 199
  • 1
  • 2
  • 15
0

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.

Engineer
  • 8,529
  • 7
  • 65
  • 105