React JSX

 

React JSX

 

*      JSX stands for Javascript XML.

*      JSX allows us to write HTML in React.

*      JSX allows us to write HTML elements in Javascript and place them in the DOM without any createElement()

Index.js (with using JSX)

Const myele=React.createElement(‘h1’,{},”Hello world”);

ReactDOM.render(myele,document.getElementById(‘root’));

Without using JSX

Const myele=<h1>Hello world</h1>;

ReactDOM.render(myele,document.getElementById(‘root’));

Change in index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

const element = <h1>Hello, world</h1>;

root.render(element);

 

Output

 

 

Creating ReactJs with Css Style

 

Changes in index.js

 

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

var mystyle={color:'blue',textAlign:'center'}

const element = <div style={mystyle}><h1>Hello, world</h1>

<h2>Welcome to our page</h2>

<p>Hi Hello</p>

</div>

root.render(element);

 

Output