notes.txt

Contents:

1.Working with array lists

2.Usage of keys

3.Conditional rendering

*************************************************************************************************************************

components = function என்று வைத்துக் கொள்ளலாம்.
ஒரு component ஆனது javascript function ஐ create செய்கிறது.
அந்த javascript function ஆனது HTML element ஐ return செய்யும்.


ஒரு component க்கு data ஐ அனுப்பினால் அதனை props என்போம்.
data ஐ ஒரு இடத்தில் இருந்து இன்னொரு இடத்திற்கு அனுப்புதல் மாதிரி.
props ஆனது output ஐ ஒரு object ஆக print செய்யும்.

*************************************************************************************************************************

2.Usage of keys

===>ஒவ்வொரு content அல்லது event ஐ தனித்தனியாக track செய்ய அல்லது unique ஆக இருப்பதற்கு தனித்தனியாக id ஐ கொடுக்க வேண்டும்.
    அதைத்தான் key என்று அழைக்கிறோம்.
    கிட்டத்தட்ட HTML ல் class and id கொடுப்பது போல்.

===>எல்லா program ம்  key value ஐ கொடுக்க வேண்டும்.

===>Example:
    <li key = {note.id} > {note.content}</li>

*************************************************************************************************************************

3.Conditional rendering

===>Conditional rendering = True/False

===>Condion ஆனது satisfied ஆனால் True , satisfied ஆகவில்லை என்றால் False.
    if-else போன்றது.

===>Conditional rendering = True/False ஐ மூன்று வழிகளில் கொடுத்து நாம் பயன்படுத்தலாம்.

    Method 1 : if-else
    Method 2 : ternary operator ( ? symbol )
    Method 3 : and operator ( && symbol)


===>Example: Method 1 : if-else

main.jsx : Array List
App.jsx  : Working with App.jsx
Note.jsx : Conditional rendering Steps given below

import React from 'react'

function Note({note}) {
    if(note.wc) {
        return (
            <li key = {note.id}>{note.content} ⭐</li>
          )
        }
        return (
            <li key = {note.id}>{note.content} </li>
        )
}

export default Note


===>Example: Method 2 : ternary operator ( ? symbol )
Note.jsx

<li> { note.wc ? note.content + '⭐⭐' : note.content}</li>


===>Example: Method 3 : and operator ( && symbol)
Note.jsx

<li> { note.content } { note.wc && '⭐⭐⭐' }</li>


output:
Notes
INDIA ***
NEWZELAND
AUSTRALIA ***
SOUTHAFRICA
PAKISTAN ***

மூன்று Method க்கும் ஒரே output தான் வரும்.வித்தியாசம் தெரிய வேண்டும் என்பதற்காக star icon ஐ மேலும் கொடுத்திருக்கிறோம்.
    
*************************************************************************************************************************

Example 1 : Create a component
function App() {
  return (
    <>
      <h1>Hello All,Good Morning</h1>
      <p>Did you have breakfast</p>
    </>
  )
}

export default App

*************************************************************************************************************************

Example 2 : Create a multiple component
function Hello() {
  return (
    <>
      <h1>Hello All,Good Evening</h1>
      <p>You can go home</p>
    </>
  )
}

function App() {
  return (
    <>
      <h1>Hello All,Good Morning</h1>
      <p>Did you have breakfast</p>
      <Hello />
      <Hello />
      <Hello />
    </>
  )
}

export default App

*************************************************************************************************************************

Example 3 : Create a multiple component & using props
function Hello(props) {
  console.log(props);

  return (
    <>
      <h1>Hello {props.name}</h1>
      <p>You are {props.age} years old</p>
    </>
  )
}

function App() {
  const age = 25;
  return (
    <>
      <h1>Hello All,Good Morning</h1>
      <p>Did you have breakfast</p>
      <Hello name = "Prabha" age = { 10 + 20 }/>
      <Hello name = "Karan" age = { age }/>
      <Hello name ="LEO"/>
    </>
  )
}

