React JSX Components

React JSX Components. by Dr. L. Maria Michael Visuwasam, B.Tech., M.E.,M.B.A., Ph.D Associate Professor, Department of AI&DS RMK College of Engineering and Technology Courtesy : Dr.N. Jagadish Kumar.

React JSX Components. React JSX React JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It is used with React to describe what the UI should look like. JSX makes it easier to write and add HTML in React, and it also allows you to build reusable components..

Functional Component. import React from 'react'; // A simple functional component using JSX function Greeting() export default Greeting;.

……... Embed Expression We can embed JavaScript expressions inside JSX using curly braces {}..

……... import React from "react"; const Welcome = () => ; export default Welcome;.

Implicit return. In JavaScript, if an arrow function has a single expression, it can return the result implicitly without needing the return keyword or curly braces {}..

Explicit return. const Header = () => ;. Here, the function explicitly returns JSX using {} and return..

Event Handling Click Events.

File Edit Selection View EXPLORER v UNTITLED (WORKSPACE) v stackl > node_modules > public v src Go Run Terminal Help Welcome JS App.js JS Content.js X p Until JS index.js stackl > src > JS Content.js > [e] Content JS JS JS JS JS JS App.css App.js Appl . •s Content.js Footer.js Header.js index.css index.js logo svg .gitignore package-lock-json package.json CD README.md > OUTLINE 1 2 3 5 6 7 8 9 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 import React from ' react ' const Content — function Namechange() const Earn" , "Invest" , "Grow" , "Give" ]; const ; return names [values] const contentSty1e — backgroundC010r: • lightgray • , color: 'black' , textA1ign: ' center padding: ' 2øpx' , '2øpx auto' , margrn : borderRadius : ' IOpx' width: ' 80%' , return ( <div style=> </div> export default Content PROBLEMS OUTPUT DEBUG CONSOLE TERMINAL PORTS TO create a production build, use npm run build. webpack conpiled successfully.

New tab C) localhost:3()C)0 React App To Do List Let's Give Money Copyright 0 2025.

File Edit Selection View EXPLORER v UNTITLED (WORKSPACE) v stackl > node_modules > public v src App.css JS App.js JS APPI.js JS Content.js JS Footer js JS Header.js index.css JS index.js logo.svg .gitignore O package-lock.json O package.json G) README.md Go Run Terminal Help Welcome JS App.js p Untitled (Workspa JS Content.js X JS index.js stackl > src > JS Content.js > Content > handleCIick 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 23 24 25 26 27 28 29 30 31 Imporc Reacc trom • reacc const content = ( )> <button onC1ick=> click here </button> </div> export default content.

New tab G) localhost:30()0 React App x To Do List Let's Invest Money click here Copyright 0 2025 CD Refresh Save as Print Send tab to your devices Create QR Code for this page Read aloud Translate to English Add page to Collections Share Screenshot View page source Inspect Alt+Left arrow Ctrl Ctrl+S Ctrl + p Ctrl+Shift+U Ctrl+Shift+S Ctrl+U.

New tab X React App Elements To Do List Let's Invest Money click here Copyright 0 2025 lang— en > html Styles Computed Filter accessKey : Layout Console Event Listeners DOM Breakpoints Properties x C] Show all A attributeSty1eMap: StylePropertyMap NamedNodeMap.

