ரியாக்ட்
js ஆனது html ஆனதை வெப் பக்கத்தில் ரென்ற் செய்வதற்கு பயன்படுகின்றது.
அதற்கு
அது பின் வரும் ஃபங்க்சனைப் பயன்படுத்துகின்றது.
ReactDOM.render()
இந்த ஃபங்க்சன்
இரண்டு ஆர்க்கியூமெண்ட்களை ஏற்கின்றது.
ஒன்று
html கோட்
மற்றது
html எலிமெண்ட்.
குறிப்பிட்ட
html வரிகளை html எலிமெண்டுகளில் ரெண்டெர் செய்கின்றது.
சான்று
நிரல்.
குறிப்பிட்ட
html கோடை ரூட் எலிமெண்டில் டிஸ்ப்ளேய் செய்ய உதவும் கோட்.
index.html
<!DOCTYPE html>
<html
lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Index.js
importReactfrom'react';
importReactDOMfrom'react-dom';
ReactDOM.render(<p>Hello</p>,document.getElementById('root'));
வெளியீடு:
Hello
Jsx பயன்படுத்தி
ஜாவாஸ்கிரிப்டில் html கோட் எழுதுதல்.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Index.js
importReactfrom'react';
importReactDOMfrom'react-dom';
constmyelement=(
<table> <tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement,document.getElementById('root'));
வெளியீடு:
|
Name
|
|
John
|
|
Elsa
|
இவ்வாறு
அது root என்ற பெயருடன் தான் இருக்க வேண்டும் என்றில்லை.
அது
div டைப்பாக தான் இருக்க வேண்டும் என்பதில்லை.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<header id="sandy"></header>
</body>
</html>
Index.js
importReactfrom'react';
importReactDOMfrom'react-dom';
ReactDOM.render(<p>Hallo</p>,document.getElementById('sandy'));
வெளியீடு:
Hallo
நன்றி.
முத்து
கார்த்திகேயன்,மதுரை.
No comments:
Post a Comment