React js t2 - jsx
0 likes312 views
JSX is an extension to JavaScript that allows writing HTML-like code in React files. It combines HTML and JavaScript together, making it easier to manage state changes and events in the DOM. Expressions can be embedded in JSX using curly braces. Files with the .jsx extension contain JSX code, while .js files contain plain JavaScript. The transpiler converts JSX into standard JavaScript that browsers can understand.
React js t2 - jsx
- 1. ReactJs : Tutorial-02-JSX What is JSX? JSX is an extension to javascript. It is a template script where you will have the power of using HTML and Javascript together. Here is a simple example of a JSX code. const h1tag = "<h1>Hello, from RTDL Tutorials!</h1>"; Why we need JSX in React? For a UI, we need Html, and each element in the DOM will have events to be handled, state changes, etc. In case of React, it allows us to make use of Html and javascript in the same file and take care of the state changes in the DOM in an efficient manner. Expressions in JSX index.js import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, from RTDL Tutorials!</h1>, document.getElementById('root') ); index.js import React from 'react'; import ReactDOM from 'react-dom'; const display = "Hello, from RTDL Tutori als!"; const h1tag = "<h1>{display}</h1>"; ReactDOM.render( h1tag, document.getElementById('root') ); The Output will show the line as
- 2. ReactJs : Tutorial-02-JSX What is the solution of this? Create a text.jsx file and put the code in the file. Import the test.jsx file in to index.js file and use it. test.jsx import React from 'react'; import ReactDOM from 'react-dom'; const display = "Hello, to RTDL Tutorial s"; const h1tag =<h1>{display}</h1>; export default h1tag; Index.js import React from 'react'; import ReactDOM from 'react-dom'; import h1tag from './test.jsx'; ReactDOM.render( h1tag, document.getElementById('root') ); Check the same in the browser: http://www.localhost:3000/index.html Difference between js and jsx files ReactJS - .JS vs .JSX There is none when it comes to file extensions. Your bundler/transpiler/whatever takes care of resolving what type of file contents there is. There are however some other considerations when deciding what to put into a .js or a .jsx file type. Since JSX isn't standard JavaScript one could argue that anything that is not "plain" JavaScript should go into its own extensions ie., .jsx for JSX and .ts for TypeScript for example.