I New tab E Ø top Filter Default levels 04 To Do List Let's Invest Money click re Copyright 0 2025 (S) 39 messag... 36 user m... 1 error 3 wamings 37 info 1 verbose js24.5.ZZ Download the React DevT001s for a better development experience: / react O Thanks for your Support A (Deprecation] The 'textprediction attribute will be removed in the localhos.tL;-1 future. Use the •writingsuggestions• attribute instead. See https : /'learn.microsoft.com/en-us/microsoft-edge/web-2„. for more information. Thanks for main. 43a2841de42d522Q9. hot-update. js : 39 your Support [NEW] Explain Console errors by using Copilot in Edge: click to Don't show again explain an error. Learn more A [Deprecation] The 'textprediction ' attribute will be removed in the localhost/:l future. Use the •writingsuggestions• attribute instead. See https : /[learn.microsoft.com/en-us/microsoft-edge/web-2„. for more information. Thanks for main. 43a2841de42d522m29. hot -update. your Support.

File Edit Selection View EXPLORER v UNTITLED (WORKSPACE) v stackl > node_modules > public v src App.css JS App.js JS APPI.• JS JS Footer js JS Header.js index.css JS index.js logo.svg .gitignore O package-lock.json O package.json @ README-.md > OUTLINE > TIMELINE Go Run Terminal Help Welcome p Untitled (Workspace) JS App.js JS Content.js X JS index.js # App.cs stackl > src > JS Content.js > [e] default 1 2 3 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 21 22 23 24 25 26 27 28 29 30 31 Imporc Reacc trom const content = ( ) Money</p> < button > click here </button> </div> export default eontenq PROBLEMS OUTPUT DEBUG CONSOLE TERMINAL PORTS TO create a production build, use npm run build. webpack successfully.

c Q) localhost:30()O To Do List Let's Give Money click here Copyright 2025 E e.) top 48 messag„. 44 user m... 1 error 4 warmngs 45 info 1 verbose Filter Default levels experience: nrcps : / react-aevrools O Thanks for main.43a2841de42d522.29.hot-update.js:39 your Support A [Deprecation] The 'textprediction• attribute will be removed in the future. Use the ' instead. See for more information. IqgaXhqs.tL;.1 attribute O Thanks main .43a2841de42d522Q9. hot-update . js : 39 for your Support A [Deprecation] The 'textprediction attribute will be removed in the future. Use the ' instead. See for more information. Thanks for your Support localhost/ : I attribute Thanks for main. e15e6702bØ975f6—1b. hot-update. js : 39 your Support Thanks for your Support [NEW] Explain Console errors by Don't show again using Copilot in Edge: click to explain an error. Leacn—n.c.e [Deprecation] The 'textprediction• attribute will be removed in the future. Use the ' attribute instead. See for more information. O Thanks for main. 55dcd7f5e925ff5-42.hot-update.js:39 your Support Thanks for your Support Thanks for your Support Contentx js-;21 Content. js : 21.

File Edit Selection View EXPLORER v UNTITLED (WORKSPACE) v stackl > node modules > public v src App.css JS App.js JS APPI.js JS Content.js JS Footer js JS Header.js index.css JS index.js logo.svg .gitignore package-lock-json O package.json G) README.md Go Run Terminal Help Welcome p Untitled (Workspace) JS App.js JS Content.js X JS index.js # App.css stackl > src > JS Content.js > Content 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Ijnporc React T rom const content = ( ) function Namechange() const "Earn" , "Invest" , "Grow" , "Give"]; const values-math. floor(math. return names [values] const contentstyle =- ) return ( <div style=> < > Let's Namechane mone< > <button onclick={()=> handleclick( 'ram' click here </button> </div> export default Content.

c localhost:3()()0 To Do List Let's Grow Money click here Copyright 0 2025 E Ø top 56 messag... 49 user m... 1 error 4 warnings 50 info 4 verbose Filter Default levels 012 O Thanks for your Support [Deprecation] The ' textprediction I.QC.üh.Q.S.t.L;-1 attribute will be removed in the future. Use the 'writingsuggestions' attribute instead. See https : //learn.microsoft.com/en-us/microsoft-edge/webm for more information. O Thanks for your Support Thanks for your Support Thanks for your Support [NEW] Explain Console errors by using Copilot in Edge: click to explain an error. A [Deprecation] The textprediction ' attribute will be removed in the Don •t show again localhost/ future. Use the 'writingsuggestions' attribute instead. See https : //learn.microsoft.com/en-us/microsoft-edge'webm for more information. O Thanks for main.S5.dc.dZf-5Q9.2.5.ff-5242.z.hQ.t:.upda.te.xjs-a.9 your Support Thanks for main. ac98141Øfb9582fmee. hot -update .js: 39 your Support Thanks for your Support [Violation] •close' handler took 1302ms socket.js:24 [Violation] 'close' handler took 158145ms [Violation] close' handler took 596399ms Thanks for your Support ram socket-a j 74 j s : 24 Content..

File Edit Selection View EXPLORER v UNTITLED (WORKSPACE) v stackl > node modules > public v src App.css JS App.js JS APPI.js JS Content.js JS Footer.js JS Header.js index.css JS index.js logo.svg o .gitignore package-lock-json O package.json G) README.md Go Run Terminal Help Welcome p Untitled (Workspace) JS App.js JS Content.js X JS indexjs # App.css JS Appl.js stackl > src > JS Content.js > default 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 unport React T rom reacL const Content = ( ) </div> click here </button>.

New tab X React App x Console Filter E top 1 message 1 user mes... No errors No warnings 1 info No verbose Default levels To Do List Let's Give Money click here Copyright 0 2025 012 Content . js : 21 SyntheticBaseEvent.

v stackl > node_modules > public App.css JS App.js JS Appl js JS Content.' JS Footer.js JS Header.js index.css JS index.js logo.svg .gitignore package-json @ README.md stackl 1 2 3 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 > src > JS Content.js > LO Content Imporc i-«eacc trom reacc const Content = ( )> <button click here </div> export default content.

