React அறிமுகக் கையேடு: பூஜ்ஜியத்திலிருந்து உங்கள் முதல் பயனர் இடைமுகத்தை உருவாக்குதல்

React என்பது பயனர் இடைமுகங்களை உருவாக்கப் பயன்படும் ஒரு JavaScript நூலகம் ஆகும். இது Facebook ஆல் உருவாக்கப்பட்டு பராமரிக்கப்படுகிறது, மேலும் இது முன்னணி மேம்பாட்டில் மிகவும் பிரபலமான கருவிகளில் ஒன்றாக மாறியுள்ளது. இந்த வழிகாட்டி உங்களை பூஜ்ஜியத்திலிருந்து அழைத்துச் சென்று, React இன் அடிப்படை கருத்துக்களை படிப்படியாகப் புரிந்துகொண்டு, ஒரு எளிய பயனர் இடைமுகத்தை உருவாக்கும்.

React ஐ ஏன் தேர்வு செய்ய வேண்டும்?

React பின்வரும் நன்மைகளைக் கொண்டுள்ளது:

• கூறுமயமாக்கல்: React பயனர் இடைமுகத்தை சுயாதீனமான, மீண்டும் பயன்படுத்தக்கூடிய கூறுகளாக உடைக்கிறது. இது குறியீட்டைப் பராமரிக்கவும் புரிந்துகொள்ளவும் எளிதாக்குகிறது.
• அறிவிப்பு: React அறிவிப்பு நிரலாக்க பாணியைப் பயன்படுத்துகிறது, அதாவது நீங்கள் வழங்க விரும்பும் உள்ளடக்கத்தை மட்டுமே விவரிக்க வேண்டும், React தானாகவே புதுப்பிப்புகள் மற்றும் ரெண்டரிங் ஆகியவற்றை கையாளும்.
• திறமையானது: React ஒரு மெய்நிகர் DOM மற்றும் அறிவார்ந்த வேறுபாடு வழிமுறையைப் பயன்படுத்துகிறது, இது தேவையற்ற ரெண்டரிங்கைக் குறைத்து, பயனர் இடைமுகத்தை திறமையாக புதுப்பிக்க முடியும்.
• பெரிய சமூக ஆதரவு: React ஒரு பெரிய சமூகம் மற்றும் பணக்கார சுற்றுச்சூழல் அமைப்பைக் கொண்டுள்ளது, உங்கள் மேம்பாட்டிற்கு உதவ ஏராளமான பயிற்சிகள், நூலகங்கள் மற்றும் கருவிகளைக் காணலாம்.
• குறுக்கு-தளம் திறன்: React Native, React ஐப் பயன்படுத்தி சொந்த மொபைல் பயன்பாடுகளை (iOS மற்றும் Android) உருவாக்க உங்களை அனுமதிக்கிறது.

ஆயத்த வேலை

தொடங்குவதற்கு முன், உங்கள் கணினியில் பின்வரும் கருவிகள் நிறுவப்பட்டுள்ளதா என்பதை உறுதிப்படுத்த வேண்டும்:

• Node.js: Node.js என்பது React மேம்பாட்டுக் கருவிகளை இயக்கப் பயன்படும் ஒரு JavaScript இயக்க நேர சூழல் ஆகும். நீங்கள் https://nodejs.org/ இலிருந்து பதிவிறக்கம் செய்து நிறுவலாம்.
• npm அல்லது yarn: npm (Node Package Manager) மற்றும் yarn ஆகியவை React இன் சார்புகளை நிறுவ மற்றும் நிர்வகிக்கப் பயன்படும் JavaScript தொகுப்பு மேலாளர்கள் ஆகும். Node.js ஐ நிறுவும்போது npm பொதுவாக நிறுவப்படும். yarn ஐ https://yarnpkg.com/ இலிருந்து நிறுவலாம்.

உங்கள் முதல் React பயன்பாட்டை உருவாக்குதல்

React திட்டத்தை விரைவாக உருவாக்க create-react-app ஐப் பயன்படுத்துவோம்.

1. npm ஐப் பயன்படுத்தி உருவாக்கவும்:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. yarn ஐப் பயன்படுத்தி உருவாக்கவும்:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

மேலே உள்ள கட்டளைகளை இயக்கிய பிறகு, create-react-app தானாகவே my-first-react-app என்ற பெயரில் ஒரு கோப்பகத்தை உருவாக்கி, அந்த கோப்பகத்தில் ஒரு React திட்டத்தைத் தொடங்கும். npm start அல்லது yarn start கட்டளைகள் மேம்பாட்டு சேவையகத்தைத் தொடங்கும், மேலும் உங்கள் React பயன்பாட்டைப் பார்க்க உங்கள் உலாவியில் http://localhost:3000 ஐப் பார்வையிடலாம்.

