ரியாக்ட் கற்றுக்கொள்ளுங்கள்
நிறுவல்

Existing project-இல் React சேர்த்தல்

உங்கள் existing project-இல் சிறிது interactivity சேர்க்க விரும்பினால், அதை React-இல் rewrite செய்ய தேவையில்லை. உங்கள் existing stack-க்கு React சேர்த்து, எங்கு வேண்டுமானாலும் interactive React components render செய்யலாம்.

Note

Local development-க்கு Node.js install செய்ய வேண்டும். Online-இல் அல்லது நேரடியான HTML page மூலம் React முயற்சிக்க முடிந்தாலும், development-க்கு நீங்கள் பயன்படுத்த விரும்பும் பெரும்பாலான JavaScript tooling-க்கு நடைமுறையில் Node.js தேவைப்படும்.

Existing website-ன் முழு subroute-க்கு React பயன்படுத்துதல்

example.com-இல் Rails போன்ற வேறு server technology கொண்டு உருவாக்கப்பட்ட existing web app உள்ளது என்று வைத்துக்கொள்வோம்; example.com/some-app/ என்று தொடங்கும் அனைத்து routes-ஐயும் முழுமையாக React கொண்டு implement செய்ய விரும்புகிறீர்கள்.

அதை இவ்வாறு set up செய்ய பரிந்துரைக்கிறோம்:

  1. React-based frameworks-இல் ஒன்றைப் பயன்படுத்தி உங்கள் app-ன் React பகுதியை build செய்யுங்கள்.
  2. உங்கள் framework configuration-இல் /some-app-ஐ base path ஆக குறிப்பிடுங்கள் (இதற்கான வழி: Next.js, Gatsby).
  3. /some-app/-க்குள் வரும் அனைத்து requests-யும் உங்கள் React app handle செய்யும் வகையில் உங்கள் server அல்லது proxy-ஐ configure செய்யுங்கள்.

இதனால் உங்கள் app-ன் React பகுதி, அந்த frameworks-இல் உள்ள best practices-ன் பயனைப் பெறும்.

பல React-based frameworks full-stack ஆக உள்ளன; அவை உங்கள் React app server-ன் பயனைப் பெற அனுமதிக்கின்றன. ஆனால் server-இல் JavaScript run செய்ய முடியாவிட்டாலும் அல்லது விரும்பாவிட்டாலும் இதே அணுகுமுறையைப் பயன்படுத்தலாம். அந்த case-இல், /some-app/-இல் HTML/CSS/JS export-ஐ (Next.js-க்கு next export output, Gatsby-க்கு default) serve செய்யுங்கள்.

Existing page-ன் ஒரு பகுதிக்கு React பயன்படுத்துதல்

Rails போன்ற server technology அல்லது Backbone போன்ற client technology கொண்டு உருவாக்கப்பட்ட existing page ஒன்று உங்களிடம் உள்ளது, அதில் எங்கோ interactive React components render செய்ய விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம். இது React integrate செய்யும் பொதுவான வழி; உண்மையில் பல ஆண்டுகள் Meta-வில் React usage பெரும்பாலும் இப்படித்தான் இருந்தது!

இதை இரண்டு படிகளில் செய்யலாம்:

  1. JSX syntax பயன்படுத்தவும், import / export syntax மூலம் code-ஐ modules ஆகப் பிரிக்கவும், npm package registry-யிலிருந்து packages (உதாரணமாக React) பயன்படுத்தவும் அனுமதிக்கும் JavaScript environment அமைக்கவும்.
  2. Page-இல் நீங்கள் பார்க்க விரும்பும் இடத்தில் உங்கள் React components-ஐ render செய்யவும்.

சரியான அணுகுமுறை உங்கள் existing page setup-ஐப் பொறுத்தது; சில விவரங்களைப் பார்ப்போம்.

படி 1: Modular JavaScript environment அமைத்தல்

