రియాక్ట్‌తో చేయవలసిన పనుల జాబితా యాప్‌ను రూపొందించండి

రియాక్ట్‌తో చేయవలసిన పనుల జాబితా యాప్‌ను రూపొందించండి
మీలాంటి పాఠకులు MUOకి మద్దతు ఇవ్వడానికి సహాయం చేస్తారు. మీరు మా సైట్‌లోని లింక్‌లను ఉపయోగించి కొనుగోలు చేసినప్పుడు, మేము అనుబంధ కమీషన్‌ను సంపాదించవచ్చు. ఇంకా చదవండి.

రియాక్ట్ వంటి కొత్త టెక్నాలజీని నేర్చుకోవడం అనేది అనుభవం లేకుండా గందరగోళంగా ఉంటుంది. డెవలపర్‌గా, వాస్తవ-ప్రపంచ ప్రాజెక్ట్‌లను నిర్మించడం అనేది భావనలు మరియు లక్షణాలను అర్థం చేసుకోవడానికి అత్యంత ప్రభావవంతమైన మార్గాలలో ఒకటి.





ఆనాటి MUO వీడియో కంటెంట్‌తో కొనసాగడానికి స్క్రోల్ చేయండి

రియాక్ట్‌తో చేయవలసిన పనుల జాబితాను రూపొందించే ప్రక్రియను అనుసరించండి మరియు రియాక్ట్ ఫండమెంటల్స్‌పై మీ అవగాహనను పెంచుకోండి.



చేయవలసిన పనుల జాబితాను రూపొందించడానికి ముందస్తు అవసరాలు

మీరు ఈ ప్రాజెక్ట్ను ప్రారంభించడానికి ముందు, అనేక అవసరాలు ఉన్నాయి. మీరు కింది వాటిపై ప్రాథమిక అవగాహన కలిగి ఉండాలి, HTML, CSS, JavaScript, ES6 , మరియు రియాక్ట్. మీరు Node.jsని కలిగి ఉండాలి మరియు npm, జావాస్క్రిప్ట్ ప్యాకేజీ మేనేజర్ . మీకు విజువల్ స్టూడియో కోడ్ వంటి కోడ్ ఎడిటర్ కూడా అవసరం.





ఈ ప్రాజెక్ట్ ఉపయోగించే CSS ఇక్కడ ఉంది:

 /* styles.css */ 