New tab O localhost:3C)C)O React App Console Q @ E Ø top. 1 message 1 user mes... No warnings (D 1 Info No verbose Filter Default levels To Do List Let's Invest Money click here Copyright 0 2025 <button> click here </button> 012 Qn.te.n.t.z.

19 20 21 22 23 24 25 26 27 28 29 const handleC1ick = console. log (e. target. innerText ) return ( <div style=> <p>Let's Money</p> <button onclick=> click here </button> </div>.

Console Filter To Do List click here Copyright 0 2025 E Ø top 1 message No errors No warnings 1 info No verbose Default levels 012 Qi.tenmjs.:.nn•.

UNTITLED (WORKSPACE) v stackl > node_modules > public v src App.css JS App.js JS APPI.js JS Content.js JS Footer.js JS Header.js index.css JS index.js logo.svg .gitignore O package-lock.json package.json G) README.md stackl > src > JS Content.js > 2 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 const Content = ( ) Money</p> < utton onc IC ere < utton> e => an eC IC e > c IC </div> export default content.

New tab X React App x Console Filter E Ø top 2 messages & 2 user me No errors NO warnings C) 2 info No verbose Default levels v To Do List •Invest Mone click here Copyright 0 2025 anks for the support Ra 012 Qnten.t.xjs.;.24J'.

Event Handling: Communicating from Child to Parent in React.

File Edit Selection View EXPLORER v UNTITLED (WORKSPACE) v stackl > node modules > public v src Go Run Terminal Help Welcome stackl > src > 1 JS JS App.js child.js JS Content.js JS index.js o JS JS JS JS JS JS JS App.css App.js child.•s Content.js Footer.js Header.js index.css index.js logo.svg .gitignore package-lock.json package.json G) README.md.

File Edit Selection View EXPLORER v UNTITLED (WORKSPACE) v stackl > node modules > public v src App.css JS App.js JS APPI.js JS child.js JS Content.js JS Footer.js JS Header.js index.css JS index.js logo.svg .gitignore O package-lock.json package json (D README.md Go Run Terminal Help Welcome p Untitled (Workspace) JS App.js JS Content.js JS index.js # App.css stackl > src > JS child.js > Zdefault 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import React from "react" ; const child = () re urn <div> com onent< h3> (button from Child! ")}> C IC Me </button> </div> export default Child;l.

File Edit Selection View EXPLORER v UNTITLED (WORKSPACE) v stackl > node modules > public v src Go Run Terminal Help Welcome stackl > src > 1 JS JS App.js parent.js JS Content.js p Untitled (Workspac JS index.js JS JS JS JS JS JS JS JS App.css App.js APPI js child.js Content.js Footer.js Header.js index.css index.js 10 0.sv parent. •s .gitignore package-lockjson package.json G) README.md.

File Edit Selection View EXPLORER v UNTITLED (WORKSPACE) v stackl > node modules > public V SrC App.css JS App.js JS APPI.js JS child.js JS Content.js JS Footer.js JS Header.js index.css JS index.js 10 0. rent.' .gitignore O package-lock.json /> export default parent;.

File Edit Selection View EXPLORER v UNTITLED (WORKSPACE) v stackl > node_modules > public v src # App.css JS App.js JS js JS Child.js JS Content.js JS Footer.js JS Header.js # index.css JS index.js logo.svg JS Parent.js 0 .gitignore O package-lock.json O package.json (D README.md Go Run Terminal Help Welcome stackl > src > JS JS App.js index.js > . JS Content.js p Untitled (Workspace) JS index.js X JS APPI.js JS Parent.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 18 19 20 import import import import import import React from 'react'; from 'react-dom/client ' ./index.css'; App from ' ./App'; Appl from './APPI' Parent from ' ./Parent' ; const root = 'root' )); root. render( <React.StrictM0de» <parent/> <APPI /> * / } < / React. // If you want to start measuring performance in your app, pass a function // to log results (for example: reportwebvitals(console. log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals.

G) localhost:300() Parent Component Child Component Click Me Console @ E Ø top. 1 message 1 user mes... No errors No warnings 1 info No verbose Filter Default levels Message from Child: Hello from Child! •ox Parent. js:6.

Class component. A class component in React is a JavaScript class that extends React.Component and includes a render() method, which returns JSX..

Welcome JS App.js JS Content.js JS index.js JS Appl.js x JS stackl > src > JS APPI.js > . 1 2 3 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 import React, from "react"; class Welcome extends Component</hl> <button Message</button> </div> export default Welcome;.

import React, from "react";. imports React and the Component class from the React library. Component is the base class for all class components in React..

render() </h1> <button onClick=>Change Message</button> </div> ); }.

G) localhost:30()() Hello, World! Change Message.

Feature Class component Functional component Syntax Uses class and extends React.Component Uses simple JavaScript functions State Uses this.state and this.setState() Uses useState hook Lifecycle Methods Uses methods like componentDidMount, componentDidUpdate Uses useEffect hook Performance Slightly heavier due to class overhead Lighter and faster.

