27
Introduction to JSX | Day 2
JSX Stands For JavaScript Syntax Extension.
It lets us to integrate the UI(HTML) into the JavaScript Code.
By using this we are able to write the HTML code into the JavaScript.
But, HTML isnโt valid JavaScript ,if we use the HTML in our code then will throw an error.
So for the JSX to work we use a Transpiler called Babel.
Babel converts the JSX into the valid JavaScript Code.
- So they are the Tools that read the source code written in one programming language and produce equivalent code in another language.
- And Babel is also a Transpiler.
-
More Functions of a Transpilers.
Have u ever heard of the language like Typescript or any other language that is used in place of JavaScript.
These language also uses the Transpilers to convert their code into Valid javaScript Code.
The point of using these languages that they are more easy to learn in referance to the JavaScript.
So The JSX You Write is converted in the JavaScript
Like, This
<div>
<h3>JSX Demo</h3>
<img src="image.src"/>
</div>
Compiles into ๐
React.createElement(
"div", null,
React.createElement("h3", null, "JSX Demo"),
React.createElement("img", { src: "image.jpg})
);
//You can also write this javaScript code instead of the JSX the program will work the
same way.
You can also try it out on ๐๐ป
- To use the JavaScript in JSX u have to enclose them in the Curly braces
{}
.
Like,
class Demo extends React.Component{
render(){
return <h3>Your Marks are : {12*6}</h3>;
}
}
- U can use loops ,conditionals or many things in Curly Braces
{}
.
The More Better Example of Conditional ๐
//Mood Representer
function getName(){
const names = ["Rajiv","Sanjay","Michel","Harry","Honey","Jayant"];
return names[Math.floor(Math.random()*names.length)];
}
function getMood(){
const Moods= ["๐","๐","๐","๐","๐","๐
","๐","๐คฃ","๐","๐","๐"];
return Moods[Math.floor(Math.random()*Moods.length)];
}
class Moods extends React.Component{
render(){
return (<h3>{getName()} mood is : {getMood()}</h3>)
}
}
class App extends React.Component{
render(){
return(
<div>
<Moods/>
<Moods/>
<Moods/>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'));
JSX doesnโt supports the loops and other conditional expressions, So we have to use the JavaScript to handles the Conditions.
You can refer to this Blog page to learn more about conditional expressions implementation.
Here are the what I have learned and used.
-
Using
if else
โ
//Magic Number
function getNum() {
return Math.floor(Math.random() * 10 + 1);
}
// Using if and else
class MagicNum extends React.Component{
render(){
const num = getNum();
let msg;
if(num===7){
msg = "Congrates!!!!"
}
else{
msg = "Better luck next Time";
}
return (
<div>
<h1>Your Number is : {num}</h1>
{msg}
</div>
);
}
}
//Using Ternary Operator
class MagicNum extends React.Component {
render() {
const num = getNum();
return (
<div>
<h1>Your Number is : {num}</h1>
<p>{num===7? "Congrats!!!" : "Better luck next time" }</p>
</div>
);
}
}
//Using & opeartor
class MagicNum extends React.Component {
render() {
const num = getNum();
return (
<div>
<h1>Your Number is : {num}</h1>
<p>{num === 7 ? "Congrats!!!" : "Better luck next time"}</p>
{num === 7 && (
<img src="https://images.unsplash.com/photo-1641005361416-fba29d009bd2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyM3x8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60" />
)}
</div>
);
}
}
ReactDOM.render(<MagicNum />, document.getElementById("root"));
27