.App { 
  font-family: sans-serif; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.Todo { 
  background-color: wheat; 
  text-align: center; 
  width: 50%; 
  padding: 20px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
  margin: auto; 
} 
 
ul { 
  list-style-type: none; 
  padding: 10px; 
  margin: 0; 
} 
 
button { 
  width: 70px; 
  height: 35px; 
  background-color: sandybrown; 
  border: none; 
  font-size: 15px; 
  font-weight: 800; 
  border-radius: 4px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.input { 
  border: none; 
  width: 340px; 
  height: 35px; 
  border-radius: 9px; 
  text-align: center; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.Top { 
  display: flex; 
  justify-content: center; 
  gap: 12px; 
} 
 
li { 
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  padding: 10px; 
} 
 
li:before { 
  content: "*"; 
  margin-right: 5px; 
}

1. ప్రాజెక్ట్ పర్యావరణాన్ని సెటప్ చేయండి

ఈ దశలో ప్రాజెక్ట్‌ను సెటప్ చేయడానికి అవసరమైన అన్ని ఆదేశాలు మరియు ఫైల్‌లు ఉంటాయి. ప్రారంభించడానికి, కొత్త రియాక్ట్ ప్రాజెక్ట్‌ను సృష్టించండి. టెర్మినల్ తెరిచి, ఈ ఆదేశాన్ని అమలు చేయండి:



 npx create-react-app todo-list

అవసరమైన అన్ని ఫైల్‌లు మరియు ప్యాకేజీలను ఇన్‌స్టాల్ చేయడానికి ఇది కొన్ని నిమిషాలు పడుతుంది. ఇది టోడో-లిస్ట్ పేరుతో కొత్త రియాక్ట్ అప్లికేషన్‌ను సృష్టిస్తుంది. మీరు ఇలాంటివి చూసిన తర్వాత మీరు సరైన మార్గంలో ఉన్నారు:

డైరెక్టరీ లోపల అమలు చేయడానికి ఆదేశాల జాబితా.

ఈ ఆదేశాన్ని ఉపయోగించి మీరు కొత్తగా సృష్టించిన ప్రాజెక్ట్ డైరెక్టరీకి నావిగేట్ చేయండి:



మీరు పిఎస్ 4 కన్సోల్‌లో పిఎస్ 3 గేమ్స్ ఆడగలరా 
 cd todo-list

ఈ ఆదేశంతో మీ ప్రాజెక్ట్‌ను స్థానికంగా అమలు చేయండి:

 npm start

ఆపై ప్రాజెక్ట్‌ను మీ బ్రౌజర్‌లో http://localhost:3000/లో వీక్షించండి.



మీ ప్రాజెక్ట్ యొక్క src ఫోల్డర్‌లో, మీకు అవసరం లేని కొన్ని ఫైల్‌లు ఉన్నాయి. ఈ ఫైల్‌లను తొలగించండి: App.css , App.test.js , logo.svg , reportWebVitals.js , setupTests.js .

రియాక్ట్ అప్లికేషన్ యొక్క src ఫోల్డర్‌లోని ఫైల్‌లు.

మీరు అందుబాటులో ఉన్న ఫైల్‌లలో దిగుమతి స్టేట్‌మెంట్‌ల కోసం వెతుకుతున్నారని మరియు తొలగించబడిన ఫైల్‌లకు ఏవైనా సూచనలను తీసివేయాలని నిర్ధారించుకోండి.

2. టోడోలిస్ట్ కాంపోనెంట్‌ను సృష్టించండి

ఇది చేయవలసిన జాబితా కోసం అవసరమైన అన్ని కోడ్‌లను మేము అమలు చేస్తాము. మీ src ఫోల్డర్‌లో “TodoList.js” పేరుతో ఫైల్‌ను సృష్టించండి. ఆపై ప్రతిదీ సరిగ్గా పని చేస్తుందో లేదో పరీక్షించడానికి, క్రింది కోడ్‌ను జోడించండి:

 import React from 'react'; 
 
const TodoList = () => { 
    return ( 
        <div> 
            <h2>Hello World </h2> 
        </div> 
    ); 
}; 
 
export default TodoList;  
 

మీ App.js ఫైల్‌ని తెరిచి, టోడోలిస్ట్ కాంపోనెంట్‌ను దిగుమతి చేయండి మరియు యాప్ కాంపోనెంట్‌లో దాన్ని రెండర్ చేయండి. ఇది ఇలా కనిపిస్తుంది:

 import React from 'react'; 
import './styles.css' 
import TodoList from './TodoList'; 
 
const App = () => { 
    return ( 
        <div> 
            <TodoList /> 
        </div> 
    ); 
}; 
 
export default App;

లోకల్ హోస్ట్:3000 నడుస్తున్న మీ స్థానిక బ్రౌజర్‌కి వెళ్లి, ధైర్యంగా వ్రాసిన “హలో వరల్డ్”ని చూడండి. అంతా మంచిదే? తదుపరి దశకు.

3. ఇన్‌పుట్ మరియు ఇన్‌పుట్ మార్పును నిర్వహించండి

మీరు ఇన్‌పుట్ బాక్స్‌లో టాస్క్‌ని టైప్ చేసినప్పుడు ఈవెంట్‌ను ట్రిగ్గర్ చేయడానికి ఈ దశ మిమ్మల్ని అనుమతిస్తుంది. మీ రియాక్ట్ ప్యాకేజీ నుండి యూజ్‌స్టేట్ హుక్‌ని దిగుమతి చేయండి. యూజ్‌స్టేట్ అనేది రియాక్ట్ హుక్, ఇది స్థితిని సమర్ధవంతంగా నిర్వహించడానికి మిమ్మల్ని అనుమతిస్తుంది .

జావాతో ఏదైనా ఎలా తెరవాలి 
 import React, { useState } from 'react';

ఖాళీ స్ట్రింగ్ యొక్క ప్రారంభ విలువతో “ఇన్‌పుట్‌టాస్క్” అనే స్టేట్ వేరియబుల్‌ని సృష్టించడానికి useState హుక్‌ని ఉపయోగించండి. అదనంగా, వినియోగదారు ఇన్‌పుట్ ఆధారంగా “ఇన్‌పుట్‌టాస్క్” విలువను నవీకరించడానికి “setInputTask” ఫంక్షన్‌ను కేటాయించండి.

 const [inputTask, setInputTask] = useState("");

ఈవెంట్ పరామితిని తీసుకొని “handleInputChange” అనే ఫంక్షన్‌ను సృష్టించండి. ఇది setInputTask ఫంక్షన్‌ని ఉపయోగించి ఇన్‌పుట్‌టాస్క్ స్థితిని నవీకరించాలి. Event.target.valueతో ఈవెంట్ లక్ష్యం యొక్క విలువను యాక్సెస్ చేయండి. ఇన్‌పుట్ ఫీల్డ్ విలువ మారినప్పుడల్లా ఇది రన్ అవుతుంది.

 const handleInputChange = (event) => { 
    setInputTask(event.target.value); 
};

కొన్ని JSX మూలకాలను తిరిగి ఇవ్వండి. మొదటిది 'నా టోడో-జాబితా' అని చదివే శీర్షిక, మీకు నచ్చిన ఏదైనా శీర్షికను మీరు నిర్ణయించుకోవచ్చు. మీ ఇన్‌పుట్ ఎలిమెంట్స్‌కి రెండు అట్రిబ్యూట్‌లను చేర్చండి. రకం = 'టెక్స్ట్' : ఇది మీ ఇన్‌పుట్ రకాన్ని టెక్స్ట్‌గా పేర్కొంటుంది, విలువ={inputTask} : ఇది ఇన్‌పుట్ ఫీల్డ్ విలువను ఇన్‌పుట్‌టాస్క్ స్టేట్ వేరియబుల్‌కి బంధిస్తుంది, ఇది ప్రస్తుత విలువను ప్రతిబింబిస్తుందని నిర్ధారిస్తుంది. onChange={handleInputChange} : ఇన్‌పుట్ ఫీల్డ్ విలువ మారినప్పుడు, ఇన్‌పుట్‌టాస్క్ స్థితిని నవీకరిస్తున్నప్పుడు ఇది హ్యాండిల్‌ఇన్‌పుట్ చేంజ్ ఫంక్షన్‌ని పిలుస్తుంది.

 <div className="Todo"> 
    <h1>My To-Do List</h1> 
    <div className="Top"> 
        <input className="input" type="text" value={inputTask} 
           onChange={handleInputChange} placeholder="Enter a task" />

కొనసాగుతూనే, జాబితాకు ఇన్‌పుట్ చేసిన పనిని జోడించే బటన్‌ను సృష్టించండి.

         <button className="btn">ADD</button> 
   </div> 
</div>

ఈ దశలో, మీ బ్రౌజర్ అవుట్‌పుట్ ఇలా కనిపిస్తుంది.

చేయవలసిన పనుల జాబితా ఖాళీ.

4. 'ADD' బటన్‌కు కార్యాచరణను జోడించండి

ఉపయోగించడానికి రాష్ట్రాన్ని ఉపయోగించండి ఖాళీ శ్రేణి యొక్క ప్రారంభ విలువతో 'జాబితా' పేరుతో స్టేట్ వేరియబుల్‌ని సృష్టించడానికి హుక్ చేయండి. 'సెట్‌లిస్ట్' వేరియబుల్ వినియోగదారు ఇన్‌పుట్ ఆధారంగా టాస్క్‌ల శ్రేణిని నిల్వ చేస్తుంది.

 const [list, setList] = useState([]);

కొత్త టాస్క్‌ను జోడించడానికి వినియోగదారు “జోడించు” బటన్‌ను క్లిక్ చేసినప్పుడు రన్ అయ్యే యాడ్‌టోడో ఫంక్షన్ హ్యాండిల్‌ను సృష్టించండి. ఇది టోడో పరామితిని తీసుకుంటుంది, ఇది వినియోగదారు నమోదు చేసిన కొత్త పనిని సూచిస్తుంది. ఆపై, Math.random(), మరియు ఇన్‌పుట్ టెక్స్ట్‌ను కలిగి ఉన్న టోడో ప్రాపర్టీని ఉపయోగించి రూపొందించబడిన ప్రత్యేకమైన idతో కొత్తTask అనే ఆబ్జెక్ట్‌ను సృష్టించండి.

కొనసాగుతోంది, జాబితాలో ఉన్న టాస్క్‌లతో కొత్త శ్రేణిని సృష్టించడానికి స్ప్రెడ్ ఆపరేటర్ […జాబితా]ని ఉపయోగించడం ద్వారా జాబితా స్థితిని నవీకరించండి. కొత్త టాస్క్‌ను శ్రేణి చివరకి చేర్చండి. ఇది మేము అసలు స్థితి శ్రేణిని మార్చలేదని నిర్ధారిస్తుంది. చివరగా, ఇన్‌పుట్‌టాస్క్ స్థితిని ఖాళీ స్ట్రింగ్‌కి రీసెట్ చేయండి, వినియోగదారు బటన్‌ను క్లిక్ చేసినప్పుడు ఇన్‌పుట్ ఫీల్డ్‌ను క్లియర్ చేస్తుంది.

 const handleAddTodo = (todo) => { 
    const newTask = { 
        id: Math.random(), 
        todo: todo 
   }; 
 
   setList([...list, newTask]); 
    setInputTask(''); 
};

చేర్చండి onClick 'ADD' వచనంతో బటన్ మూలకానికి ఆపాదించండి. క్లిక్ చేసినప్పుడు, ఇది handleAddTodo ఫంక్షన్‌ను ప్రేరేపిస్తుంది, ఇది జాబితా స్థితికి కొత్త పనిని జోడిస్తుంది

 <button onClick={() => handleAddTodo(inputTask)}>ADD</button>

ఈ దశలో, మీ బ్రౌజర్ అవుట్‌పుట్ అలాగే కనిపిస్తుంది కానీ మీరు టాస్క్‌ను ఇన్‌పుట్ చేసిన తర్వాత 'ADD' బటన్‌పై క్లిక్ చేస్తే, ఇన్‌పుట్ ఫీల్డ్ ఖాళీ అవుతుంది. అది సరిగ్గా పనిచేస్తుంటే, తదుపరి దశకు వెళ్లండి.

5. తొలగించు బటన్‌ను జోడించండి

వినియోగదారులు పొరపాటు చేసినా లేదా పనిని పూర్తి చేసినా వారి టాస్క్‌ని తొలగించడానికి ఇది చివరి దశ. నిర్దిష్ట పని కోసం వినియోగదారు 'తొలగించు' బటన్‌ను క్లిక్ చేసినప్పుడు ఈవెంట్ హ్యాండ్లర్‌గా పనిచేసే హ్యాండిల్‌డిలీట్ టోడో ఫంక్షన్‌ను సృష్టించండి. ఇది టాస్క్ యొక్క ఐడిని పారామీటర్‌గా తీసుకుంటుంది.

ఫంక్షన్ లోపల, సరిపోలే idతో టాస్క్‌ను మినహాయించే కొత్త శ్రేణి కొత్త జాబితాను సృష్టించడానికి జాబితా శ్రేణిలో ఫిల్టర్ పద్ధతిని ఉపయోగించండి. ఫిల్టర్ పద్ధతి జాబితా శ్రేణిలోని ప్రతి అంశం ద్వారా పునరావృతమవుతుంది మరియు ఇచ్చిన షరతును సంతృప్తిపరిచే అంశాలను మాత్రమే కలిగి ఉన్న కొత్త శ్రేణిని అందిస్తుంది. ఈ సందర్భంలో, ప్రతి టాస్క్ యొక్క ID పారామీటర్‌గా పాస్ చేసిన IDకి సమానంగా ఉందో లేదో తనిఖీ చేయండి. setList(newList)కి కాల్ చేయడం ద్వారా జాబితా స్థితిని నవీకరించండి, ఇది స్థితిని కొత్త ఫిల్టర్ చేసిన శ్రేణికి సెట్ చేస్తుంది, జాబితా నుండి సరిపోలే idతో టాస్క్‌ను సమర్థవంతంగా తీసివేస్తుంది.

 const handleDeleteTodo = (id) => { 
    const newList = list.filter((todo) =>  
        todo.id !== id 
   ); 
 
    setList(newList);  
};

జాబితా శ్రేణిలోని ప్రతి అంశానికి మళ్లించడానికి మరియు కొత్త శ్రేణిని తిరిగి ఇవ్వడానికి మ్యాప్ పద్ధతిని ఉపయోగించండి. ఆపై, జాబితా శ్రేణిలోని ప్రతి టోడో ఆబ్జెక్ట్ కోసం టాస్క్‌ను సూచించడానికి

  • మూలకాన్ని సృష్టించండి. రియాక్ట్‌లో మూలకాల జాబితాను రెండర్ చేస్తున్నప్పుడు కీ లక్షణాన్ని జోడించినట్లు నిర్ధారించుకోండి. ఇది ప్రతి జాబితా ఐటెమ్‌ను ప్రత్యేకంగా గుర్తించడంలో మరియు UI మారినప్పుడు సమర్థవంతంగా అప్‌డేట్ చేయడంలో ప్రతిస్పందించడంలో సహాయపడుతుంది. ఈ సందర్భంలో, ప్రత్యేకతను నిర్ధారించడానికి ప్రతి టోడో వస్తువు యొక్క idకి కీని సెట్ చేయండి.

    ప్రతి టోడో వస్తువు యొక్క టోడో ప్రాపర్టీని యాక్సెస్ చేయండి. చివరగా, క్లిక్ చేసినప్పుడు, సంబంధిత టాస్క్ యొక్క ఐడితో హ్యాండిల్ డిలీట్ టోడో ఫంక్షన్‌ను పారామీటర్‌గా ట్రిగ్గర్ చేసే బటన్‌ను సృష్టించండి, ఇది జాబితా నుండి టాస్క్‌ను తొలగించడానికి మమ్మల్ని అనుమతిస్తుంది.

     <ul> 
    { list.map((todo) => ( 
       <li className="task" key={todo.id}> 
            {todo.todo} 
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button> 
        </li> 
    ))} 
    </ul>

    మీ చివరి కోడ్ ఇలా ఉండాలి:

    అమ్మకానికి కుక్కలను ఎలా కనుగొనాలి 
     import React, { useState } from 'react'; 
     
    const TodoList = () => { 
        const [inputTask, setInputTask] = useState(''); 
        const [list, setList] = useState([]); 
     
        const handleAddTodo = () => { 
            const newTask = { 
                id: Math.random(), 
                todo: inputTask 
            }; 
     
           setList([...list, newTask]); 
            setInputTask(''); 
        }; 
     
       const handleDeleteTodo = (id) => { 
            const newList = list.filter((todo) => todo.id !== id); 
            setList(newList); 
        }; 
     
       const handleInputChange = (event) => { 
            setInputTask(event.target.value); 
        }; 
     
       return ( 
            <div className="Todo"> 
                <h1>My To-Do List</h1> 
     
                <div className="Top"> 
                    <input className="input" type="text" value={inputTask} 
                       onChange={handleInputChange} placeholder="Enter a task" /> 
     
                    <button className="btn" onClick={handleAddTodo}>ADD</button> 
                </div> 
     
               <ul> 
                    { list.map((todo) => ( 
                        <li className="task" key={todo.id}> 
                            {todo.todo} 
                            <button onClick={() => handleDeleteTodo(todo.id)}> 
                               Delete 
                           </button> 
                        </li> 
                    ))} 
                </ul> 
            </div> 
        ); 
    }; 
     
    export default TodoList;

    యాడ్ మరియు డిలీట్ బటన్‌లు రెండూ ఆశించిన విధంగా పని చేయడంతో మీ తుది అవుట్‌పుట్ ఇలా ఉంటుంది.

    చేయవలసిన పనుల జాబితా అనేక పనులను చూపుతుంది.

    అభినందనలు, మీరు టాస్క్‌లను జోడించే మరియు తొలగించే పనుల జాబితాను సృష్టించారు. మీరు స్టైలింగ్ మరియు మరిన్ని ఫంక్షనాలిటీలను జోడించడం ద్వారా మరింత ముందుకు వెళ్ళవచ్చు.

    రియాక్ట్ తెలుసుకోవడానికి రియల్ వరల్డ్ ప్రాజెక్ట్‌లను ఉపయోగించండి

    అభ్యాసం నేర్చుకోవడానికి సమర్థవంతమైన మార్గం. ఇది రియాక్ట్ కాన్సెప్ట్‌లు మరియు బెస్ట్ ప్రాక్టీస్‌లను హ్యాండ్-ఆన్ పద్ధతిలో వర్తింపజేయడానికి మిమ్మల్ని అనుమతిస్తుంది, ఫ్రేమ్‌వర్క్‌పై మీ అవగాహనను బలోపేతం చేస్తుంది. అక్కడ టన్నుల కొద్దీ ప్రాజెక్ట్‌లు ఉన్నాయి, మీరు సరైన వాటిని కనుగొనాలి.