export default App

output:
Hello All,Good Morning
Did you have breakfast

Hello Prabha
You are 30 years old

Hello Karan
You are 25 years old

Hello LEO
You are years old

கவனிக்கப்பட வேண்டிய விஷயங்கள்:

===>console.log(props) என்று கொடுப்பது console.log ல் output ஐ காண பயன்படுகிறது.

===>name = "Prabha" name = "Karan" இவ்வாறு name ஐ set செய்து data ஐ pass செய்யலாம்.

===>age = { 10 + 20 } இவ்வாறு operator ஐ set செய்து data ஐ pass செய்யலாம்.

===>const age = 25; இவ்வாறு variable ஐ set செய்து data ஐ pass செய்யலாம்.
    age = { age } இவ்வாறு variable ஐ set செய்து data ஐ pass செய்யலாம்.

*************************************************************************************************************************

Example 4 : Working with array lists

main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

const notes = [
  {
    id : 1,
    content : "INDIA",
    wc : true
  },

  {
    id : 2,
    content : "NEWZELAND",
    wc : false
  },

  {
    id : 3,
    content : "AUSTRALIA",
    wc : true
  },

  {
    id : 4,
    content : "SOUTHAFRICA",
    wc : false
  },

  {
    id : 5,
    content : "PAKISTAN",
    wc : true
  }
]
ReactDOM.createRoot(document.getElementById('root')).
render(<App notes = {notes}/>)

கவனிக்கப்பட வேண்டிய விஷயங்கள்:

===>Array List கொடுத்துள்ளார்கள்.
===>props ஆனது notes = {notes} இவ்வாறு கொடுத்துள்ளோம்.


App.jsx
// import Hello from "./components/Hello";

import React from 'react'
import Note from './components/Note';

function App({notes}) {
  console.log(notes);

  return (
    <div>
      <h1>Notes</h1>
      <ul>
        {/* <li>{notes[0].content}</li>
        <li>{notes[1].content}</li>
        <li>{notes[2].content}</li>
        <li>{notes[3].content}</li>
        <li>{notes[4].content}</li> */}
        {
          notes.map(note => 
            <li> {note.content} </li>  
          )
        }
      </ul>
    </div>
  )
}

export default App


output:
Notes
INDIA
NEWZELAND
AUSTRALIA
SOUTHAFRICA
PAKISTAN


கவனிக்கப்பட வேண்டிய விஷயங்கள்:

===>Array List கொடுத்துள்ளார்கள்.
===>கொடுக்கப்பட்ட Array List ல் ஐந்து Array இருப்பதால் எளிதாக நாம் index value ஐ வைத்து output ஐ print செய்கிறோம்.
    இதுவே எண்ணற்ற தகவல்கள் ஒரு Array List ல் இருக்கும் போது map method ஐ பயன்படுத்தி எளிதாக print செய்யலாம்.
    ஆகவே இரண்டு முறைகளையும் மேலே குறிப்பிட்டுள்ளோம்.
===>ஆகவே குறிப்பிட்ட object ல் உள்ள தகவல்கள் print ஆகும்.




component ஐ மாற்றி props பயன்படுத்துதல்:

App.jsx
{
          notes.map(note => 
            <Note key = {note.id} note = {note} />  
          )
        }


Note.jsx
import React from 'react'

function Note({note}) {
  return (
    <li key = {note.id}>{note.content}</li>
  )
}

export default Note


output:
Notes
INDIA
NEWZELAND
AUSTRALIA
SOUTHAFRICA
PAKISTAN

கவனிக்கப்பட வேண்டிய விஷயங்கள்:

===>Array List கொடுத்துள்ளார்கள்.
===>output ல் எந்த மாற்றமும் இல்லாமல் அதே output ஐ print செய்யும்.
===>ஆனால் component ஐ மாற்றி props பயன்படுத்துகிறோம்.

*************************************************************************************************************************