1.

Explain Basic Code Snippet Of Jsx With The Help Of A Practical Example?

Answer»

Your browsers does not understand JSX code natively, we need to convert it to JavaScript first which can be understand by our browsers. We have aplugin which handles including Babel 5’s in-browser ES6 and JSX transformer CALLED browser.JS.

Babel will understand and recognize JSX code in <script type=”text/babel”></script> tags and transform/convert it to NORMAL JavaScript code.

In case of production we will need to pre-compile our JSX code into JS before deploying to production ENVIRONMENT so that our app renders faster.

<!DOCTYPE html>
<html lang="en">
<head><title>My First React JSX Example</title></head>
<body>
<div id="HELLO-world"></div>
<script src="https://fb.me/react-15.0.0.js"></script>
<script src="https://fb.me/react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return ( <p>Hello, World</p> )
}
});
ReactDOM.render( <HelloWorld/>, document.getElementById('hello-world')); 
</script>
</body>
</html>

Your browsers does not understand JSX code natively, we need to convert it to JavaScript first which can be understand by our browsers. We have aplugin which handles including Babel 5’s in-browser ES6 and JSX transformer called browser.js.

Babel will understand and recognize JSX code in <script type=”text/babel”></script> tags and transform/convert it to normal JavaScript code.

In case of production we will need to pre-compile our JSX code into JS before deploying to production environment so that our app renders faster.

<!DOCTYPE html>
<html lang="en">
<head><title>My First React JSX Example</title></head>
<body>
<div id="hello-world"></div>
<script src="https://fb.me/react-15.0.0.js"></script>
<script src="https://fb.me/react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return ( <p>Hello, World</p> )
}
});
ReactDOM.render( <HelloWorld/>, document.getElementById('hello-world')); 
</script>
</body>
</html>


Discussion

No Comment Found

Related InterviewSolutions