கோப்பக அமைப்பு

create-react-app உருவாக்கிய திட்டத்தின் கோப்பக அமைப்பு பின்வருமாறு:

my-first-react-app/
├── node_modules/         # திட்டச் சார்பு நூலகங்கள்
├── public/               # நிலையான ஆதாரங்கள் (எ.கா. HTML கோப்புகள்)
│   ├── index.html        # பயன்பாட்டின் நுழைவு HTML கோப்பு
│   └── ...
├── src/                  # ரியாக்ட் மூலக் குறியீடு
│   ├── App.css           # App கூறுக்கான CSS பாணி
│   ├── App.js            # App கூறு
│   ├── App.test.js       # App கூறுக்கான சோதனை கோப்பு
│   ├── index.css         # உலகளாவிய CSS பாணி
│   ├── index.js          # பயன்பாட்டின் நுழைவு JavaScript கோப்பு
│   ├── logo.svg          # ரியாக்ட் லோகோ
│   └── ...
├── .gitignore            # Git புறக்கணிப்பு கோப்பு
├── package.json          # திட்டத்தின் மெட்டாடேட்டா மற்றும் சார்புகள்
├── README.md             # திட்டத்தின் விளக்க ஆவணம்
└── yarn.lock             # சார்பு பதிப்பு பூட்டுதல் கோப்பு (yarn பயன்படுத்தினால்)

ரியாக்ட் கூறுகளைப் புரிந்துகொள்ளுதல்

ரியாக்ட் பயன்பாடுகள் கூறுகளால் ஆனவை. கூறுகள் என்பது பயனர் இடைமுகத்தின் குறிப்பிட்ட பகுதிகளை வழங்கப் பயன்படும் சுயாதீனமான, மீண்டும் பயன்படுத்தக்கூடிய குறியீடு தொகுதிகள் ஆகும்.

src/App.js கோப்பில், இயல்புநிலை App கூறுகளை நீங்கள் காணலாம்:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

குறியீடு விளக்கம்:

• import React from 'react'; ரியாக்ட் நூலகத்தை இறக்குமதி செய்கிறது.
• function App() { ... } App என்ற ஒரு செயல்பாட்டு கூறுகளை வரையறுக்கிறது.
• return ( ... ) கூறு வழங்க வேண்டிய உள்ளடக்கத்தை விவரிக்கும் JSX வெளிப்பாட்டை வழங்குகிறது.
• export default App; மற்ற கோப்புகளில் பயன்படுத்த App கூறுகளை ஏற்றுமதி செய்கிறது.

JSX (JavaScript XML)

JSX என்பது ஒரு JavaScript தொடரியல் நீட்டிப்பாகும், இது JavaScript குறியீட்டில் HTML போன்ற குறியீட்டை எழுத உங்களை அனுமதிக்கிறது. மேலே உள்ள எடுத்துக்காட்டில், ... என்பது ஒரு JSX வெளிப்பாடு ஆகும். JSX குறியீடு Babel மூலம் நிலையான JavaScript குறியீடாக மாற்றப்படும், இதனால் உலாவியால் புரிந்து கொள்ள முடியும்.

App கூறுகளை மாற்றுதல்

App கூறுகளை மாற்றி, ஒரு எளிய எண்ணுருவை உருவாக்குவோம்.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# எண்ணிக்கை கருவி

      தற்போதைய எண்ணிக்கை: {count}

      +
      -
    
  );
}

export default App;

மாற்றங்களுக்கான விளக்கம்:

• import React, { useState } from 'react'; useState Hook-ஐ இறக்குமதி செய்கிறது. useState என்பது ஒரு React Hook ஆகும், இது செயல்பாட்டுக் கூறுகளில் நிலையைச் சேர்க்கப் பயன்படுகிறது.
• const [count, setCount] = useState(0); useState Hook-ஐப் பயன்படுத்தி count எனப்படும் நிலை மாறியை உருவாக்கி, அதை 0-ஆக துவக்கவும். setCount என்பது count நிலையைப் புதுப்பிக்கப் பயன்படும் ஒரு செயல்பாடு ஆகும்.
• const increment = () => { setCount(count + 1); }; increment எனப்படும் ஒரு செயல்பாட்டை வரையறுக்கிறது, இது count நிலையை 1-ஆல் அதிகரிக்கும்.
• const decrement = () => { setCount(count - 1); }; decrement எனப்படும் ஒரு செயல்பாட்டை வரையறுக்கிறது, இது count நிலையை 1-ஆல் குறைக்கும்.
• `தற்போதைய எண்ணிக்கை: {count}

பக்கத்தில்countநிலையின் மதிப்பை காண்பிக்கிறது.{count}` என்பது JSX வெளிப்பாடு ஆகும், இது JSX குறியீட்டில் JavaScript மாறிகளைச் செருகப் பயன்படுகிறது.

