What is React?
React is an open-source front-end JavaScript library that's utilized for building component bassed client application
- React is especially used for Single page application
- It is used for handling View layer of Web Application and Mobile app.
- React Uses JSX syntax. JSX is as syntax extension of JS that allow developers to write HTML in their JS Code
- React uses Virtual Dom instead of Real DOM.
- Real DOM manipulation are expensive.
- React uses reusable UI Components to develop the view.
What is JSX?
JSX stands for JavaScript XML and it is an XML-Like extension to ECMA Script. Basically it provide the syntax for the Below Function.
React.createElement(type, props,... children)
In the below example the text inside <h1> tag is returned as JavaScript function to render function.
export default function App(){return(
<h1>{"Hello this is JSX code!"} </h1>
);
}
If you don't use JSX syntax then the respective JavaScript code should be written as below.
Functional Component
import {createElement} from 'react';
export default function App(){
return createElement(
'h1',
{
className:'greeting'},
'Hello, This is a JSx Code'
);
}
export default function App(){
return createElement(
'h1',
{
className:'greeting'},
'Hello, This is a JSx Code'
);
}
Class Component
class App extend React.Component{
render(){
return(
<h1>"{Hello, This is a JSx Code}</h1>
);
}
}
render(){
return(
<h1>"{Hello, This is a JSx Code}</h1>
);
}
}