What is a Hook in React?. A Hook is a special function in React that allows functional components to use state and lifecycle features without needing a class component. Hooks were introduced in React 16.8. React Hooks useState, useEffect, useContext, useReducer, useRef, useMemo.

Welcome JS App.js stackl > src > JS APPI.js > default JS Content.js from "react"; JS index.js JS Appl.js World ! " ) ; x 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import React, const Welcome = ( ) =></hl> <button onclick=>Change Message</button> </div> export default Welcome;.

import React, from "react";. useState – A React Hook that enables state management in functional components..

C O localhost:30C)0 Hello, World! Change Message.

File Edit Selection View EXPLORER v UNTITLED (WORKSPACE) v stackl ) node modules > public v src App.css JS App.js JS Appl js S Child.js on en .JS JS Footer-js JS Headerjs index.css JS index.js logo.svg JS Parent.js .gitignore package-lock-json packagejson (D README.md v OUTLINE Go Run Terminal Help Welcome p Untitled (Workspace) JS App.js JS Content.js 1 JS index.js JS Appl.js react react react react react react react-dcm react - dcm react react react JS Parent.js JS Childjs stackl > src > JS Content.js > . 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 import React from 'react' import • const Cont function const const return const co backg color : text-A1 • $ use useActionstate useCa11back useContext useDebugva1ue useDeferredVa1ue useEffect useFormState useFormStatus useld uselmperativeHand1e uselnsertionEffect padding: px margin: '20px auto' , borderRadius : ' IOpx' , width: '80%' , const handleC1ick (e) Money</p> <button onclick=> click here </button>.

File Edit Selection View v UNTITLED (WORKSPACE) v stackl > node_modules > public v src Go Run Terminal Help Welcome p Untitled (Workspace) JS App.js JS Content.js • IS index.js JS Appl.js stackl > src > JS Content.js > [e] Content > [e] contentStyle JS JS JS JS JS JS JS JS App.css App.js Appl js Child.js Content.js Footer.js Header.js index.css index.js logo.svg Parent.js o .gitignore O package-lock.json O package.json CD README.md v OUTLINE v [O Content v Namechange [e] names [e] values v [e] contentStyle 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 im ort React from 'react' import from ' react' ; const content - ( ) function Namechange() const "Earn", "Invest" , "Grow" , "Give"]; const values-math. floor(math. ; return names [values] const contentSty1e = backgroundcolor: lightgray' , color: 'black' , textA1ign: ' center ' padding: ' ' , margin: '2epx auto' , borderRadius : ' IOPX' , width: '80%' , I return ( <div s Earn < <button> click here </button> < button) <span>{}</span> <button>+</button> </div> export default content.

File Edit Selection View v UNTITLED (WORKSPACE) v stackl > node_modules > public Go Run Terminal Help Welcome p Untitled (Workspace) JS App.js JS Content.js • react ' ; JS index.js JS App. stackl > src > JS Content.js > Content 1 2 3 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 23 24 25 26 27 28 29 30 31 32 33 34 import React from •react • import package-lock.json O package.json G) README.md v OUTLINE v Content v $ Namechange [e] names values const "Invest" , "Grow" , "Give"]; const values—math. floor(Math. return names [values] const contentstyle =</span> <button>+</button> </div> export default content.

EXPLORER v UNTITLED (WORKSPACE) v stackl > node_modules > public v src App.css JS App.js JS APPI.js JS JS Content.js JS Footer.js JS Header.js index.css JS index.js logo.svg JS Parent.js .gitignore package-lock.json O package.json G) README.md v OUTLINE v Content v Namechange Welcome JS App.js JS Content.js X JS index.js JS Appl.js stackl > src > JS Content.js > Content 4 6 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 const content - function Namechange() COiiSL lidiiies=t earn 1 livesc const return names [values] const contentstyle => <p>Let's Earn money click here <button>-</button> < span ></span> <button onclick= incrementFunction /button> export default content.

To Do List Let's Earn Money click here Copyright 0 2025.

EXPLORER v UNTITLED (WORKSPACE) v stackl > node_modules > public v src App.css JS App.js JS APPI js JS Child.js JS Content.js JS Footer.js JS Header.js index.css JS index.js logo.svg JS Parent.js .gitignore O package-lock.json package.json @ README.md v OUTLINE v [eo Content v Namechange Welcome JS App.js JS Content.js X JS index.js JS APPIj stackl > src > JS Content.js > Content 6 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 const content = ( ) function Namechange() , , oruw , uave j; const values-math. floor(math . return names [values] const contentstyle =</span> <button onC1ick=>+</button>.

To Do List Let's Earn Money click here Copyright 0 2025.