• + மற்றும் - இரண்டு பொத்தான்களை உருவாக்குகின்றன, அவை முறையே increment மற்றும் decrement செயல்பாடுகளுடன் பிணைக்கப்பட்டுள்ளன. onClick என்பது ஒரு நிகழ்வு கையாளுபவர் ஆகும், இது பொத்தான் கிளிக் செய்யப்படும்போது குறிப்பிட்ட செயல்பாட்டை இயக்கப் பயன்படுகிறது.

src/App.js கோப்பைச் சேமித்த பிறகு, உலாவி தானாகவே புதுப்பிக்கப்படும், மேலும் நீங்கள் ஒரு எளிய எண்ணிக்கை கருவியைக் காண்பீர்கள். "+" பொத்தானைக் கிளிக் செய்தால் எண்ணிக்கை அதிகரிக்கும், "-" பொத்தானைக் கிளிக் செய்தால் எண்ணிக்கை குறையும்.

CSS ஸ்டைலைப் பயன்படுத்துதல்

உங்கள் React பயன்பாட்டை அழகாக்க CSS-ஐப் பயன்படுத்தலாம். create-react-app CSS Modules மற்றும் சாதாரண CSS கோப்புகளை ஆதரிக்கிறது.

CSS Modules-ஐப் பயன்படுத்துதல்:

CSS Modules ஒவ்வொரு கூறுக்கும் தனி CSS ஸ்டைலை உருவாக்க உங்களை அனுமதிக்கிறது, ஸ்டைல் ​​மோதல்களைத் தவிர்க்கிறது. CSS Modules-ஐ ஒரு கூறில் பயன்படுத்த, நீங்கள் .module.css இல் முடியும் ஒரு கோப்பை உருவாக்க வேண்டும்.

உதாரணமாக, App.module.css எனப்படும் ஒரு கோப்பை உருவாக்கி, அதில் பின்வரும் CSS ஸ்டைலைச் சேர்க்கவும்:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

பின்னர் src/App.js கோப்பில் CSS Modules-ஐ இறக்குமதி செய்யவும்:

import React, { useState } from 'react';
import styles from './App.module.css'; // CSS Modules-ஐ இறக்குமதி செய்கிறது

function App() {
  const [count, setCount] = useState(0); const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* CSS வகுப்புகளைக் குறிக்க styles பொருளைப் பயன்படுத்துக */}
      

# எண்ணிக்கை கருவி

      தற்போதைய எண்ணிக்கை: {count}

      +
      -
    
  );
}

export default App;

சாதாரண CSS கோப்பைப் பயன்படுத்துதல்:

உலகளாவிய பாணிகளை வரையறுக்க நீங்கள் ஒரு சாதாரண CSS கோப்பையும் பயன்படுத்தலாம். src/index.css கோப்பில், நீங்கள் உலகளாவிய பாணிகளை வரையறுக்கலாம்.

உதாரணமாக, பின்வரும் CSS பாணியைச் சேர்க்கவும்:

body {
  font-family: sans-serif;
}

இந்த பாணி பயன்பாட்டின் முழு body உறுப்புக்கும் பயன்படுத்தப்படும்.

அடுத்தது

வாழ்த்துக்கள், உங்கள் முதல் React பயன்பாட்டை முடித்துவிட்டீர்கள்! அடுத்து, React பற்றி மேலும் அறியலாம், உதாரணமாக:

• கூறு தொடர்பு: வெவ்வேறு கூறுகள் எவ்வாறு தொடர்பு கொள்கின்றன என்பதை அறிக.
• படிவ கையாளுதல்: படிவங்களை எவ்வாறு உருவாக்குவது மற்றும் கையாளுவது என்பதை அறிக.
• திசைவி: React Router ஐப் பயன்படுத்தி பல பக்க பயன்பாடுகளை எவ்வாறு உருவாக்குவது என்பதை அறிக.
• Redux அல்லது Context API: பயன்பாட்டு நிலையை எவ்வாறு நிர்வகிப்பது என்பதை அறிக.
• Hooks: useEffect, useContext போன்ற React Hooks பற்றி ஆழமாக அறிக.

React என்பது தொடர்ந்து பயிற்சி மற்றும் கற்றல் தேவைப்படும் ஒரு தொழில்நுட்பம் என்பதை நினைவில் கொள்ளுங்கள். உங்கள் கற்றல் மகிழ்ச்சியாக இருக்கட்டும்!