1
Html –ஐ ரெண்டர் செய்யும் ரியாக்ட் ஜெ எஸ்.

ரியாக்ட் 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
import React from 'react';
import ReactDOM from '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
import React from 'react';
import ReactDOM from 'react-dom';
 
const myelement = (
  <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
import React from 'react';
import ReactDOM from 'react-dom';
 
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));

வெளியீடு:
Hallo
நன்றி.
முத்து கார்த்திகேயன்,மதுரை.

Leave a comment