Im new to React and would like to ask the different between
<script type="text/babel" ></script>
<script type="text/jsx" ></script>
my code works perfectly for both types.
about tag, you can see:
HTML script type Attribute
Browser default is text/javascript
JSX
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
Introducing JSX
Babel
Babel is a JavaScript compiler.
Deprecating JSTransform and react-tools
Related
Why do we need to use webpack, is it only for bundling and inheriting Plugins to minimize and compress.
what are all the major roles webpack plays in web application development?
The uses of webpack include
Transpile the JSX syntax (HTML tags inside Javascript) into JS
Transpile the ES6 syntax (arrow functions, spead operator, etc) into browser supported versions of Javascript.
It is much better to split code into separate files (modules) which can be imported. Webpack 'bundles' all those files into a single JS file for production use
At the time of bundling, it can also perform optimisations like minify, uglify, etc.
BTW, you don't need to use webpack. For example,
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="greeting-div"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/cjs/react-dom-server.browser.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return (
<p>Hello, Universe</p>
)
}
});
ReactDOM.render(
<Greeting/>,
document.getElementById('greeting-div')
);
</script>
</body>
</html>
Here, the JSX code is getting 'transpiled' to JS on-the-fly. However, this is not very efficient in production use.
As you mentioned, Webpack is a bundling tool, and you can use any other bundling tools such as browserify / rollup.
React apps usually gonna use ES6 imports, and not all the browsers supports it yet, therefore you need in React apps use some bundler to solve those "imports" and create a bundle file that the current browsers understands.
Webpack just got more popular and robust in the Front End community therefore most of the "starter kits" like create-react-app will use it.
My project is not node based so I am transpiling my jsx code in the browser, using the browser.js babel component downloaded from a CDN.
I would like to use the transform-class-properties babel plugin, but I can't figure out how to make it work when using babel in the browser from a CDN.
yes, I know I should use webpack and pre-transpile all my jsx code. I promise I will eventually.
We must add data-plugins="transform-class-properties" to use class properties feature, as shown in the sample below:
<script type="text/babel"
data-plugins="transform-class-properties"
data-presets="react, es2015,stage-2"
src="js/main.js">
</script>
You can see my codepen code here in https://codepen.io/ciptohadi79/pen/QxggwO
To spell it out:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel" data-plugins="">
//
// your jsx goes here
//
</script>
I am trying to require a react React module on plnkr in the script.jsx file using :
var AptList = require('./AptList');
Which is giving a "require is not defined" error.
I would like to know how to require modules on plnkr ?
You are not using any bundler, everything is in the browser, so you have to first include the script for that AptList component in your index.html:
<script src="AptList.js"></script>
<script src="script.jsx"></script>
That will already include the definition for that component. You need not (and cannot) use require there.
In AptList.js you need not have module.exports = AptList; because it will already have been imported using the script tag above. Also, you should remove the require inside script.jsx.
Now, the other big issue is you are using JSX, which is not supported natively by the browser. For that, you will need Babel, so add the following the scripts in index.html:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
Then, you have to add the following type to each script tag at the bottom, before the end of body:
<script type="text/babel" src="..."></script>
That will allow you to use ES6 syntax and JSX.
Here is the link to the plunk with everything working.
I downloaded React version 15 and created the following html document:
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
// React Code Goes Here
var MyComponent = React.createClass({
render: function(){
return (<h1>Hello, {this.props.name}!</h1>);
}
});
ReactDOM.render(
<MyComponent name="world" />,
document.getElementById('container')
);
</script>
</body>
</html>
The same works fine in jsfiddle but not on my machine. I want to avoid installing React dev tools or anything extra. Is that possible to get it to work with what I have or do I absolutely need to install something else?
There are tons of tutorials out there but they all seem to be missing something to get me started
If you're sure you have the react.js and react-dom.js files in a folder called build at the same level as that html page, the only thing missing would be:
a script include for babeljs in order for you to be able to use the JSX code you have in the body's script tag, add this to the <head> tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
As a precursory statement, I just want to make sure to mention that you probably won't want to do in-browser transpilation from JSX->JS for anything other than playing around with the technology. In a production environment you would want to precompile your JSX server-side or during a build step.
That being said, therein lies your problem: you're attempting to include JSX directly in the browser code, without including anything to do browser-side compilation for you.
Based on what I can see, it looks like the latest and greatest approach is to use <script type="text/babel"> now, instead of <script type="text/jsx">, and the compilation is accomplished via babel's browser.js.
This guide here appears to be mostly up to date: https://www.sitepoint.com/getting-started-react-jsx/
I'd say that if you are just starting react, a really good project to look at would be create-react-app. It does all the magic for you with one simple set up
I have a really basic app setup where I have the react lib and the router setup as global scripts and it seems that the Router requires the transformer to run. Is there any way that I can get it running without the transformer?
<script type="text/javascript" src="/js/vendor/react-with-addons.js"></script>
<script type="text/javascript" src="/js/vendor/JSXTransformer.js"></script>
<!-- if I remove the transformer then nothing is displayed on the page -->
<script type="text/javascript" src="/js/vendor/ReactRouter.min.js"></script>
Ok it seems that this was a user error. I had my main script setup as a jsx file :p
<script type="text/jsx" src="/js/dist/app.js"></script>
switching to a plain js did the trick!