Modular JavaScript environment, உங்கள் code அனைத்தையும் ஒரே file-இல் எழுதுவதற்கு பதிலாக, React components-ஐ தனித்தனி files-இல் எழுத அனுமதிக்கிறது. npm registry-யில் பிற developers publish செய்த சிறந்த packages அனைத்தையும், React உட்பட, பயன்படுத்தவும் அனுமதிக்கிறது! இதை எப்படி செய்வது உங்கள் existing setup-ஐப் பொறுத்தது:

  • உங்கள் app ஏற்கனவே import statements பயன்படுத்தும் files ஆகப் பிரிக்கப்பட்டிருந்தால், உங்களிடம் ஏற்கனவே உள்ள setup-ஐ பயன்படுத்த முயற்சிக்கவும். உங்கள் JS code-இல் <div /> எழுதுவது syntax error தருகிறதா என்று பார்க்கவும். Syntax error வந்தால், JSX பயன்படுத்த Babel மூலம் உங்கள் JavaScript code-ஐ transform செய்ய, மேலும் Babel React preset-ஐ enable செய்ய வேண்டியிருக்கலாம்.

  • உங்கள் app-க்கு JavaScript modules compile செய்ய existing setup இல்லையென்றால், Vite கொண்டு அதை அமைக்கவும். Rails, Django, Laravel உட்பட backend frameworks உடன் பல integrations-ஐ Vite community maintain செய்கிறது. உங்கள் backend framework பட்டியலில் இல்லையென்றால், Vite builds-ஐ உங்கள் backend உடன் manually integrate செய்ய இந்த guide-ஐப் பின்பற்றவும்.

உங்கள் setup வேலை செய்கிறதா என்பதைப் பார்க்க, உங்கள் project folder-இல் இந்த command-ஐ run செய்யுங்கள்:

Terminal
npm install react react-dom

பிறகு உங்கள் main JavaScript file-ன் மேலே இந்த code lines-ஐ சேர்க்கவும் (அது index.js அல்லது main.js என்று அழைக்கப்படலாம்):

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

உங்கள் page-ன் முழு content “Hello, world!”-ஆல் replace செய்யப்பட்டிருந்தால், எல்லாம் வேலை செய்தது! தொடர்ந்து படியுங்கள்.

Note

Existing project-இல் modular JavaScript environment-ஐ முதல் முறையாக integrate செய்வது சற்று பயமுறுத்தலாம்; ஆனால் அது மதிப்புள்ளது! நீங்கள் சிக்கினால், எங்கள் community resources அல்லது Vite Chat-ஐ முயற்சிக்கவும்.

படி 2: Page-இல் எங்கும் React components render செய்தல்

முந்தைய படியில், உங்கள் main file-ன் மேலே இந்த code-ஐ வைத்தீர்கள்:

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

நிச்சயமாக, existing HTML content-ஐ உண்மையில் clear செய்ய நீங்கள் விரும்பவில்லை!

இந்த code-ஐ delete செய்யுங்கள்.

அதற்கு பதிலாக, உங்கள் HTML-இல் குறிப்பிட்ட இடங்களில் React components render செய்ய விரும்புவீர்கள். உங்கள் HTML page-ஐ (அல்லது அதை generate செய்யும் server templates-ஐ) open செய்து, எந்த tag-க்கும் unique id attribute சேர்க்கவும். உதாரணமாக:

<!-- ... somewhere in your html ... -->
<nav id="navigation"></nav>
<!-- ... more html ... -->

இதனால் அந்த HTML element-ஐ document.getElementById மூலம் கண்டுபிடித்து createRoot-க்கு pass செய்யலாம்; அதன் உள்ளே உங்கள் சொந்த React component-ஐ render செய்ய முடியும்:

import { createRoot } from 'react-dom/client';

function NavigationBar() {
  // TODO: Actually implement a navigation bar
  return <h1>Hello from React!</h1>;
}

const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(<NavigationBar />);

index.html-இலிருந்த original HTML content preserve செய்யப்பட்டிருப்பதையும், ஆனால் உங்கள் சொந்த NavigationBar React component இப்போது உங்கள் HTML-இல் உள்ள <nav id="navigation">-க்குள் தோன்றுவதையும் கவனியுங்கள். Existing HTML page-க்குள் React components render செய்வதைப் பற்றி மேலும் அறிய createRoot usage documentation-ஐ படிக்கவும்.

Existing project-இல் React adopt செய்யும்போது, buttons போன்ற சிறிய interactive components-இலிருந்து தொடங்கி, பிறகு படிப்படியாக “மேலே நகர்ந்து”, இறுதியில் உங்கள் முழு page-யும் React கொண்டு build ஆகும் நிலைக்கு செல்வது பொதுவானது. அந்த நிலையை அடைந்தால், React-ன் முழு பயனைப் பெற உடனே React framework-க்கு migrate செய்ய பரிந்துரைக்கிறோம்.

Existing native mobile app-இல் React Native பயன்படுத்துதல்

React Native existing native apps-இலும் incrementally integrate செய்யலாம். Android (Java அல்லது Kotlin) அல்லது iOS (Objective-C அல்லது Swift)-க்கான existing native app உங்களிடம் இருந்தால், அதில் React Native screen சேர்க்க இந்த guide-ஐப் பின்பற்றவும்.

Previousஅடிப்படையிலிருந்து ஒரு ரியாக்ட் பயன்பாட்டை உருவாக்குதல்
Nextஅமைப்பு