The full form JSX is JavaScript Extension that is used to generate output like HTML by writing JavaScript code. render() function is used by every component of react that specifies HTML output. JSX file supports HTML like syntax in JavaScript file that is converted by any pre-processor (ex:babel) to parse by JavaScript engine. JSX file works faster than normal JavaScript by optimizing the code and template can be created easily by JSX. How you can start working in X file is shown in this tutorial.
Adding Simple code in app.js
Open the main index file of reactjs app from the location, C:\Users\user\new-app\src\app.js. Replace the content of the file with the following code and check the output from the browser.
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<p className="App">
<h1>IDB Training Course</h1>
<h2>React JSX tutorial</h2>
<p>This tutorial shows the use of JSX.</p>
</p>
);
}
export default App;
Output:
Adding react component
Create a new js file named App2.js and add the following code. This code creates a class named App by inheriting Component class. Modify index.js to execute the code of App2.js file.
import React, { Component } from 'react';
import './App.css';
class App extends Component{
render(){
return(
<div className="App">
<h1>React App</h1>
{/* It is a comment */}
</div>
);
}
}
export default App;
Output:
Adding style in React Component
How you can embed style code in a react component is shown in this part of the tutorial. A variable named newstl is declared to set the style properties. Next, this variable is used as the style attribute value to set the style effect.
import React, { Component } from 'react';
import './App.css';
class App extends Component{
render(){
var newstl = {
fontSize: 50,
color: 'Blue'
}
return (
<div className="App">
<p style = {newstl}>Learning reactJS</p>
</div>
);
}
}
export default App;
Output:
Using simple expression in react component
Any arithmetic calculation can be done easily in react by using curly brackets({}). The following code will calculate the sum of 20 and 30.
import React, { Component } from 'react';
import './App.css';
class App extends Component{
render(){
return(
<div>
<h1 className = "App" >The sum of 20 and 30 is {20+30}</h1>
</div>
);
}
}
export default App;
Output:
Using ternary expression in react component
This following code shows the use of ternary operator in react component. The value of n is tested using ternary operator and printed the message based on the true or false value.
import React, { Component } from 'react';
import './App.css';
class App extends Component{
render(){
var n = 20;
return (
<div className="App">
<h1>{n > 10 ? 'n is more than 10' : 'n is less than 10'}</h1>
</div>
);
}
}
export default App;
Output:
Conclusion
The basic of reactjs is tried to explain in this tutorial for the new react users. Hope, this will help them.
You can check the following tutorial on react component.