ReactJs Tutorials
What is JSX?
JSX is an extension to javascript. It enables developer to create virtual DOM using XML syntax. It compiles down to pure JavaScript (React.createElement function calls). JSX code looks a lot like HTML.
If a JavaScript file contains JSX code, then that file will have to be compiled. That means that before the file reaches a web browser, a JSX compiler will translate any JSX into regular JavaScript.
const hello = "<h1>Hello, Sana!</h1>";
JSX Elements
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements.
A basic unit of JSX is called a JSX element.Here’s an example of a JSX element:
<h1>Hello Sara</h1>
This JSX element looks exactly like HTML! The only noticeable difference is that you would find it in a JavaScript file, instead of in an HTML file.
Assign to a variable based on a condition.
var condition = true;
if(condition ) {
greeting = <h1>Hello Sana!</h1>
}
Can be used as return value of a function.
File name : index.php
function Say() {
return <h1>Hello sana!</h1>
}
greeting = Say()
Can be used as argument of a function.
function Say(msg) {
ReactDOM.render(msg, document.getElementById('react-app')
}
Say(<h1>Hello Sana!</h1>)
<p>Hello ittutorial</p>
React.createElement("p", null, "Hello ittutotial");
The above line creates a react element and passing three arguments inside where the first is the name of the element which is p, second is the attributes passed in the p tag, and last is the content you pass which is the "Hello ittutorial."
Why we use JSX in React?
For a UI, we need Html, and each element in the dom will have events to be handled, state changes, etc.
Expressions
JSX supports expression in pure JavaScript syntax. Expression has to be enclosed inside the curly braces, { }. Expression can contain all variables available in the context, where the JSX is defined.
File name : Example
<script type="text/babel">
var datTime = new Date().toTimeString();
ReactDOM.render(
<div><p>The current time is {datTime}</p></div>,
document.getElementById('react-app') );
</script>
Output :-
Example
import React from 'react';
import ReactDOM from 'react-dom';
const myelement = <h1>React is {10 + 5} times better with JSX</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
Functions
JSX supports user defined JavaScript function. Function usage is similar to expression.
<script type="text/babel">
var datTime = new Date().toTimeString();
ReactDOM.render(
<div><p>The current time is {datTime}</p></div>,
document.getElementById('react-app')
);
</script>
Attributes
JSX supports HTML like attributes. All HTML tags and its attributes are supported. Attributes has to be specified using camelCase convention. For example, class attribute in HTML has to be defined as className.
<style>
.red { color: red }
</style>
<script type="text/babel">
function getCurrentTime() {
return new Date().toTimeString();
}
ReactDOM.render(
<div>
<p>The current time is <span className="red">{getCurrentTime()}</span></p>
</div>,
document.getElementById('react-app')
);
</script>
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Ittutorial</h1>
<h2>IT Training</h2>
<p data-demoAttribute = "demo">This website contains the best IT tutorials.</p>
</div>
);
}
}
export default App;
File name : index.php
<style>
.red { color: red }
</style>
<script type="text/babel">
function getCurrentTime() {
return new Date().toTimeString();
}
var class_name = "red";
ReactDOM.render(
<div>
<p>The current time is <span className={class_name}>{getCurrentTime()}</span></p>
</div>,
document.getElementById('react-app')
);
</script>
Example :-
File name : App.JSX
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Ittutorial</h1>
<h2>IT Tutorial</h2>
<p>This website contains the best Codeigniter tutorials.</p>
</div>
);
}
}
export default App;
JSX Comments
JSX allows us to use comments that begin with /* and ends with */ and wrapping them in curly braces {} just like in the case of JSX expressions.
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "hello" >Hello Sana</h1>
{/* This is a comment in JSX */}
</div>
);
}
}
export default App;
JSX Styling
React always recommends to use inline styles. To set inline styles, you need to use camelCase syntax. React automatically allows appending px after the number value on specific elements.
import React, { Component } from 'react';
class App extends Component{
render(){
var myCss = {
fontSize: 20,
fontFamily: 'Courier',
color: '#003300'
}
return (
<div>
<h1 style = {myCss }>https://ittutorial.in</h1>
</div>
);
}
}
export default App;
NOTE :- JSX not support IF Statement
JSX cannot allow to use if-else statements. Instead of it, you can use conditional (ternary) expressions. It can be seen in the following example.
import React, { Component } from 'react';
class App extends Component{
render(){
var i = 5;
return (
<div>
<h1>{i == 1 ? 'True!' : 'False!'}</h1>
</div>
);
}
}
export default App;
Example 1 : with jsx
const myelement = <h1>I Love ittutorial!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
JSX allows us to write HTML directly within the JavaScript code.
JSX is an extension of the JavaScript language based on ES6, and is translated into regular JavaScript at runtime.
Example 2 : without jsx
const myelement = React.createElement('h1', {}, 'I hate JSX!');
ReactDOM.render(myelement, document.getElementById('root'));
example
import React from 'react';
import ReactDOM from 'react-dom';
const myelement = (
<ul>
<li>Sara</li>
<li>Arham</li>
<li>Sana</li>
</ul>
);
ReactDOM.render(myelement, document.getElementById('root'));
Example
import React from 'react';
import ReactDOM from 'react-dom';
const myelement = (
<>
<p>I am a sara.</p>
<p>I am a sana.</p>
</>
);
ReactDOM.render(myelement, document.getElementById('root'));
JSX will throw an error if the HTML is not correct, or if the HTML misses a parent element.
Alternatively, you can use a "fragment" to wrap multiple lines. This will prevent unnecessarily adding extra nodes to the DOM.
A fragment looks like an empty HTML tag: <></>
import React from 'react';
import ReactDOM from 'react-dom';
const myelement = (
<div>
<h1>I am a React.</h1>
<h1>I am a PHP</h1>
</div>
);
ReactDOM.render(myelement, document.getElementById('root'));
Elements Must be Closed
JSX follows XML rules, and therefore HTML elements must be properly closed.
Close empty elements with />
import React from 'react';
import ReactDOM from 'react-dom';
const myelement = <input type="text" />;
ReactDOM.render(myelement, document.getElementById('root'));
Attribute class = className
The class attribute is a much used attribute in HTML, but since JSX is rendered as JavaScript, and the class keyword is a reserved word in JavaScript, you are not allowed to use it in JSX.
Use attribute className instead.
JSX solved this by using className instead. When JSX is rendered, it translates className attributes into class attributes.
File name : index.php
import React from 'react';
import ReactDOM from 'react-dom';
import './mystyle.css';
const myelement = <h1 className="myclass">Hello It tutorial</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
Conditions - if statements
React supports if statements, but not inside JSX. To be able to use conditional statements in JSX, you should put the if statements outside of the JSX, or you could use a ternary expression instead:
import React from 'react';
import ReactDOM from 'react-dom';
const x = 5;
let text = "Goodbye";
if (x < 10) {
text = "Hello";
}
const myelement = <h1>{text}</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
import React from 'react';
import ReactDOM from 'react-dom';
const x = 5;
const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
Note that in order to embed a JavaScript expression inside JSX, the JavaScript must be wrapped with curly braces, {}.