Code tags for Babel and JSX?

JavaScript
1

Hello,

I have some code written in Babel and JSX. (it says the code is written in both languages)

What tags do I use because the normal javascript opening and closing tags do not work!?

Thanks.

2

It’s normally a part of the client-side development process that converts Babel code to JavaScript.
You can also convert it to JavaScript at https://babeljs.io/

3

You can’t really write code in Babel. Babel is a tool that will take code in one form and compile it to a different form.

For example, you might want to be writing in ES6 whilst developing, yet serving ES5 on your site, as this has wider browser support. You can use Babel to make this happen.

ES6 code:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Run it through babel with the ES2015 preset and you’ll get valid ES5 code:


function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Rectangle = function Rectangle(height, width) {
  _classCallCheck(this, Rectangle);

  this.height = height;
  this.width = width;
};

Saying that, it sounds like you’re using React (you mention JSX) and this is normally served using Webpack (in development). To deploy such an app, depending on your setup, you’ll normally have a command along the lines of npm run build to generate code you can open in your browser directly.

1 Like
4

Hello Pullo,

It is transpiling from ES6 to ES5 that I am trying to do. I did not write the code and babel is having problems with the non javascript in the code (there is a HMTL form with SELECT tags within the coding)

Do you know how to get around this with Babel?

It is written in React like you suggested.

5

Do you have a .package.json file in the project root?

If so, could you post the contents of that file here?

6

the code is here:

I need it converting to ES5. The other thing is it is currently using the wrong API. Assuming it is easy to change the API if you convert it to ES5 then I may be able to get this sorted!?

7

Can you post the contents of your package.json file as @James_Hibbard requested?

1 Like
8

I only have access to the link provided. Is that not what you are looking for?

9

So you’re trying to take that fiddle and make it run locally in your browser?

10

It’s not. Usually a project using Babel will have a package.json file in its root. That will detail out all of the dependencies for the project and how it should be processed out into something that the browser can then use. Where are you getting the Babel and JSX from?

11

Exactly - I want it to work with all browsers.

12

If you look at the JSFIDDLE it says it is written in Babel and JSX

13

If you notice on the fiddle, it has mentioned Babel & JSX in the top r/h corner of the code window. That tells you that jsfiddle is doing the necessary conversion behind the scenes for you. You cannot just lift that code and run it in a browser without setting up an environment to replicate what jsfiddle is doing for you.

Do you have NodeJS and NPM installed on your own machine currently?

14

OK - so you are saying it is useless on its own?

If so, I will need to contact the coder again.

15

this code is all I have

16

Well you certainly can’t just lift it and re-use it outside an environment set up to run it.

17

OK - Thanks for the information - I will get back to the coder.

18

Tricky. I suppose you could try porting the example to CodePen. CodePen is essentially the same as JSFiddle, but you have the option of viewing the transpiled JS, which you could then (theoretically, at least) use in a web page.

What’s your React/Redux knowledge like?

20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.