[సంగీతాన్ని] నీల్ మెహతా: ఇక్కడ చేజారిపోతుంది. బాగా, ప్రతి ఒక్కరూ, వెబ్ స్వాగతం తో భవిష్యత్ అనువర్తనాలు రియాక్ట్. ఈ CS50 ఉంది. నా పేరు నీల్ ఉంది. నేను CS50 మరియు ఒక రెండవ ఏటి ఒక TA ఉన్నాను హార్వర్డ్ కాలేజ్ మరియు చాలా, చాలా వద్ద మక్కువ వెబ్ డెవలపర్. నేను చాలా ఉత్తేజకరమైన ఉన్నాను నేడు మీరు మాట్లాడటం, మీరు ఇక్కడ లేదా ఇంటి వద్ద ఉన్నామా చూడడం గురించి మళ్ళీ, ఇది రియాక్ట్ నేను వెబ్ అనువర్తనాల భవిష్యత్తులో చెప్పారు. కాబట్టి రియాక్ట్ ఒక వెబ్ ఫ్రేమ్వర్క్. నేను పరిష్కరించగలుగుతున్నాము మరియు చెప్పడం ఇక్కడ కొన్ని ప్రజలకు, ఒక ఫ్రేమ్ కేవలం ఉంది మీరు ఉపయోగించాల్సిన సాధనాల సమితి ఏర్పరచుకునే మరియు మీ వెబ్ అప్లికేషన్ నిర్మించడానికి. మరియు వెబ్ అనువర్తనాలు, మళ్ళీ, వెబ్సైట్లు ఫేస్బుక్ వంటి ఇంటరాక్టివ్ అని, Twitter.com, Instagram.com, సంసార. కాబట్టి Facebook వెబ్ ఫ్రేమ్వర్క్ ఫేస్బుక్లో ద్వారా అభివృద్ధి చేయబడింది రియాక్ట్ back-- ఒక జంట సంవత్సరాలు. ఇది నుంచి ఉపయోగించిన చెయ్యబడిన వారి మొబైల్ అనువర్తనాలు న ఫేస్బుక్ మరియు వెబ్ అనువర్తనం, Instagram. ఖాన్ అకాడమీ మరొక రియాక్ట్ ప్రముఖ ప్రారంభ అడాప్టర్. ఇది నిజంగా పొందడానికి అయ్యింది చాలా ప్రసిద్ధి. మీరు ఎప్పుడైనా కోణీయ లేదా వంటి విషయాలు ఉపయోగిస్తే వెన్నెముక, ఈ అదే కుటుంబం ఉంటుంది, అయితే తరువాత ఇప్పటివరకు ఉంది వారి ప్రజాదరణ ప్రీతిని. ఇది వేడి కొత్త విషయం. ఇది నిజంగా, నిజంగా పెద్ద వార్తలు. కాబట్టి రియాక్ట్ గా కేవలం మంచి భవనం ఇంటర్ఫేస్లు కోసం వెబ్ ఫ్రేమ్. ఇది వెబ్ ఇంటర్ఫేస్లను నిర్మాణానికి బావుంటుంది. ఒక విషయం కూడా ఉంది అని అలస్కా రియాక్ట్ ఇది మీరు ఇంటర్ఫేస్లు నిర్మించడానికి అనుమతిస్తుంది Android మరియు iOS కోసం భవిష్యత్తులో మరియు బహుశా ఇతర వేదికల కేవలం ఒకే జావాస్క్రిప్ట్ కోడ్ ఉపయోగించి. మీరు ఖచ్చితమైన వాడవచ్చు జావాస్క్రిప్ట్ కోడ్, వెబ్సైట్లు రెండర్ Android అనువర్తనాలు మరియు iOS అనువర్తనాలు అవరోధం. ఇది చాలా, చాలా ఉత్తేజకరమైన సమయం. ఇది ఒక నిజంగా చల్లని అవకాశం. ఇది నిజంగా ఒక యూనివర్సల్ వెబ్ వార్తలు ఇంటర్ఫేస్ అభివృద్ధి సాధనం, కాబట్టి అది చాలా, చాలా వార్తలు ముఖ్యమైన విషయం తెలుసు. మరియు, నేను ప్రజలు చెప్పడం జరిగినది వంటి ముందు, ఈ, నేను అనుకుంటున్నాను, మేము ఎలా మార్చడానికి వెళ్తున్నారు ఎప్పటికీ వెబ్ అనువర్తనాలను రూపొందించడానికి. కనుక ఇది బహుశా ఒక బిట్ అతిశయోక్తి వార్తలు, కానీ నేను తెలిసిన ఒక అందమైన మంచి విషయం భావిస్తున్నాను. OK, కాబట్టి రియాక్ట్ ఏమిటి? రియాక్ట్ ఒక ఫ్రేమ్ మీరు చేయవచ్చు ఉంది ఇంటర్ఫేస్లు నిర్మాణానికి ఉపయోగించండి. ఒక ఇంటర్ఫేస్, మళ్ళీ, కుడి ఒక వెబ్ పేజీ? కాబట్టి ఇక్కడ Instagram.com వార్తలు, ఉపయోగాలు రియాక్ట్. నిర్మించబడింది రియాక్ట్ భాగాలు ఆలోచన. ఒక భాగమైన ఒక HTML ఉంది స్టెరాయిడ్స్ న మూలకం, కాబట్టి ఒక HTML మూలకం ఒక బటన్ వంటి ఉంది. ఇది ఒక పేరా ఉంది. ఇది కుడి, ఒక శీర్షిక? మరియు Instagram ఈ ఉపయోగించవచ్చు, కానీ అది విల్ కూడా రియాక్ట్ యొక్క భాగాలు ఉపయోగిస్తుంది. భాగాలు రియాక్ట్ souped అప్ HTML మూలకాలు వారి స్వంత ప్రవర్తన కలిగి వారిని లోపల ఉన్న. సో, ఒక ఉదాహరణగా, మేము కలిగి కాలేదు ఒక సమయంలో మూలకం, ఒక సమయం భాగం, ఇది వంటి ఉంటాయి సమయం స్టాంపు, మీకు తెలిసిన, ఒక ప్రొఫైల్ భాగం ఇది ప్రొఫైల్ చిత్రాన్ని కలిగి ఉంటుంది మరియు వ్యక్తి యొక్క పేరు. ఇది ఒక వంటి కౌంటర్ కలిగిన వివిధ ఇష్టపడ్డారు సంఖ్య వంటి లెక్కలోనికి చేయవచ్చు, మీరు దానిపై క్లిక్ ఉంటే, అది చేస్తాము ఇష్టపడ్డారు సంఖ్య పెంచడానికి. ఒక భాగమైన కేవలం ఉంది HTML కోడ్ యొక్క బంచ్ ఆ కొన్ని కార్యాచరణను కలిగి అది లోపలి చుట్టి. కాబట్టి అది ఒక HTML మూలకం స్టెరాయిడ్స్ న, నేను ముందు చెప్పారు వంటి. మీరు ఈ భాగాలు పడుతుంది, మరియు మీరు వాటిని కలిసి ఉంచవచ్చు కొత్త భాగాలు చేయడానికి ఈ సందర్భంలో, ఒక పోస్ట్ భాగం, ఇది అన్ని ఈ విషయాలను కలిగి. ఇది ప్రొఫైల్ సమయం కలిగి ఉంటుంది LikeCounter, బహుశా వ్యాఖ్య మరియు ఉండవచ్చు చిత్రం కూడా. అందువలన వెబ్ అనువర్తనాలు కేవలం తీసుకొని నిర్మించబడ్డాయి భాగాలు మరియు వాటిని సమిష్టిగా ఒకచోట. ఒక Instagram ఫీడ్ కంటే ఇంకేమీ పోస్ట్ ఒక సమూహం మరొక తరువాత ఒకటి, ప్రతి పోస్ట్ సమయం వంటి కలిగి అందువలన న, LikeCounter ప్రొఫైల్, మరియు. ఇది రకమైన ఒక ఇల్లు కట్టడం వంటిది. మీరు నిర్మించడానికి లేదు పై నుండి క్రిందికి హౌస్. మీరు భాగాలకు పడుతుంది బాత్రూమ్ వంటి పడుతుంది. మీరు వాటిని కర్ర bedroom-- పడుతుంది కలిసి, మరియు మీరు ఒక కొత్త భాగం కలిగి. మీరు ఇంటి ఒక కొత్త ఉండగలుగుతారు. సో అన్ని చుట్టూ నిర్మించబడింది రియాక్ట్ భాగాలు ఈ ఆలోచన బద్ధంగా అని, ఇంటరాక్టివ్ ఉన్నాయి. ఏమి మీరు కేవలం చెప్పటానికి వంటి ప్రొఫైల్, మరియు అది చూపుతుంది. వారు కంపోసబుల్ ఉన్నాయి. మీరు ఒక సమయంలో మరియు ప్రొఫైల్ పట్టవచ్చు, చాలు వాటిని కలిసి, ఏదో మెరుగ్గా. మరియు వారు కనుక, పునర్వినియోగ ఉన్నాము మీరు ఒక పోస్ట్ కోసం సోర్స్ కోడ్ కలిగి, మీరు ఎక్కడైనా పొందుపరచడానికి కాలేదు. మీరు ఒక Instagram పొందుపరచవచ్చు మీ సొంత వెబ్ సైట్ లో విషయం. మీరు Facebook లో పొందుపరచవచ్చు, ఉదాహరణకు, కాలం ఇది ఉపయోగిస్తుంది అలాగే రియాక్ట్. కాబట్టి భాగాలు నిజంగా, నిజంగా వెబ్ శక్తివంతమైన బిల్డింగ్ బ్లాక్స్ ఆ ఎక్కడైనా ఉపయోగించవచ్చు మరియు పెట్టవచ్చును కలిసి కొత్త బిల్డింగ్ బ్లాక్స్ చేయడానికి. ఆ చాలా, చాలా వార్తలు ఉన్నత స్థాయి అవగాహన. సో, మళ్ళీ, మీరు కలిగి ఉంటే ఏ సమయంలో ఏ ప్రశ్నలు రియాక్టర్ యొక్క తత్వ గురించి కోడింగ్, నాకు ఆపడానికి, మరియు నాకు తెలపండి. OK, కాబట్టి అది ఎందుకంటే చల్లని స్పందించలేదు ఉంది చూడటం ఒక భిన్నమైన మార్గం ఉంది మీరు వెబ్ అనువర్తనాలను రూపొందించడానికి ఎలా. మీరు బహుశా MVC, విన్న చేసిన మోడల్ మీరు CS50 లేదా సంసార నియంత్రించడానికి మీరు ఉపయోగించడానికి ఛేదించి తరగతులు ఇతర. మరియు అత్యంత చట్రాలు ఉంటాయి MVC ఆలోచన చుట్టూ నిర్మించబడింది. రియాక్ట్ కాదు. ఆలోచన చుట్టూ నిర్మించబడింది రియాక్ట్ ఏకదిశాత్మక డేటా ప్రవాహం ఇక్కడ ఈ చార్ట్ లేదా గ్రాఫిక్ చూసినట్లుగా. సాధారణంగా, మీరు ఒక డేటా మూలం కలిగి. మరియు డేటా మూలం నిర్ణయించే ఎలా కొన్ని భాగాలు బయటకు వేయడానికి. మరియు భాగాలు రెడీ అప్పుడు, వారు మారినప్పుడు, వారు ఇత్సెల్ఫ్ డేటా మూలం మార్చడానికి. Instagram ఉపయోగించడానికి ఉదాహరణకు, మీరు కలిగి ఉండవచ్చు వంటి పోస్ట్ వస్తువుల జాబితాను ఒక డేటాబేస్ లేదా ఏదో లో. డేటా. ఆపై మా పోస్ట్ భాగాలు ఆ డేటా పడుతుంది, మరియు రెండర్ ఆ డేటాను ఉపయోగించడానికి తెరపై ఒక విషయం. ఆ ఏముంది బాణం , భాగం డేటా నుండి ఆపై అదే డేటా ఉపయోగిస్తారు భాగాలు కొంత అవరోధం. Facebook Messenger లో, రియాక్ట్ ఉంది, ఉదాహరణకి, మీరు జాబితా కలిగి ఉండవచ్చు మీ డేటా మూలంగా సందేశాలను. మరియు ఆ కలిగేటట్లుగా సందేశాలను మాత్రమే జాబితా కానీ కూడా స్నేహితుల జాబితా మీరు. మీరు చదవని గణన కలిగి. బహుశా కూడా Facebook విషయం రెండర్ ఆ Facebook.com దిగువన ఉంది. అదే డేటా ఒక నిజం ఒకే మూలం మరియు ఆ చాలా కారణమవుతుంది భాగాలు తెలపబడ్డాయి కు. మరియు చేసినప్పుడు ఆ ఒకటి భాగాలు మార్చబడింది, ఇది తిరిగి వెళ్తాడు మరియు డేటా మూలం మారుస్తుంది. మీరు కుడి, ఒక సందేశాన్ని పంపాలనుకుంటున్నారా? ఆ డేటా మూలం మారుస్తుంది. మీరు మీ సందేశాలను చదవండి, కాబట్టి మీరు 0 చదవని సెట్. ఆ డేటా మూలం మారుస్తుంది. మరియు ఒక యొక్క ఈ యొక్క అన్ని గమనించవచ్చు బాణం అదే డేటా తిరిగి వెళ్ళడం సోర్స్, మీరు తెలుసు కాబట్టి, ఒక నిర్దిష్ట డేటా సమితి ఇచ్చిన, మీరు సరిగ్గా ఏమి పేజీ లాగా అన్నారు. ఇది నిర్దేశించతగిన వార్తలు. మీరు ఇచ్చిన కొన్ని డేటా తెలుసు ఏమి పేజీ లాగా అన్నారు. మీరు అది జరగబోతోంది ఎలా అంచనా చేయవచ్చు ప్రవర్తించే ఎలా విషయాలు వెళ్తున్నారు వారు కూర్చు చేసినప్పుడు పని. నేను ఒక మిలియన్ భాగాలు కలిగి ఉంటే ఇక్కడ, అది సరైన, అదే ప్రవర్తిస్తాయి ఉంటుంది? మీరు ఏ ఉండదనే విచిత్రమైన అనుసంధానాలను. వన్ డేటా ఒక మిలియన్ భాగాలు అన్వయించ. ఒక మిలియన్ భాగాలు అనుకొనుట తిరిగి వెళ్ళి డేటా సవరించడానికి. కాబట్టి ఈ మంచిపని ఉంది. మేము కంపోసబుల్ నిర్మించడం చేస్తున్నారు సులభంగా స్కేలబుల్ వెబ్ అనువర్తనాలు. మీరు ఒక డేటా మూలం కలిగి, నిజం మూలం. మీ భాగాలు చెబుతుంది ఎలా పేజీని వేయడానికి, మరియు భాగాలు రెడీ పరస్పర నిర్వహించడానికి. మరియు వారు మార్చడానికి కావాలా విషయాలు, తిరిగి వెళ్ళి మరియు డేటా మూలం మార్చడానికి చెప్పండి. అర్ధవంతం? కాబట్టి రియాక్ట్ అన్ని అవగాహన గురించి ఎలా ఒక భాగం నిర్మించడానికి మరియు మీ భాగం చేయడానికి ఎలా బయట ప్రపంచంతో సంకర్షణ. భాగం పనిచేస్తాయో మేకింగ్ బయటి ప్రపంచంతో మరొక సాంకేతిక పరిజ్ఞానాన్ని ఉపయోగిస్తుంది అని ఫ్లక్స్, ఇది అని ఒక ప్రణాళిక రియాక్ట్ పైన జోడిస్తారు. మేము గురించి మాట్లాడటానికి వెళ్ళడం లేదు చేస్తున్నాం. మేము ఇచ్చిన గురించి మరింత మాట్లాడటానికి వెళుతున్న డేటా, ఎలా మీరు ఒక భాగం చేస్తుంది? మరియు మీరు ఎందుకంటే నిజంగా చల్లని ఉంది రియాక్ట్ మీరు ఏ తిరిగి ముగింపు తో ఉపయోగించవచ్చు. మీరు పైథాన్ తిరిగి ముగింపు వంటి ఉంటే, మీ పైథాన్ కొన్ని డేటా ఉమ్మి చేయవచ్చు ఉంటే, ఇది చేస్తుంది స్పందించలేదు. మీరు ఏ JS ప్రతిఫలాన్ని ఉంటే దత్తాంశం యొక్క రియాక్ట్ ఇది చూపుతుంది. రూబీ తో పట్టాలు డేటా రియాక్ట్ ఇది చూపుతుంది. కాబట్టి రియాక్ట్ ప్రాథమికంగా ఒక వెబ్ భాగాలతో ఒక ఫ్రంట్ ఎండ్ view-- ఏ డేటా మూలం కోసం. అందువలన డేటా మూలం నుండి వెళుతున్న భాగాలు స్పందించలేదు అందంగా సులభం. వేరొక మార్గంలో వెళ్ళటం కొద్దిగా కష్టం. నేను ముందు పేర్కొన్న ఆ ఫ్లక్స్ ఉపయోగిస్తుంది. మేము ఆ లోకి అందదు. మేము మరింత దృష్టి చేస్తాము డేటా టు భాగం వైపు. మీరు చేయవచ్చు ఈ విధంగా చల్లని, ఆహ్లాదకరమైన వెబ్ అనువర్తనాలు. ఇది బయట ప్రపంచానికి ప్రభావితం చేయదు కానీ, ఇప్పుడు మరో కథ. సరే, కనుక మీరు ఇక్కడ ఉన్నారు నా గత సెమినార్ మీరు కోసం కోడ్ యొక్క అన్ని తెలుసు ఉంటాం నేటి చర్చ ఈ URL వద్ద అవతరిస్తుంది ఇక్కడ, సారీ, ఇక్కడ ఈ URL. మరియు ప్రధానంగా మేము వెళుతున్నాం బహుశా నాలుగు దశలు, ఐదు ద్వారా, బహుశా ఐదు. మేము నాలుగు దశలను తరలించడానికి చేస్తాము ఒక నమూనా నిర్మాణ అనువర్తనం రియాక్ట్. కాబట్టి అన్ని సోర్స్ కోడ్ మార్గం ప్రతి అడుగు కనుక, ఇక్కడే అవతరిస్తుంది మీరు ఇంటి వద్ద పాటు అనుసరిస్తున్నారు ఈ కోడ్ పరిశీలనగా సంకోచించకండి. మీరు ఇక్కడ పాటు అనుసరిస్తున్నారు ఉంటే, మేము తెరపై దానిని చూపిస్తున్న అవుతారు కాబట్టి దాని గురించి ఆందోళన లేదు. కానీ మీరు ఇంటి వద్ద అయితే, అనుభూతి ఈ వెబ్సైట్ను సందర్శించండి ఉచితం. మరియు, అవును, మీరు పొందుటకు ఉండాలి మీరు ఎప్పుడైనా ఇక్కడ అవసరం ఇష్టం అన్ని కోడ్. కనుక ఇది ఒక మంచి మోసగాడు షీట్ అలాగే వార్తలు మీ భవిష్య సాహసాలను రియాక్ట్. కూల్ అలా అయితే ఇక్కడ ఎవరు అందరికీ, మరియు మీరు ఇంటి వద్ద ఉన్నప్పుడు కూడా ఉంటే, is.gd/cs50react, ఈ వెబ్సైట్ పుల్ అప్, ఏ మూలధన, ఏ తక్కువగా, ఏ ఏమీ. మీరు కనిపించే ఒక పేజీ చూస్తారు ఈ వంటి కొద్దిగా. ఈ CodePen అనే విషయం. CodePen ఒక సహకార ఉంది కోడింగ్ వాతావరణంలో ఇది నేను ఇక్కడ కోడ్ వ్రాయడానికి మరియు అది స్వయంచాలకంగా మీరు పంపబడుతుంది చేస్తాము. మరియు ఈ విధంగా, నేను కోడ్ వ్రాయగలవు. నేను ఇక్కడ కోడ్ అమలు చెయ్యవచ్చు. ఉదాహరణకు కోసం మరియు ఇది చూడటానికి reloads-- ఉంటే, నేను పేజీలో జావాస్క్రిప్ట్ కోడ్ నడుస్తున్న నేను ఇక్కడే, మరియు అది చేస్తాము స్వయంచాలకంగా వెబ్ పేజీ రెండర్ ఈ JavaScript కోడ్ తో. కాబట్టి ఈ ఒక మార్గం మాకు కోడ్ ప్రయత్నించవచ్చు కోసం ఉపయోగించడానికి చేయకుండా నిజంగా శీఘ్ర మా ID లేదా మా స్థానిక యంత్రం ఉపయోగించడానికి లేదా సంసార. ఇది మీరు mockup కోసం ఒక చాలా త్వరగా మార్గం మరియు కోడ్ వివిధ రకాల పరీక్షించడానికి. నేను తీసుకుంటుందని వెళుతున్న ఉదాహరణకు కోడ్, ఇక్కడ ఉంచారు. మేము అది ద్వారా కృషి చూడాలని. మరియు మీరు ఇంటి వద్ద అయితే, మీరు అలాగే ఈ పుల్ అప్ చేయవచ్చు. మరియు నేను ఇప్పటికే ఇన్స్టాల్ చేసిన ఇక్కడ రియాక్ట్, కాబట్టి మీరు చెయ్యవచ్చు ఇక్కడ మీ స్వంత కోడ్ వ్రాయడానికి, మరియు మీ సొంత వేదికగా ప్రయత్నించండి. అవును, అందరికీ ఉంటే ఇక్కడ ఈ లింక్ అప్ తెరవండి. నాకు ఒక బ్రొటనవేళ్లు ఇవ్వండి మీరు తెరిచిన ఒకసారి. కూల్, చల్లని చల్లని. ఏమీ, ఇప్పుడు ఇక్కడ ఎవరూ లేరు కానీ మేము త్వరలో ఆ మారుతుంది. OK, కాబట్టి ఒక జావాస్క్రిప్ట్ రియాక్ట్ లైబ్రరీ, మరియు వంటి, , జావాస్క్రిప్ట్ జ్ఞానం అవసరం వెబ్ ప్రోగ్రామింగ్ భాష. మరియు అది ఇతర విషయాలు ఉపయోగిస్తారు చేయబడిన ఇప్పుడు చాలా కానీ ప్రధానంగా వెబ్ అభివృద్ధి భాష, మీరు తెలిసి ఉంటే కాబట్టి ఆ JSforCats.com అనే సైట్ చదవండి. ఇది అద్భుతమైన వార్తలు. మీరు JavaScript తెలుసుకోవడానికి చేయవచ్చు అరగంట లో. ఇది అద్భుతమైన ఉంది. కనుక ఇది రీడ్ ఇస్తాయి. మేము కూడా ఇక్కడ ఎందుకంటే HTML చాలా ఉంది మేము కోర్సు యొక్క వెబ్ పేజీలను రూపకల్పన చేస్తున్నారు. మీరు తెలిసి ఉన్నారు చేస్తే HTML, HTMLdog.com తనిఖీ. నేను రియాక్ట్ ఒక నేర్చుకోవడం అనుకుంటున్నాను మిలియన్ సార్లు సులభంగా ఇప్పటికే మీరు ఉంటే బిల్డింగ్ బ్లాక్స్ తెలుసు. మీరు భాగాలు కలిగి ఉంటే, అంతే సులభంగా ఒక పెద్ద భాగం చేయడానికి. మీరు కోసం భాషను రియాక్ట్ వార్తలు. అందుకే ఇవ్వాలని ఈ విషయాలు ఒక వెలువడింది. ఈ వీడియోకు విరామము ఇవ్వండి. మీరు ఉంటే అది ఒక రీడ్ ఇవ్వండి ఇంట్లో మీరు కాకపోతే HTML లేదా జావాస్క్రిప్ట్ తెలిసిన OK, కాబట్టి మేము చేయబోతున్నామని ఏమి అలా మేము చూడాలని ఉంది రియాక్ట్ ఉపయోగించి చాలా ప్రాథమిక ఫ్లాష్కార్డ్ అనువర్తనం. మేము ఒక ఫ్లాష్కార్డ్ చూడాలని. మీరు ముందుకు వెనుకకు కార్డు ఫ్లిప్. మరియు మేము కూడా ఒక జాబితా ఉంటుంది మేము కలిగి అన్ని కార్డులు, మరియు మేము ఫీలింగ్ చేస్తుంటే ప్రతిష్టాత్మక, మేము కావచ్చు మధ్య మారడానికి క్లిక్ చేయడం ద్వారా వాటికి కార్లు. కానీ ఈ మీ ఒట్టి యొక్క, ఎముకలు, చాలా సాధారణ అనువర్తనం రియాక్ట్. కాబట్టి ఈ వాస్తవానికి అమలు చిన్నవిషయం కాదు, కానీ మేము మీరు లేకపోతే, ఆ చూపించు చూడాలని ఈ, అది విస్తరించడానికి చాలా, చాలా సులభం ఇతర వ్యక్తులు మీకు సహాయం ఉంటే. కాబట్టి మేము నాలుగు దశలను ద్వారా వెళ్ళడానికి వెళుతున్న మొదటి నుంచి మొదలు ఈ నిర్మించడానికి. సరే, అందువలన నాలుగు దశలు, మేము చేస్తాము మొదటి అడుగు తో మొదలు. మొదటి అడుగు అవతరిస్తుంది మీ మొదటి భాగం నిర్మిస్తున్నారు. నేను ముందు చెప్పారు వంటి, ఒక భాగం లో రియాక్ట్ స్టెరాయిడ్స్ న కేవలం ఒక HTML మూలకం ఉంది. ఇది HTML నిర్దేశిస్తుంది మరియు కొన్ని ప్రవర్తన, మరియు అది ఎలా ప్రజలు తెలుపుతుంది అది ఎలా వ్యవహరించవచ్చు ఇది అంతర్గత రాష్ట్ర వుంటుంది. ఒక బటన్ ఎన్ని వంటి తెలుస్తుంది వంటి సార్లు ఉదాహరణకు రాణించింది చెయ్యబడిన, మరియు అది కూడా ఔట్ వేయడానికి ఎలా తెలుస్తుంది. కాబట్టి యొక్క ముందుకు వెళ్లి నిర్మించడానికి వీలు మా జావాస్క్రిప్ట్ ఉపయోగించి మొదటి భాగం. వాక్యనిర్మాణం అసహజ కనిపిస్తోంది కనుక, అది రకమైన ఎందుకంటే ఆ. సో, మళ్ళీ, మేము వెళుతున్న అనే వేరియబుల్ చేయడానికి అనువర్తనం కీవర్డ్ వీలు ఉపయోగించి, ఇది వేరియబుల్ చేస్తుంది, App సమాన React.createClass తెలియజేయండి. రియాక్ట్ ఒక గ్రంథాలయం మరియు ఉంది ది క్లాస్ ఫంక్షన్ సృష్టించడానికి. మరియు ఈ ఫంక్షన్ కోడ్ యొక్క బిట్ మీరు ఒక కొత్త సృష్టించడానికి ఉపయోగించవచ్చు భాగం రియాక్ట్ రకం. కాబట్టి React.createClass ఒక భాగం చేస్తుంది, మరియు ఈ భాగం stuff చేయడానికి చెయ్యలేరు. దీన్ని చెయ్యవచ్చు ప్రధాన విషయం రెండర్ ఏదో ఒక ఫంక్షన్ రెండర్. మళ్ళీ, ఈ ఇండెక్స్ స్పష్టమైన కాదు ఉంటే మీరు నేను మీరు పిల్లులు కోసం JS కొనసాగుతాయి సిఫార్సు మరియు దాన్ని తనిఖీ. బాగా తగినంత జూమ్? కూల్. కాబట్టి ప్రతి భాగం అవసరాలకు ఒక రెండర్ ఫంక్షన్ కలిగి. రెండర్ ఫంక్షన్, చెప్పారు నేను తెరపై ఏమి ప్రింట్ చెయ్యాలి? కానీ భాగం అది లేనప్పుడు పనికిరాని కాబట్టి, తెరపై ముద్రించడానికి ఏమి తెలుసు మీరు ఒక రెండర్ చర్య అవసరం. , మీరు విషయం రెండర్ కాబట్టి కొన్ని HTML తిరిగి అవసరం. మరియు చల్లని ఏమిటి అని అనే విషయము ఒక పొడిగింపు ఇది JSX, వాడుతున్నట్లు జావాస్క్రిప్ట్ స్పందించలేదు. ఇది మీరు లోపల HTML రాయడానికి వీలు మీ JavaScript, ఏ ఉన్నప్పుడు అసహజ ధ్వనులు మీరు మొదటి దాని గురించి ఆలోచించటం, కానీ దాన్ని తరువాత కోణంలో చాలా చేస్తుంది. కాబట్టి మేము దీన్ని చెయ్యవచ్చు. మీరు HTML గురించి తెలిసి ఉంటే, నాకు తెలుసు మేము ఒక సాధారణ ప్రయోజనం తో DIV విషయం కోసం కంటైనర్. మేము లోపల ఒక div తిరిగి, మరియు చేయవచ్చు ఈ DIV, మేము విషయాలను ఉంచవచ్చు. కాబట్టి యొక్క మేము కేవలం రెండర్ అనుకుందాం ఇప్పుడు ఒక నేరుగా అప్ ఫ్లాష్కార్డ్. ఫ్లాష్కార్డ్, నేను చెబుతా ఒక ప్రశ్న మరియు సమాధానాన్ని ఉంటుంది. కాబట్టి ఈ DIV లోపల, లెట్స్ ఒక పేరా ముద్రించాలా ఆ ఏమిటి ప్రశ్న చెప్పారు జీవితం అంతిమ సమాధానం, విశ్వం? ఆపై సమాధానం 42, కోర్సు యొక్క, అవతరిస్తుంది. ఆ అన్ని వద్ద బాగా రాలేదు. అవును, కాబట్టి ప్రాథమికంగా మీరు నిజంగా చెయ్యవచ్చు మీ జావాస్క్రిప్ట్ లోపల HTML వ్రాయండి. మరియు ఈ అవతరిస్తుంది స్క్రీన్ లోకి ముద్రించిన. కనుక ఇది ప్రయత్నించండి తెలియజేయండి. కాబట్టి మేము మా భాగమవుతుంటుంది. మేము ఉంచాలి రియాక్ట్ చెప్పడం అవసరం తెరపై భాగం కాబట్టి React.render, కాబట్టి గమనించవచ్చు మేము ఇతర మూలకం లాంటి అప్లికేషన్ చికిత్స. అది ఒక HTML మూలకం గా మేము అది వ్రాయండి. బదులుగా img ఇష్టం చెప్పడం వంటి పేరా చిత్రం లేదా p కోసం, App ఉంది, కాబట్టి మీరు App రాయడానికి ఒక HTML మూలకం వంటి చికిత్స. నేను ముందు చెప్పారు వంటి, అది స్టెరాయిడ్స్ న ఒక మూలకం. కాబట్టి మీరు App నటించు, మరియు మీరు అది చాలు ఒక స్థానాన్ని ఇవ్వాలని. మరియు ఈ మీరు ఎలా చెయ్యాలో ఉంది అది చాలు చెప్పాలి. నేను ఒక సాధారణ div సృష్టించారు పేజీ యొక్క ఒక ID పిలిచింది పేజీ, మరియు ఆ పేరు ఆ మూలకం వెళ్ళడానికి జరగబోతోంది. మరియు మేము HTML తో అమలు కావడం లేదు. ప్రధానంగా ఈ పొందగలిగిన ఈ పేజీ మూలకం యొక్క లోపల ఉంచాలి మేము తెరపై కలిగి. కాబట్టి ఈ కోడ్ అమలు, మరియు అది ఈ తొలగిస్తారు తెరపై విషయం, ఇక్కడ మేము ఉన్నాయి. మేము మా మొదటి రియాక్ట్ భాగం చేశారు. కాబట్టి ఒక పునశ్చరణ, మేము తప్పులతో చేసిన భాగం యొక్క ఒక కొత్త రకం, కుడి? ఆ ఏమి React.createClass వార్తలు. మరియు ఆ భాగం లో, మేము ఏమి చెయ్యాలి చెప్పారు. ఎప్పుడు ఈ భాగం ఉంది స్క్రీన్ మీద ముద్రించిన, ఇది div తో ముద్రిస్తుంది అది లోపలి రెండు పేరాలు. మరియు మేము ఏమి, మేము ఒక కొత్త అనువర్తనం చేసిన కోణ బ్రాకెట్ అనువర్తనం సంజ్ఞామానం ఉపయోగించి. మేము అది చాలు దానిని చెప్పారు పేజీ మూలకం లోపల. కాబట్టి నేను ఏమి, అది సృష్టించిన ఆ టెంప్లేట్ నుండి ఒక అప్లికేషన్. ఆపై నేను రెండర్ చెప్పారు. కనుక ఇది అన్నారు సరే, అనువర్తనం, నేను ఏమి ముద్రించాలా ఉండాలి? అప్లికేషన్, ఒక div ముద్రించాలా వెళ్ళండి చెప్పారు అది లోపలి రెండు పేరాలు తో. మరియు voila, మా div ఉంది అది లోపలి రెండు పేరాలు. ఇప్పటివరకు అర్ధవంతం? సో, మళ్ళీ, మొత్తానికి సవాలు రియాక్ట్ కేవలం భాగాలు పొందడం ఎలాగో తెలుసుకోవడం. చేయడానికి ఎలా విభాగాలు కలిసి పని. ఇప్పుడు మేము మా మొదటి చేసిన భాగం యొక్క తిరిగి వెళ్ళి తెలపండి మరియు భాగాలు అనుకూలీకరణ చేయడానికి. సో మీరు HTML లో ఎలా తెలుసు మీరు మీ బటన్లు తరగతులు ఇవ్వాలని చేయవచ్చు? మీరు మీ వ్యాఖ్యాతలు href ఇస్తుంది. మీరు కుడి, మీ ఇన్పుట్లను ఒక రకం ఇవ్వగలిగిన? మీరు మరింత అనుకూల ఇవ్వగలిగిన మీ అంశాల అన్ని లక్షణాలు అది మరింత ఆసక్తికరంగా చేయడానికి. మరియు మేము నిజంగా చేయవచ్చు ఖచ్చితమైన అదే విషయం. కాబట్టి యొక్క మేము అనుకుందాం మా అనువర్తనం ఏ కార్డు రెండర్ వెళ్ళడానికి. ప్రస్తుతం మేము కేవలం ఒక hardcoded కార్డు అన్వయించ. మేము కేవలం ఒక ఉంది తెలుసు కార్డు దీన్ని చెయ్యవచ్చు, కాబట్టి మేము ఉన్నాము ప్రయత్నించండి మరియు కాబట్టి ఇప్పుడు ఈ మార్పు మాత్రం మేము దానిని కొన్ని కార్డు ఇస్తుంది ఆ. ఇది కార్డు ప్రింట్ చేస్తాము. మీరు ప్రయత్నించండి మరియు చేయడానికి తప్పక మీ భాగాలు చాలా సాధారణ ప్రయోజనం. కాబట్టి ఈ విధంగా నేను ఇమెయిల్ కాలేదు ఈ నా స్నేహితుడు మరియు వంటి, మీరు చర్యలన్నీ ఫ్లాష్కార్డ్, కేవలం ఇక్కడ ఇది ఫీడ్, మరియు దానికదే ద్వారా దీన్ని చేస్తాము. మీరు ఇతర ఉంచవచ్చు మీ స్వంత అనువర్తనం విషయాలు. కానీ మొదటి, యొక్క ఈ తొలగించేందుకు వీలు రెండు భాగాలుగా, కానీ మేము కార్డు వేరు అనుకుంటే అసలు అనువర్తనం భాగం నుండి ప్రింటింగ్ భాగం. కాబట్టి మేము ఏమి మేము ఉంది App నుండి మార్చవచ్చు CardView, కేవలం ఒక అనువర్తనం కోసం కొత్త పేరు, మరియు మేము ఒక కొత్త తయారు చేయవచ్చు భాగం, App అని పాత App తో పడకండి. మేము createClass పొందారు, మరియు HTML లో వంటి, మీరు గూడు భాగాలు రియాక్ట్ చేయవచ్చు ప్రతి ఇతర లోపల. ఈ రెండర్ ఫంక్షన్ కాబట్టి ఫంక్షన్ తిరిగి CardView, మరియు ఈ ఖచ్చితమైన విషయం. అదే విషయం ఎందుకు చూడండి? బదులుగా కేవలం అనువర్తనం రెండరింగ్ ఆ , అది లోపలి div మరియు జత ఉంది అనువర్తనం CardView అన్వయిస్తుంది మరియు CardView div మరియు పేరా చూపుతుంది. కాబట్టి ఈ మా మొదటి ఉదాహరణ ఒకదానికొకటి లోపల గూడు అంశాలు. ఆ సమంజసం లేదు? సో, మళ్ళీ, మేము ఒక CardView మూలకం ఉన్నాయి. మేము అనువర్తనం అంశాలను కలిగి ఇది కంటే పెద్ద వార్తలు. OK, కాబట్టి మేము మీరు మా CardView-- మీరు ఉంటే ఒక మంచి CardView ఒక నిర్దిష్ట కార్డు ఇవ్వాలని, అది కుడి, మీరు ప్రింట్ చేస్తాము? కాబట్టి మొదటి, మేము ఒక కార్డు చేయడానికి అవసరం, కాబట్టి యొక్క ఒక కార్డు వస్తువు తయారు చేద్దాము. కాబట్టి నా కార్డు వీలు equal-- మీరు అన్ని తెలిసి ఉంటే, ఈ కేవలం సంజ్ఞామానం-మేకింగ్ ఉంది జావాస్క్రిప్ట్ లో అభ్యంతరం. ఇది ఒక struct వంటి రకమైన ఉంది సి లో, కాబట్టి మేము ఒక కార్డు తయారు అందువలన ఇప్పుడు మేము ఈ కార్డు తరలిస్తారు ఒక ఆస్తి లేదా HTML లో గుణాన్ని మా అనువర్తనం పరిభాష. కాబట్టి మేము ఈ అనువర్తనం చేయగల కార్డు MyCard సమానం. మీరు ఇన్పుట్, మీరు దీన్ని ఎలా తెలుసు ఇన్పుట్ రకం టెక్స్ట్ లేదా బటన్ సమానం తరగతి బూట్స్ట్రాప్ కోసం BTN సమానం ,? అదే ఆలోచన, App కార్డు సమానం మీరు కలుపులు ఉంచాలి పొందారు ఇక్కడ App కార్డు MyCard సమానం, కాబట్టి ఈ మేము ఈ కార్డు వస్తువు కలిగి చెప్పారు. నేను ఒక దానిని పాస్ వెళుతున్న అనువర్తనం భాగం ఆస్తి. మరియు ఈ అనువర్తనం భాగం అది యాక్సెస్ చెయ్యగలరు మరియు ఇది ఆసక్తికరమైన విషయం. సో మా అనువర్తనం అవతరిస్తుంది ఒక కార్డు ఇస్తారు, కాబట్టి ప్రస్తుతానికి, కేవలం ఇవ్వాలని యొక్క అనువర్తనం కలిగి తెలపండి CardView కార్డు కూడా అనువర్తనం కాదు వంటి ఎందుకంటే దానితో ఏమి తెలుసు వెళ్ళడం, కాబట్టి మేము కేవలం CardView కు ఇస్తాము. కాబట్టి మేము అది పాస్ చేస్తాము అదే విధంగా, కార్డు, సమానం అందువలన ప్రతీ అంగం యాక్సెస్ చేయవచ్చు అది ఇచ్చిన చెయ్యబడింది విషయాలు. వారు లక్షణాలు యాక్సెస్ చేయవచ్చు అది ఇవ్వడం జరిగింది this.props.card, ఈ వాక్య నిర్మాణాన్ని ఉపయోగించడం. సో వాట్ ఇక్కడ జరుగుతుంది మీరు MyCard వస్తువు. మీరు అనువర్తనానికి ఇది పాస్ App కార్డు ఉపయోగించి MyCard సమానం. ఆ కార్డు వస్తువు మీ అనువర్తనం ఇవ్వబడుతుంది. అనువర్తనం యాక్సెస్ చేయవచ్చు this.props.card వంటి. ఇది ఒక చిత్రం వంటి రకమైన ఉంది ఇది యొక్క మూలం ఏమిటి తెలుసు. ఈ అనువర్తనం కార్డు ఏమి తెలుసు ఉంది, మరియు అది తో stuff చేయవచ్చు. ఇది గణనలు చేయవచ్చు. ఇది ఆఫ్ ఆధారంగా నిర్ణయాలు చేయవచ్చు. ఇప్పుడు కోసం, నేను పాస్ కొనసాగుతుందని CardView పై this.props.card. ఇప్పటివరకు అర్ధవంతం? ఇది ఇప్పుడు మరింత అర్ధవంతం చేస్తాము. OK, కాబట్టి ఇప్పుడు మేము CardView వద్ద ఉన్నారు. కార్డు ఇచ్చిన మా CardView, తప్పక దాని ప్రశ్న మరియు సమాధానాన్ని ప్రింట్. ప్రస్తుతం మేము కేవలం ముద్రించిన కొన్ని hardcoded ప్రశ్నలు మరియు సమాధానాలు. మేము అవసరం కళంకం దొరుకుతుందని అవసరం వారు మాకు ఇచ్చిన కార్డు గోవా ఏ ప్రశ్న మరియు సమాధానాన్ని, మరియు అప్పుడు స్క్రీన్ ఈ ముద్రించాలా. కాబట్టి మేము ఇక్కడ ఈ చేయవచ్చు. మొదటి సమానం begin-- రెండర్. కాబట్టి మనం ఇక్కడ చేస్తున్నా మేము తెలుసు ఉంది కార్డులు, ఆస్తి మాకు ఇస్తారు కుడి? ఇది ఒక ఇన్పుట్ వంటి మాకు ఇచ్చిన. ఇది దాదాపు వంటిది వంటి ఒక ఫంక్షన్ కు వాదనలు. కార్డు ఒక వాదన ఉంది దాదాపు ఈ CardView కు. మేము ఆ సారం, మరియు ఉంచుతాము ఇది వేరియబుల్ ప్రశ్న లోకి. ఖచ్చితంగా సమాధానం వెళ్ళింది చేయండి వేరియబుల్ సమాధానం. కార్డు సమాధానం అడుగును. మరియు ఇప్పుడు మేము ఈ కలిగి, బదులుగా ఆ టెక్స్ట్ ముద్రించిన యొక్క, మేము ప్రింట్ చూడాలని సంసార వారు మాకు ఇచ్చారు. కాబట్టి ఈ విధంగా మేము చేయబోతున్నామని stuff-- ప్రశ్న జవాబు ఆర్పేందుకు. అయితే ఈ పనులు చూద్దాం. బాగుంది, కాబట్టి ఇది ద్వారా అడుగు తెలియజేయండి మరొకసారి కేవలం తప్పకుండా. కాబట్టి నా కార్డు కార్డు వస్తువు, మరియు మేము అనువర్తనం ఆ కార్డు ఇస్తున్నారు. మరియు అనువర్తనం తీసుకోవాలని అన్నారు కార్డు మరియు అది CardView ఇవ్వడానికి. మరియు ఈ CardView మీరు, చెప్పారు నాకు ఏ ఫ్లాష్కార్డ్ వస్తువు ఇవ్వాలని నేను దాని ప్రశ్న ప్రింట్ చేస్తాము మరియు దాని సమాధానం, కుడి? నేను కాలేదు నేను చేయవచ్చు మొదటి ఈ కోడ్ పంపండి నా స్నేహితుడు నా కోడ్ యొక్క 10 పంక్తులు, ఇష్టం. అతను లో పొందుపరచడానికి కాలేదు తన సొంత అప్లికేషన్. అతడు ఇదే చేశాడు ఉన్నంత, , CardView కార్డ్ ఈ సమానం వంటి అతను CardView రూపొందించినవారు ఉన్నంత మరియు అది కుడి సమాచారం ఇచ్చారు, అతను తన సొంత కార్డు రెండర్ కాలేదు. కాబట్టి ఈ విధంగా, అది ఒక నిజంగా వార్తలు మీరు నిర్మించడానికి కోసం చల్లని మార్గం కుడి, ప్రతి ఇతర ఉపయోగించే భాగాలు? ఈ కార్డు, నేను స్వేచ్ఛగా ప్రచురించవచ్చు ఇంటర్నెట్లో ఈ CardView, మరియు మంది ఉపయోగించడానికి అనుకోవడం. కాబట్టి ప్రాథమికంగా, అది ఒకటి వంటిది C లైబ్రరీ ప్రామాణిక విధులు. ఇది ఒక ఫంక్షన్ ఎక్కడ ఉంది ఎవరైనా అది వ్రాశారు. మీరు ఒక నిర్దిష్ట ఇన్పుట్ ఇవ్వాలని. ఇది ఒక నిర్దిష్ట ఉత్పత్తిని చేస్తాము. మీరు అది అంతర్గతంగా ఎలా పనిచేస్తుందో పట్టించుకోను. కాలం మీరు కుడి ఇవ్వాలని ఇన్పుట్, ఇది కుడి అవుట్పుట్ చేస్తాము. మరియు ఒక భాగం కావచ్చు అదే విధంగా ఆలోచన. ఈ CardView వంటిది ఒక లైబ్రరీ ఫంక్షన్. మీరు కొన్ని కార్డ్ ఇస్తే ఒక ఆస్తిగా, అది చేస్తాము ఆ కార్డు యొక్క కంటెంట్లను ప్రింట్. నేను నా కార్డు మార్చుకుంటే ఇలా బదులుగా 5 ప్లస్ 37 ఏమి వంటి, దానికి అనుగుణంగా అప్డేట్ అవుతుంది. కాబట్టి కేవలం ఇన్పుట్ మార్చడం ద్వారా, ఇది ఒక నిర్దిష్ట అవుట్పుట్ పొందుతాడు. కాబట్టి మీరు దాదాపు భాగాలు ఆలోచించవచ్చు ఈ విధంగా విధులు, ఏది మీరు కలిసి ఉంచవచ్చు. మీరు ఈ CardView వంటి, ఇన్పుట్ పొందండి ఇన్పుట్ వంటి, మీరు అవుట్పుట్ పొందండి. ఈ సందర్భంలో, అవుట్పుట్ HTML ఉంది. ఇప్పటివరకు అర్ధవంతం? కూల్, మరలా, ఆస్థులే మీరు సమాచారాన్ని పాస్ ఎలా లోకి మరియు భాగాలు బయటకు. OK, కాబట్టి యొక్క ఈ తయారు చేద్దాము విషయం ఇంటరాక్టివ్. ప్రస్తుతం ఇది బోరింగ్ యొక్క ఉంటాము. [వినబడని] ఏమిటి? మీరు కొన్ని ముద్రించవచ్చు కానీ అది చేయవచ్చు అంతే. కాబట్టి యొక్క తిరిగి వెళ్ళి తెలపండి ఇప్పుడు పాత ప్రశ్న. OK, కాబట్టి ప్రస్తుతం ఈ భాగాలు అన్ని వాళ్ళు చాలా బోరింగ్ ఉంటాయి, వారు ఇన్పుట్ పొందండి. వారు అవుట్పుట్, కుడి తయారు? ఆ బోరింగ్ యొక్క ఉంటాము. మేము మా కలిగి అనుకుంటున్నారా భాగాలు కలిగి చెయ్యలేరు అంతర్గత రాష్ట్ర ఒకరకమైన అలాంటిదే గుర్తుంచుకోవాలి. ఒక ఫ్లాష్కార్డ్ కోసం కోసం రాష్ట్ర ఉదాహరణకు, ఏ రకమైన మీరు అనుకోవచ్చు ఒక ఫ్లాష్కార్డ్ గుర్తుంచుకుంటుంది? ఏం తాత్కాలిక స్థితి మీరు గుర్తు అనుకోవచ్చు ఒక ఫ్లాష్కార్డ్ అనువర్తనంలో ఫ్లాష్కార్డ్ కోసం? ప్రేక్షకులు: ఇది ఒరిగిందని చెయ్యబడిన లేదో? నీల్ మెహతా: కుడి, అవును. కాబట్టి మీరు ఉంచాలని ఉండవచ్చు ట్రాక్ మీరు ఎదుర్కొనే లేదా ఉన్నాయి మీరు కార్డు న డౌన్ ఎదుర్కొంటున్నాయి. Facebook న, ఉదాహరణకు, మీరు చేస్తాను న్యూస్ ఫీడ్ లో ఉన్న గుర్తుంచుకోవడానికి కావలసిన మీరు లేదా ప్రొఫైల్ ఎవరు ఇష్టం మీరు ప్రస్తుతం చేస్తున్న. మెసెంజర్, న ఏమి టెక్స్ట్ లైక్ కుడి, ఇన్పుట్ బాక్స్ లో టైప్? మీరు పేజీ రిఫ్రెష్ చేస్తే, అది వెళ్ళిపోతుంది. కానీ మీరు నిజంగా పట్టించుకోను. ఇది కేవలం తాత్కాలిక వార్తలు. అవును? ప్రేక్షకులు: [వినబడని] నీల్ మెహతా: ఒక ఫ్లాష్ ఇలా కార్డు, మీరు చూసిన చేయవచ్చు వంటి ప్రశ్న వైపు లేదా సమాధానం వైపు? ప్రేక్షకులు: OK. నీల్ మెహతా: ఇలా ఒక కుడి, ఫ్లాష్కార్డ్ ద్విపార్శ్వ? అవును, కాబట్టి మీరు కావలసిన ఇప్పుడు ఈ ఆలోచన నేను, ఇన్పుట్లను వంటి ఇది, లక్షణాలు కలిగి కానీ ఊ, తాత్కాలిక ఇది రాష్ట్ర, మీరు పేజీలో ఎక్కడ, కుడి? మళ్ళీ, నేను Facebook తెలిపారు Messenger, నేను వ్యక్తి వలె కలిగి మీరు Facebook చూస్తున్నపుడు లేదా కుడి, ప్రొఫైల్ వార్తలు? ఈ తాత్కాలికమే. ఇది యూజర్ చూపించు ముఖ్యం ఏమి జరగబోతోంది, కానీ పేజీ రిఫ్రెష్ ఉంది. ఇది నిజంగా పట్టింపు లేదు. కనుక ఇది తాత్కాలిక రాష్ట్ర వార్తలు కాబట్టి మేము అన్ని అది రాష్ట్ర. సో, మళ్ళీ, రాష్ట్ర మరియు ఆధారాలు ఉంది. మర్యాదలు ఇన్పుట్ ఇవ్వబడుతుంది మీ డేటా మూలం నుండి. రాష్ట్రం కేవలం అప్రమేయం వంటిది. ఇది కేవలం stuff వంటిది విషయం ఇంటరాక్టివ్ చేస్తుంది. సో మా CardView-- యొక్క వివరించారు మా CardView-- అది nice ఉంది కాబట్టి. మేము ఇక్కడ చేయబోతున్నామని ఏమిటి, మేము వెళుతున్న CardView మరియు మాత్రమే CardView గురవడం. కాబట్టి నా స్నేహితుడు ఈ వారు వచ్చింది ఎవరు ఏ తేడా గమనించవచ్చు లేదు. నేడున్న మార్పు ఉండదనే తమ సొంత సంకేతాన్ని ఏ, కానీ అవి చూడండి భావిస్తున్న వారి CardView దశకంలో కాకముందు. ఆ భాగాలు గురించి ఒక nice భాగం. సరే మా CardView కాబట్టి, యొక్క ప్రయత్నించండి తెలియజేయండి మరియు మేము అప్ దశలవారీగా చేసినా ట్రాక్ లేదా డౌన్ ఎదుర్కొంటున్నాయి. రియాక్ట్ మనం మొదటి ద్వారా దీన్ని ప్రారంభ రాష్ట్ర పేర్కొనండి. కార్డు ఎక్కడ ప్రారంభం లేదు? కాబట్టి getInitialState అని ఒక ఫంక్షన్ పనిచేస్తాయి, మరియు మేము ఒక వస్తువు తిరిగి. ఈ వస్తువు, కొన్ని రాష్ట్ర కలిగి మరియు ఒక రాష్ట్ర కేవలం కీ-విలువ జంట ఉంది. ఆదేశించు లో వలె, మీరు ఒక కీ మరియు కలిగి పేరు స్ట్రింగ్ వంటి విలువ, మీరు. ఈ సందర్భంలో, యొక్క ముందు నిజమైన అని పిలవబడు. ఈ మేము ఒక రాష్ట్ర కలిగి చెప్పారు. రాష్ట్ర ఒక భాగం ముందు అని ఒక లక్షణం ఉంది. [వినబడని], అప్రమేయంగా, కాబట్టి మేము కార్డు ముందు ఉన్నాము, మరియు మేము ఈ మార్చవచ్చు మేము కార్డు కుదుపు. అర్ధవంతం? OK, కాబట్టి ప్రస్తుతం, మేము ఉన్నాము, నటించు ప్రశ్న మరియు సమాధానాన్ని చూపుతోంది. ఇప్పుడు మేము ఏమి చెయ్యాలి ప్రశ్న షో మేము కార్డు ముందు ఉన్నాము కాబట్టి సమాధానం కార్డు వెనుక ఉంది. మీరు అన్ని తయారు ఎందుకు ఆ వార్తలు కార్డు ఇంటరాక్టివ్. కాబట్టి యొక్క ఈ ఇక్కడ ప్రయత్నించండి తెలియజేయండి. Well, మొదట మాత్రం వేరియబుల్ తయారు. మేము this.state.front ఇప్పుడు అడగవచ్చు. మేము అదే మేము రాష్ట్రం యాక్సెస్ ప్రాప్తి ఆధారాలు, కాబట్టి this.state.front. మేము ముందు అయితే, అప్పుడు టెక్స్ట్ this.props.card.question ఉంది. మేము ముందు పోతే కార్డు, మేము ప్రయత్నించండి మరియు పట్టుకోడానికి చూడాలని కార్డు నుండి ప్రశ్న. లేకపోతే, మేము వెనుక ఉన్నాము ఉంటే కార్డు, మేము ఏమి చేస్తారు? ప్రేక్షకులు: సమాధానం? నీల్ మెహతా: YEP, కాబట్టి టెక్స్ట్ this.props.card.answer సమానం. కానీ మీరు గమనించి, మేము ఉపయోగిస్తున్న రాష్ట్ర ఒక నిర్ణయం ఇప్పుడు భాగం ఎందుకంటే వివిధ కనిపిస్తాయని ఈ దానితో ఎలా ఇంటరాక్ట్ ఆఫ్ ఆధారంగా. సో బదులుగా ఈ ముద్రించిన యొక్క, మనం కేవలం టెక్స్ట్ ప్రింట్ చేస్తాము. కూల్, కాబట్టి ఇప్పుడు మీరు చూడండి, మేము మాత్రమే ప్రశ్న చూడండి. మరియు నేను మానవీయంగా ఇక్కడ రాష్ట్ర మార్చుకుంటే ముందు తప్పుడు ఉంది మేము 42 తిరిగి పొందండి. సో, మళ్ళీ, ఈ భాగం దాని సొంత రాష్ట్రంలో ఉంది. ఒక బటన్ లేదో తెలుసు ఇలా అది ఒత్తిడి లేదా చేయబడింది ఈ విషయం పై తెలుస్తుందని ముందు లేదా వెనుక. అప్రమేయంగా, ఇది ముందు ఉంది. మరియు అప్పుడు అది ముందు ఉంటే, మేము ప్రశ్న ప్రింట్ చేస్తాము. అది తిరిగి ఉంటే, మేము చేస్తాము సమాధానం ప్రింట్. సో, మళ్ళీ, సమాచారం ఇచ్చిన ఒకటే. ఇది కేవలం వ్యత్యాసంతో మీరు ప్రోగ్రామ్ ఎలా ఆధారంగా. కాబట్టి, ఉదాహరణకు, Facebook Messenger, మీరు అదే డేటా మూలం పొందుటకు కూడా, ఇది వివిధ చూడండి ఉండవచ్చు రాష్ట్రం భిన్నంగా ఉంటుంది ఎందుకంటే. మీరు ఒక శోధిస్తున్న వేరే వ్యక్తి యొక్క సందేశం. సరే, ఈ అన్ని బాగా మరియు మంచి, కానీ ఇప్పుడు ఏమి నిజానికి లేదో, మాకు మార్చడానికి చేయగలరు చేయడానికి మా కార్డు ముందు లేదా వెనుక ఉంది. మేము ఒక ఫ్లిప్ జోడించడం ద్వారా చేయవచ్చు బటన్, కార్డు ఒక బటన్ [వినబడని] ఉంటే కార్డు కుదుపు ఉంటుంది. కాబట్టి యొక్క ఇక్కడ, ఈ ఒక బటన్ జోడించడానికి అనుమతిస్తుంది బటన్, మరియు ఈ బటన్ ఫ్లిప్ చెబుతాను. కాబట్టి ఇప్పుడు, అది ఏమీ లేదు. ఇది కేవలం nice కనిపిస్తోంది. మనం చెయ్యవలసింది మేము ఒక క్లిక్ జోడించవచ్చు హ్యాండ్లర్, onClick, this.flip సమానం మరియు మేము తరువాత ఫ్లిప్ నిర్వచించే చేస్తాము. కానీ సాధారణంగా, onClick ఒక ఫంక్షన్ ఉంది వినియోగదారు దీన్ని క్లిక్ చేసినప్పుడు అని చెపుతాడు. కాబట్టి బటన్ తెలుస్తుంది అది క్లిక్ చెయ్యబడిన ఉన్నప్పుడు. అది క్లిక్ చెయ్యబడిన వెళ్ళాడు, దీనికి కార్డు కుదుపు ఉంటుంది. ఇది మీ వంటి రకంగా పిజ్జా డెలివరీ వ్యక్తి. మీరు వంటి అన్ని కుడి ఉన్నాము, చేసినప్పుడు ఎవరైనా నేను కుడి, పిజ్జా బట్వాడా చేస్తాము, నాకు ఏంది? మీరు ఈ వినేవారు నమోదు. మీరు ఒక ఈవెంట్ కోసం వినండి. మీరు అని, మరియు ఉన్నప్పుడు చేసుకోగా ఈవెంట్ మీరు ఏదో అలా జరుగుతుంది. మీరు పిజ్జా పొందుటకు. ఈ సందర్భంలో, మీరు ఉన్నప్పుడు ఉన్నాము క్లిక్, మీరు కార్డు కుదుపు. అందువలన మేము ఒక నిర్ణయించుకోవాలి కార్డు కుదుపు అని ఫంక్షన్, కాబట్టి మేము ఆ కుడి వ్రాయండి చేస్తాము ఇక్కడ, ఫంక్షన్ కుదుపు. కాబట్టి మీరు ఫ్లిప్ చేస్తాను ఏమి ఆలోచిస్తాడు? మళ్ళీ ఈ ఉన్నప్పుడు అని చెపుతాడు మేము ఫ్లిప్ బటన్ క్లిక్ చేయండి. ఫంక్షన్ ఫ్లిప్ ఏమి చేయాలి? ప్రేక్షకులు: మార్చు this.state.front నిజమైన నుండి ఒప్పుకు తప్పుడు కు. నీల్ మెహతా: YEP, కాబట్టి పడుతుంది సంసార this.front ముందు రాష్ట్రము is--. ఉంటే, ముందు రాష్ట్ర టేక్ అది తప్పుడు తయారు, నిజం. అది తప్పు అయితే, కుడి, ఇది నిజం చేయడానికి? కాబట్టి యొక్క ప్రయత్నించండి తెలియజేయండి. మీరు రాష్ట్ర మార్చలేరు కేవలం this.state చేయడం ద్వారా. మీరు దీన్ని చెయ్యలేరు. మీరు అలా కాదు. మీరు ఒక ఫంక్షన్ ఉపయోగించడానికి కలిగి this.setState అని. కాబట్టి మీరు this.setState ముందు చెప్పగలను పెద్దప్రేగు ఈ పేరు, మళ్ళీ, ఆశ్చర్యార్థకం పాయింట్ వ్యతిరేక అర్థం. నేను ఈ ఉంటే అంచనా. state.front నిజం, అది తప్పుడు మారిపోతాయి చేస్తాము. కాబట్టి మేము రాష్ట్ర సెట్ చేస్తాము నిజమైన నుండి తప్పుకు. అది తప్పు అయితే, మేము చేస్తాము నిజమైన దానిని తప్పుడు సెట్. జస్ట్ మేము సెట్ మరియు కొద్దిగా పొందుటకు కూడా గమనించవచ్చు విభిన్నంగా, అందువలన యొక్క ఈ ప్రయత్నించండి తెలియజేయండి. బడా బింగ్, ఈ చూడండి. ఫ్లిప్ బటన్ ఇప్పుడు రెడీ రాష్ట్ర వెనుకకు ముందు మారవచ్చు. మీరు ఒక చూడండి ఎక్కడ మరియు కాబట్టి ఇక్కడ రియాక్ట్ యొక్క మేజిక్ కొద్దిగా. మేము అది చెప్పారు ఎప్పుడూ ఇలా తిరిగి అవరోధం. మేము అది ఏదైనా పునర్ చెప్పారు ఎప్పుడూ. మీరు ఈ చేస్తున్నా రియాక్ట్ లేకుండా, మీరు భావిస్తే ఉన్నప్పుడు ఆలోచన ఇష్టం ఫ్లిప్ బటన్, క్లిక్ మీరు దానిని చెప్పడానికి కలిగి భావిస్తున్న మానవీయంగా కుడి, తిరిగి రెండర్? నిజంగా చల్లని ఉంది రియాక్ట్ మీరు బృందం ఇది ఒక నిర్దిష్ట రాష్ట్ర మరియు లక్షణాలు ఇవ్వాలని, ఇది ఎల్లప్పుడూ కలిగిస్తుంది ఖచ్చితమైన అదే విషయం. కాబట్టి మేము ఎప్పుడూ మేము మారినప్పుడు రాష్ట్ర మరియు లక్షణాలు, స్పందించలేదు కేవలం మొత్తం విషయం తిరిగి చూపుతుంది. ఇది ఒక ఉంది తెలుసు ఒక ఒకటిని రాష్ట్ర మరియు పారామితి మరియు HTML మధ్య. చేసినప్పుడు వారిలో గాని సమితి రాష్ట్ర మంతటా ద్వారా మార్పులు, ఇది మారుతుంది ఎలా పే తిరిగి ఆలపించారు. కాబట్టి ప్రాథమికంగా రియాక్ట్ వంటిది మీరు మార్చడానికి కోసం వేచి. ఎప్పుడు ఏదో మారుస్తుంది, ఇది మొత్తం పేజీ తిరిగి రెండర్ చేస్తాము. మరియు అది అసమర్థంగా ధ్వనులు ఉంటే, అది ఉంటుంది ఎందుకంటే, వార్తలు కానీ స్పందించలేదు ఒక విషయం ఉపయోగిస్తుంది ఒక షాడో DOM అని. బదులుగా నేరుగా పేజీ గీయడం, అది మెమరీలో వాస్తవిక HTML చెట్టు ఉంచుతుంది. మీకు తెలుసా, HTML ఒక చెట్టు వంటిది, ఒక క్రమానుగత డేటా నిర్మాణం వలె. ఇది మెమరీ లో ఒక నకిలీ చెట్టు ఉంచుతుంది మరియు మీరు పేజీ అప్డేట్ చేసినప్పుడు, అది మరొక నకిలీ డ్రా చేస్తాము చెట్టు, మరియు అది లెక్కించేందుకు చేస్తాము ఏమి అది చేయడానికి అవసరం మార్చడానికి పేజీ రెండు చెట్లు సమాన చేయడానికి. కాబట్టి ప్రాథమికంగా, ఇది వాస్తవంగా చాలా తిరిగి చూపుతుంది. మరియు అప్పుడు మాత్రమే ఇష్టం మార్పులు చిన్న సర్దుబాటు గీతలు లో పేజీ అవసరమైన కాబట్టి అది చాలా, చాలా సమర్థవంతం. కాబట్టి ప్రాథమికంగా స్పందిస్తుందో చేసినప్పుడు మీరు ఏదో మార్చడానికి, అది తిరిగి రెండర్ వాస్తవంగా పేజీ చేస్తాము. ఇది నేను ఏమి చేయాలి కనిపెడతాడు నిజమైన పేజీ ప్రతిబింబిస్తాయి చేయడానికి మార్చడానికి వర్చ్యువల్ పేజీ, మరియు ఆ చేస్తాను. వర్చువల్ DOM వార్తలు. ఇది అతిపెద్ద ఒకటి యొక్క లక్షణాలు రియాక్ట్. ఆ సమంజసం లేదు? ఏవైనా ప్రశ్నలు? అవును? ప్రేక్షకులు: ఎలా MVC ఇప్పటికీ సరిపోల్చండి మేము గురించి మాట్లాడారు వంటి వనరులు ముందు. నీల్ మెహతా: అవును, ప్రశ్న ఇది MVC పోల్చడానికి లేదు ఎలా ఉంది? మీరు వనరులను గురించి అడిగారు. సరే, అది పని ఎలా గురించి మాట్లాడటానికి వీలు. MVC, మీరు మోడల్ అప్డేట్ ఇష్టం. ఈ సందర్భంలో మనం ఒక కార్డు మోడల్ భావిస్తాను. వీక్షణ వుంటుంది ఫ్లిప్ బటన్, మరియు నియంత్రణ ఫ్లిప్ ఫంక్షన్ వుంటుంది. కాబట్టి వీక్షణ తెలియచేయును నియంత్రిక ఫ్లిప్ కుదుపు. ఫ్లిప్ తెలియచేయును మార్చడానికి మోడల్, కుడి? కాబట్టి మీరు ఒక MVC మీరు చేసినప్పుడు మోడల్ మార్చడానికి కోసం వినండి, మరియు మీరు తిరిగి రెండర్ తదనుగుణంగా వీక్షణ. లేదా మీరు కేవలం ఇష్టం ఉంటుంది నియంత్రిక కలిగి. అప్పుడు నమూనా మార్చడానికి కోసం వేచి, మరియు ఎంచుకొని ఒక దానిలా ఒక భాగం ఎంచుకోండి మార్చు. ఇక్కడ మేము ఒక విషయం కలిగి, కానీ ఒక పెద్ద అనువర్తనం, మీరు ఏమి గుర్తు ఇష్టం కలిగి ప్రతి ఒక్క స్థానంలో మార్పు, అందువలన ఇది చిన్న బాధించే ఉంది. కాబట్టి nice ఉంది రియాక్ట్ అది ఒక షాడో Dom ఉంది ఎందుకంటే. ఇది కేవలం కోరుకుంటాను మొత్తం విషయం తిరిగి. మీరు ఎంపిక లేదు వంటి అప్డేట్ ఏమి అంచనా. Facebook న మీరు కోరుకుంటే MVC, ఒక కొత్త సందేశాన్ని పొందుటకు, మీరు గుర్తు పెట్టుకోవాలి ఇష్టం సరే, విషయాలు మార్చడానికి ఎగువన పేజీ సందేశాన్ని చిహ్నం. కూడా దిగువన ఒక కొత్త విండోను పాప్. కూడా విండోలో ఒక కొత్త విషయం. కూడా ఒక ధ్వని ప్లే. ఆ విషయం చాలా వార్తలు అదే సమయంలో బయటకు వెళ్లి. మరియు మీరు లేదు కనుక ఒక షాడో Dom కలిగి, మీరు భావిస్తే మానవీయంగా ఎందుకంటే చేయాల్సిందల్లా మీరు మొత్తం పేజీ వదిలించుకోవటం కాదు. మీరు పొందలేని, కాబట్టి మీరు మానవీయంగా ప్రతి విషయం మార్చటానికి, ఇది MVC నిజంగా బాధించే ఉంది. సో క్రమంలో ఉండాలి పొదుపుగల, ఇవి ఇది పేజీ అప్డేట్ సమర్థవంతమైన, కానీ కూడా బాధించే. ఎందుకంటే షాడో యొక్క, రియాక్ట్ డోమ్, మీరు ఉచితంగా రెండు విషయాలు పొందండి. ఇది సమర్థవంతమైన ఎందుకంటే షాడో DOM యొక్క. ప్రతిబంధకంగా పేజీ నవీకరించడాన్ని ఉంటుంది. ఇది చెట్టు తారుమారు చేయడం లేదు. మీరు సామర్థ్యం పొందుటకు. మీరు కూడా వాడుకలో సౌలభ్యత ఎందుకంటే పొందడానికి మీరు కేవలం మొత్తం పేజీ తిరగరాసే ఉంటే, కానీ మీరు కేవలం, అన్ని కుడి విషయాలు తెలుసు ఎక్కడో పేజీలో ఉండాలి వెళ్తున్నారు. అది వేరే స్థానంలో కావచ్చు, కానీ అది కుడి, పేజీలో ఉండాలి జరగబోతోంది? కాబట్టి మీరు తిరిగి అన్వయించ మొత్తం విషయం వాస్తవంగా, మరియు మీరు ఒక జంట సంపాదించగలరు పేజీకి మార్పులు. సో, మళ్ళీ, MVC మీరు ఎంపిక కలిగి ఉంటుంది ఉపయోగం మరియు సమర్ధత సౌలభ్యత మధ్య మరియు మీరు రెండు పొందండి, ప్రతిస్పం. కనుక ఇది ఉత్తమం. అర్ధవంతం? ఘన. OK, కాబట్టి యొక్క యొక్క మాట్లాడటానికి వీలు చూద్దాం దశ 4 గురించి కొద్దిగా, ఎలా మేము భాగాలు పొందుపరచవచ్చు. కాబట్టి మేము ఇప్పుడు ఈ హక్కు ఉంటుంది. మేము మా చల్లని చిన్న బటన్. మేము తిరిగి ఫ్లిప్ మరియు ముందుకు, మరియు ఆ అది అంతే. యొక్క మేము అనుకుందాం మరొక భాగం కలిగి. యొక్క మా ఫ్లాష్కార్డ్ అనువర్తనం తప్పక చెప్పటానికి లెట్ అన్ని కార్డులు జాబితా కలిగి మీరు ఉంటుంది, కాబట్టి మేము అర్థం మరొక భాగం ఉండాలి. Well, బహుశా జాబితా వీక్షణ కాల్. యొక్క జాబితా వీక్షణ తయారు చేద్దాము అని CardView ఉండటమే, ఈ జాబితా వీక్షణ మరియు CardView కలిసి పని ఇష్టం. మరియు మీరు వాటిని మిళితం చేయవచ్చు మీరు మా అనువర్తనం చేయడానికి. కాబట్టి మొదటి, యొక్క ఒక తయారు చేద్దాము జంట మరింత కార్డులు కుడి. యొక్క అని పిలవబడు, ఏమి కార్డులు? మరియు కేవలం నేను లేదు అది లో టైప్ బోర్ మీరు నేను ఇక్కడ నుండి కాపీ వెళుతున్న. కాబట్టి నేను లేదు వెళుతున్న అది కేవలం ఒక కార్డు ఇవ్వాలని. నేను కార్డులు వ్యూహం ఇవ్వాలని వెళుతున్న. కాబట్టి మొదటి Apps ఇప్పుడు కోసం బ్రేక్ మాత్రం. All right, కాబట్టి మేము తయారు చేయబోతున్నామని ఈ చేయగలరు బహుళ కార్డులు నిర్వహించడానికి. కాబట్టి మొదటి, మేము అది ఇవ్వకూడదని చూడాలని కేవలం ఒక కార్డు కానీ కార్డులు వ్యూహం కార్డులు జాబితా వంటి. మరియు ఈ సందర్భంలో, మనం వాటిలో మూడు ఉన్నాయి. అన్ని కుడి, అనువర్తనం ఉంది కాబట్టి జాబితా కార్డులు పొందడానికి వెళుతున్న, మరియు అది నిర్ణయించే జరగబోతోంది ఒక CardView చూపించడానికి. CardView మాత్రమే ఒక కార్డు, కానీ అనువర్తనం రెండర్ కుడి, అన్ని కార్డులు జాబితా గెట్స్? సో మీరు ఒక గుర్తించడానికి ఉన్నప్పుడు కార్డు, CardView ఇవ్వడానికి మీరు చేయగలరు అంచనా ఎలా ఒక నిర్ణయం ఏ కార్డు గురించి చూపించటం? మీరు ఒక సూచనను ఇస్తుంది, అది తాత్కాలికంగా వార్తలు మీరు ఒక నిర్దిష్ట కార్డు చూసే ఉంటాం. మీరు పేజీ రిఫ్రెష్ చేస్తే, మీరు చేస్తాము తిరిగి మొదటి కార్డు వెళ్ళండి. ఇది తాత్కాలిక వార్తలు ఎందుకంటే ఆ సరే. మేము ఱేపట్నుంచీ ఉపయోగించుకునే? ప్రేక్షకులు: మీరు ఒక వేరియబుల్ చేయగలిగితే మీరు ముందు నేను వంటి. ఈ నిజం, మీరు అనుకొనుట ప్రస్తుత కార్డు 1 సమానం ఉందా? నీల్ మెహతా: అవును, మేము కుడి, రాష్ట్ర కలిగి అనుకుంటున్నారా? మీరు రాష్ట్ర వుపయోగించాలి భాగం దొరుకుతుందని ఇది కార్డు మేము పొందుటకు అనుకుంటున్నారు. ఇలా మేము జాబితా అన్ని కార్డులు, మేము చేస్తాము దొరుకుతుందని రాష్ట్ర ఉపయోగించడానికి మొదటి కార్డు ఒకటి, కాబట్టి రెండవ కార్డు, మూడవ కార్డు, మరియు. కాబట్టి ఒక అనువర్తనం కాబట్టి ఒక అనువర్తనం ఒక పొందుతారు , getInitialState ఫంక్షన్ కలిగి getInitialState ఫంక్షన్ తిరిగి. మరియు మేము కేవలం activeIndex 0 చెప్పడానికి చేస్తాము. కాబట్టి ఇప్పుడు మా యాప్ ఇది యొక్క సొంత రాష్ట్రంలో ఉంది. అందువలన ఇప్పుడు బయటకు దొరుకుతుందని, నటించు ఒక కార్డు యొక్క కేవలం శ్రేణి వెళ్ళనిస్తున్నారని మరియు ఆ సూచిక వద్ద విషయం పట్టుకోడానికి. ఎంచుకోండి కార్డు సమాన this.props.cards this.state.activeIndex. మీరు ఇక్కడ చూడండి కనుక, ఆధారాలు మరియు రాష్ట్ర నిజానికి కలిసి పని. కాబట్టి ఇప్పుడు మేము మా activeCard కలిగి, మేము అది activeCard పిలుస్తాను ఈ పనుల లేదో యొక్క చూసేలా. [వినబడని] ఓహ్, ఒక టెక్స్ట్ లోపం ఉంది. ఆహ్. కూల్, YEP, కాబట్టి ఇప్పుడు మేము తిరిగి మేము ముందు ఇక్కడ, కుడి? తప్ప అదే పాత కార్యక్రమం ఇప్పుడు మేము మద్దతునిస్తుంది కార్డులు జాబితా, కేవలం ఒక కార్డు. మరియు ఇప్పుడు, మళ్ళీ, మేము మార్పు ఉంటే activeIndex, మేము, 1, 0 నుండి వెళ్ళే మరియు ఇప్పుడు రెండవ కార్డు, ఆపై మేము 0 వెళ్ళాడు. కాబట్టి ఇక్కడ ఒక కొత్త వార్తలు souped అప్ మా యొక్క వెర్షన్. OK, కాబట్టి ఇప్పుడు యొక్క ఒక జాబితా వీక్షణ కలిగి అనుమతించే మీ ప్రోగ్రామ్ లో అన్ని కార్డులు చూపిస్తుంది కాబట్టి మేము ఒక కొత్త చేస్తాము భాగం ListView అని. ListView react.createClass సమానం లెట్. కాబట్టి మేము ఒక క్రమం లేని చూపాలనుకునే ప్రతి కార్డు కోసం ఒక జాబితా అంశాన్ని జాబితా. కాబట్టి మేము కార్డులు కొంత ఉంది. మేము ఒక జాబితా అంశం కావలసిన ప్రతి కార్డు కోసం, కుడి? మేము లూప్ ఒక చేయగల లేదా ఏదో ఒక కొత్త జాబితా అంశాన్ని చేయడానికి. కానీ మార్గంలో మీరు దీన్ని రియాక్ట్, చిహ్నం అనే విషయం ఉపయోగించడానికి. Map ఒక సాధనం లేదా మీరు ఉపయోగించే ఒక ఫంక్షన్ ఉంది ప్రతి అంశం కోసం, కొన్ని ఫంక్షన్ నడుస్తుంది, తిరిగి విలువ పడుతుంది, మరియు మీరు ఆ తిరిగి ఇస్తుంది. ఒక ఉదాహరణగా, మేము శ్రేణి కలిగి కాబట్టి 1, 2, 3.map ఫంక్షన్ మరియు ఈ ఒక కుదింపు ఫంక్షన్ x బాణం x సార్లు x. ఈ ప్రతి సంఖ్య కోసం, చెప్పారు 1, 2, 3, తీసుకోబడుతుంది. ఇది స్క్వేర్, మరియు అది తిరిగి ఇవ్వాలని. కాబట్టి మీరు 1 ఏమి ఆలోచిస్తాడు 2, 3.map x x సార్లు వెళుతుంది X మీరు తిరిగి ఇచ్చిన ఇస్తుంది ఈ ఫంక్షన్ అని ఆ శ్రేణి యొక్క ప్రతి మూలకం అమలు. ప్రేక్షకులు: 1, 4 9? నీల్ మెహతా: YEP, 1, 4, 9 మీరు 1 సార్లు 1 ఎందుకంటే. మీరు ఒక ఇస్తుంది. మొదటి ఎలిమెంట్. 2 సార్లు 2 4 ఉంటుంది. ఆ రెండవ మూలకం. 3 సార్లు 3 9 ఉంటుంది. ఒక మూడవ అంశం. అర్ధవంతం? కాబట్టి మ్యాప్ ఒక టెక్నిక్ మీరు ఉంది ఫంక్షనల్ ప్రోగ్రామర్లు ఉపయోగించడానికి, కొత్త శైలి ఏదో చేయాలని ప్రోగ్రామింగ్ మీ జాబితాలో ప్రతి మూలకం. కాబట్టి ఈ తెలిసిన ధ్వనులు. మేము కార్డులు జాబితా. మేము ప్రతి ఒక జాబితా అంశం పొందడానికి కావలసిన ఒకటి, కాబట్టి మేము కేవలం ఇక్కడ మ్యాప్ ఉపయోగిస్తాము. మేము జాబితా సమానం వీలు చేస్తాము సే this.props, కార్డులు, పటం. కాబట్టి మేము ఉన్నాము, ఒక కార్డు ఇస్తారు జాబితా అంశం ఉత్పత్తి కానుంది అది కార్డు యొక్క కంటెంట్లను వైపు. యొక్క కేవలం మేము పంచిపెట్టు అనుకుందాం కార్డులు కాబట్టి card.question ప్రశ్నిస్తున్నాయి. కాబట్టి ఈ జాబితాను కలిగి ఒక LI యొక్క లేదా జాబితా అంశాలు శ్రేణి ఇక్కడ ఒక జాబితా ఉంది ప్రతి కార్డు కోసం అంశాన్ని, మరియు ఆ కార్డులు ప్రశ్న కలిగి. అర్ధవంతం? బాగుంది, కాబట్టి ఇప్పుడు చూద్దాం నిజానికి ఆ ప్రింట్. కాబట్టి మేము ఒక ఉల్ చేరుకుంటాయి. ఆ క్రమం లేని జాబితా లోపల, మేము మొత్తం జాబితా కట్టుబడి ఉంటాం వారు మాకు ఇచ్చిన. కూల్. All right, కాబట్టి ఇప్పుడు ఈ జాబితా వీక్షణ కేవలం కనుగొనేందుకు పనిచేస్తుంది. జాబితా వీక్షణ గురించి ఏవైనా ప్రశ్నలు? మీరు కార్డులు కొంత ఉంది. మీరు ప్రతి కార్డు కోసం ఒక జాబితా అంశం తయారు. మరియు మీరు ఒక క్రమం లేని లోపల వాటిని ఉంచాలి జాబితా, మరియు మీరు అది తిరిగి ఇవ్వాలని. కాబట్టి ఇప్పుడు యొక్క కాబట్టి మేము పొందుపరచడానికి పని వీలు మా అనువర్తనం యొక్క ఈ లోపల, కాబట్టి మేము, జాబితా వీక్షణ చేయవచ్చు. ఏం వాదన మేము వీక్షణ జాబితాకు పాస్ చెయ్యాలి? ధర్మాల మేము ఇవ్వడం లేదు? మీరు ఇవ్వాలని ఉంటే గుర్తుంచుకోండి అది కార్డులు ఒక సమూహం, అది జాబితాలో చేస్తాము వాటిని కార్డులు వీక్షించడానికి. కాబట్టి మేము ఏమి చేరుతుందని ఇక్కడ వాదన? ప్రేక్షకులు: కార్డులు జాబితా? నీల్ మెహతా: అవును, కార్డులు కాబట్టి కుడి, this.props.cards సమానం? అందువలన మాత్రమే సమస్య మీరు మాత్రమే చెయ్యవచ్చు ఉంది , నటించు ఒక టాప్ స్థాయి మూలకం మారిన కాబట్టి మీరు DIV లో అది వ్రాప్ పొందారు. ఇది ఆశ్చర్యకరమని తెలిపాడు. కాబట్టి యొక్క ఆ ఉంటే చూద్దాం. ఆ పని చేస్తుంది? YEP, అక్కడ మీరు వెళ్ళండి. కాబట్టి ఇప్పుడు మేము ఒక జాబితాను కలిగి దిగువన కార్డులు, మరియు తర్వాత మేము మా కలిగి పైన కూడా CardView, మరియు ఆ మధ్య కుదుపు ఉంటుంది కార్డు యొక్క రెండు వైపులా. ఇప్పుడు నేను చేసినవి ఎలా ఆ సమంజసం లేదు? అవును, మరలా, మేము రెండు విభాగాలు ఉంటాయి. మొదటి భాగం ప్రింట్లు బయటకు జాబితా ప్రతి కార్డు. ఆ జాబితా వ్యూ. మరియు రెండవ భాగం కేవలం ఆ కార్డు ముద్రిస్తుంది. మీరు ఒక నిర్దిష్ట కార్డు ఇవ్వాలని ఉంటే, అది చేస్తాము ఆ కార్డు గురించి సమాచారాన్ని ప్రింట్ మరియు మీరు ముందుకు వెనుకకు కుదుపు వీలు. మేము కావాలా, మేము ప్రయత్నించండి మరియు చర్చ కాబట్టి ఈ కొన్ని కొత్త ఫీచర్లను జోడించడం గురించి. లేకుంటే మేము ఒక బిట్ మరింత మాట్లాడవచ్చు రియాక్టర్ యొక్క వేగానికి గురించి లేదా మేము జవాబివ్వడానికి ప్రశ్నలు మీరు కలిగి ఉండవచ్చు ఈ ఎందుకంటే ప్రధాన భాగాల అన్ని నేను గురించి మాట్లాడటానికి కావలసిన స్పందించలేదు. మేము ముందుకు వెళ్ళవచ్చు. మేము ప్రశ్నలకు. మీకు కావలసిన సంసార. ప్రేక్షకులు: మీరు ఉపయోగించవచ్చు సాధారణ జావాస్క్రిప్ట్ లో JSX? లేదా ఏదో [వినబడని] వచ్చింది? నీల్ మెహతా: ప్రశ్నను చెయ్యవచ్చు మీరు సాధారణ జావాస్క్రిప్ట్ తో JSX ఉపయోగించాలి? జవాబు అవును. JSX దానిని యొక్క మార్గం మీ పడుతుంది అది లోపలి HTML కలిగి జావాస్క్రిప్ట్, మరియు JavaScript లోకి కూర్చింది అది లోపలి HTML కలిగి లేదు. కాబట్టి ఇక్కడ గమనించవచ్చు ఆ గమనించవచ్చు. మీరు div వంటి కలిగి వంటి ఈ కనిపిస్తోంది మరియు మీరు అది లోపలి అంశాలు ఉన్నాయి. ఆ JavaScript కూర్చింది వంటి ఇదే ఉత్పత్తి. నేను ఏమి నేను చెప్పడం నేను ఊహించడం అంతే వంటి JSX, కేవలం ఒక వాక్యనిర్మాణ ఉంది JavaScript ఒక ప్రాసెసర్ చాలా PHP వంటి HTML కోసం ఒక ప్రాసెసర్ ఉంది. JSC ఒక ప్రాసెసర్ ఉంది జావాస్క్రిప్ట్ కోసం అనుమతించే మీరు మీ జావాస్క్రిప్ట్ లోపలి HTML ఉంచారు. కాబట్టి మీరు కుడి ట్రాన్స్ఫార్మర్ కలిగి ఉంటే ఇది [వినబడని] అనే ఒక విషయం, ఇది పరివర్తన. కుడి ప్రాసెసర్, అది మీరు అలా తెలియజేస్తాము. ప్రేక్షకులు: [వినబడని] నీల్ మెహతా: సాధారణంగా మీరు అవసరం లేదు జావాస్క్రిప్ట్ లోపల HTML ఉంచాలి మీ చేయడం తప్ప రియాక్ట్. కానీ ఎలాగైనా దీన్ని చెయ్యవచ్చు. Yep? ప్రేక్షకులు: నేను మీరు అనుకుంటున్నాను రియాక్ట్ జరిగినట్లు ఒక క్రియాత్మక కార్యక్రమాలైన భాషగా ఉంది. మేము CS50 లో సి నేర్చుకోవడం చేసిన. సి కూడా ఒక క్రియాత్మక భాషలో ఉంది? నీల్ మెహతా: హరిబాబు ఫంక్షనల్ గురించి అని మరొక విషయం వర్సెస్ అత్యవసరం లేదా విధానపరమైన ప్రోగ్రామింగ్. ప్రసిద్ధ కార్యక్రమాలు రెండు రకాల ఉంది. ఒకటి, విధానపరమైన అని ఇది , అన్ని చేయడం ఆదేశాలను వంటి గురించి మరియు ఒక అన్ని ఉంది, పని విధులు కలిగి మరియు గురించి ఇన్పుట్ మరియు ఆ అవుట్పుట్. రియాక్ట్ ఒక క్రియాత్మక సమాహారం. సి చాలా విధానపరమైన సమాహారం. మరియు ఒక ఉదాహరణగా, ఉదాహరణకు సి, మీరు ఈ బద్ధంగా విధంగా చెయ్యమని ప్రోగ్రామ్ మేకింగ్, కుడి? మీరు చెప్పే ఉంటుంది, ఈ ప్రింట్. ఈ డేటాను నిర్మాణం మార్చడానికి. ఈ ప్రింట్. ఇది అన్ని ఆదేశాలను గురించి. రియాక్ట్, అక్కడ కాదు అనేక ఆదేశాలు. ఇది కలిగి గురించి అన్ని ఉంది భాగాలు మీరు కూర్చు. వారు విధులు వంటి ఉన్నాము. మీరు ఒక ఫంక్షన్ వంటి కలిగి CardView అని, ఒక విధి ఆ, ఇన్పుట్, అవుట్పుట్ ఉంది అందువలన రియాక్ట్ అన్ని ఈ తత్వశాస్త్రం గురించి మీరు డేటాను కలిగి having-- యొక్క మాకు. మీరు ఈ ద్వారా పాస్ అల్గోరిథం, మరియు అది చేస్తాము అవుట్ పుట్ HTML మీరు కేవలం పేజీ ముద్రించిన, అందువలన మీరు కలిగి ఇది ముక్కగా నిర్మించడానికి. కాబట్టి ఒక రూపకం డ్రా ఏమి నేను ముందు చెప్పారు, మీరు ఎలా తెలుసు మీరు Facebook న ఒక సందేశాన్ని వస్తే మరియు మీరు అప్డేట్ ఏమి భాగాలు ఎంచుకోండి ఆ విధానపరమైన వార్తలు. ఇది కుడి, అత్యవసరం ఉంది? సరే, నేను ఒక సందేశం వచ్చింది. అక్కడ ఖాతాను మార్చడానికి లెట్. యొక్క ఇక్కడ ఒక విండో పాప్ లెట్. అక్కడ ఖాతాను మార్చడానికి లెట్. యొక్క ఇక్కడ ఈ డ్రా. ఒక విధానపరమైన విధానం. అంటే, కోణీయ వంటి విషయాలు వార్తలు బూస్ట్, వెన్నెముక, ఇతర చట్రాలు ఉపయోగించడానికి. రియాక్ట్ ఫంక్షనల్. ఇది ఒక చాలా భిన్నమైన మార్గం యొక్క విషయాలను గురించి ఆలోచిస్తూ. ఇది యొక్క వివరించారు ఈ ఆలోచన పడుతుంది విధులు లేదా చేస్తుందని అల్గోరిథంలు అది డేటా ఇస్తాయి. దాన్ని ఉమ్మి చేస్తాము అది కంప్యూటర్ ఉండాలి, మరియు బయటకు బరువు సంరక్షణలో పడుతుంది. మీరు మీరుగా నిర్వహించడానికి లేదు. భావన కొద్దిగా రాబడుతుంది? అవును? ప్రేక్షకులు: ఒక క్రియాత్మక భాషలో, ప్రతిదీ ఒకేసారి జరుగుతుంది? నీల్ మెహతా: లేదు, విషయాలు క్రమంలో జరిగే. ఇక్కడ వంటి ఇప్పటికీ ఉంది చేయాలనుకోవడం, కానీ అది లేదు వంటి క్రమంలో జరిగే కమాండ్, కమాండ్ సిఫార్సు. ఇది క్రమంలో జరుగుతుంది ఫంక్షన్ మీరు అవుట్పుట్ ఇస్తుంది. మరొక ఫంక్షన్ ఉంచి. మరొక ఉంచి ఫంక్షన్ మరొక ఫంక్షన్. మీరు CS51 చేస్తే, మీరు చేస్తాము ఫంక్షనల్ కార్యక్రమాలు తెలుసుకోవడానికి ఈ పరిధిని కొద్దిగా బయటకు. కానీ సాధారణంగా, ఏ చేస్తుంది రియాక్ట్ మాత్రమే చల్లని ఉంది ఒక-మార్గం డేటా ప్రవాహం మరియు వాస్తవిక Dom, కానీ కూడా ఈ ఆలోచన ఫంక్షనల్ ప్రోగ్రామింగ్. మరియు ఫంక్షనల్ ప్రోగ్రామింగ్ చాలా సులభం కంపోజ్ మరియు బయటకు కూల్ స్టఫ్ చేయడానికి, మరియు అది ఆలోచించడం చాలా సులభం గురించి మరియు గురించి కారణం. కనుక ఇది రియాక్ట్ మరొక మంచి డ్రా ఉంది. ఏదైనా ప్రశ్నలు? అవును? ప్రేక్షకులు: ఉమ్, ఎందుకు మీరు చేస్తాను var వ్యతిరేకంగా వీలు ఉపయోగించాలి? నీల్ మెహతా: సో ప్రశ్న ఎందుకు మీరు బదులుగా var యొక్క వీలు ఉపయోగించగలను? ఈ అనే విషయం ES6 లేదా ECMA స్క్రిప్ట్ 6. ఇది జావాస్క్రిప్ట్ యొక్క క్రొత్త సంస్కరణ. సాంకేతిక కారణాల వల్ల సమూహం ఉంది, కానీ వీలు var ఒక మంచి వెర్షన్. మీరు వేరియబుల్స్ డిక్లేర్ ఎలా ఇది. మీరు వీలు ఉపయోగించవచ్చు. మీరు var ఉపయోగించవచ్చు. లెట్ సాంకేతిక కొంత ఉంది మీరు వాటిని చూడవచ్చు reasons-- ఇది ఉత్తమం వై కోసం later-- అప్. సాధారణంగా, ES6 కొన్ని nice ఉంది కొత్త వాక్యనిర్మాణం కొన్ని కొత్త లక్షణాలు పాత జావాస్క్రిప్ట్ పైన. కాబట్టి మేము ఐదు నిమిషాల వంటి ఉంటాయి. నేను కేవలం గురించి మాట్లాడాలని భావించారా మరో విషయం నిజమైన ఫాస్ట్. మీరు ఏవైనా ప్రశ్నలు కలిగి ఉంటే, ఈ తర్వాత దాని గురించి మాట్లాడటానికి వీలు. కానీ కేవలం ఈ గెట్స్ కెమెరా క్యాచ్, నేను మీరు ఎలా గురించి ఒక బిట్ మాట్లాడు నిజానికి మీ అనువర్తనాలను రియాక్ట్ ఉపయోగించండి. మీరు ఇక్కడ వెళ్ళి ఉంటే, Facebook.GitHub.IO/react, ఈ రియాక్ట్ కొరకు హోమ్ పేజీ, మరియు అది మీరు నిజంగా ఉపయోగించడానికి ఎలా మీరు తెలియజేస్తాము మీ పేజీలలో స్పందించలేదు. నిజానికి, ఇది ఒక చిన్న వార్తలు సంక్లిష్టమైన రియాక్ట్ ఇన్స్టాల్ చేసే ప్రయత్నంలో. మీరు కేవలం లాగండి వంటి సులభం కాదు మరియు అక్కడ ఒక JavaScript డ్రాప్. మీరు మీ ట్రాన్స్ఫార్మర్ కలిగి అది ముందు చేసిన విధంగా, ఇది విల్ ఏర్పాటు మీ JSX చెయ్యి సాధారణ జావాస్క్రిప్ట్. మీరు చేస్తాము విషయం కలిగి మీరు సాధారణ ES6 కంపైల్. జావాస్క్రిప్ట్ కదిలే చాలా ఉంది భాగాలు మీరు చేయాల్సిందల్లా, కాబట్టి ఒక విషయం ఉంది రాజు, Yeoman.io అని. మరియు ఈ ఒక కమాండ్ లైన్ సాధనం చేస్తాము ఉంది మీరు మీ రియాక్ట్ బయటకు తాత్కాలిక కట్టడం సహాయం సులభంగా ప్రాజెక్టులు. కాబట్టి మీరు ఈ గురించి చదువుకోవచ్చు తరువాత, కానీ కొన్ని టూల్స్ ఉన్నాయి రాజు అందిస్తుంది. వారు ఒక రియాక్ట్ మీరు సృష్టించడానికి తెలియజేస్తాము లో నిర్మించిన ప్రతిదీ అనువర్తనం. ఇది నిర్మించారు చేస్తాము ఇలా భాగాలు, లో నిర్మించారు. ఇది మీ ట్రాన్స్ఫార్మర్ నిర్మించారు ఉంటుంది. వారు చల్లని చాలా ఉన్నాయి అంశాలు స్వయంచాలకంగా నిర్మించారు జనరేటర్లు అని ఈ విషయాలు ఉపయోగించి. మీరు కోరుకుంటే కాబట్టి దీని గురించి చదవండి. జస్ట్ రాజు, Y-ఇ-O-M-A-N, మరియు సాగుతుంది మీరు ఈ వంటి జనరేటర్లు వెదుక్కోవచ్చు. మరియు వంటి జనరేటర్లు ఈ మీరు కేవలం ఒక ఇష్టం ఒక జంట కమాండ్ లైన్ ఆదేశాలను ఉంది. ఇది ఒక వెలుపల పరంజా చేస్తాము మొత్తం మీ కోసం అనువర్తనం రియాక్ట్. ఇది అన్ని మాన్యువల్ పైపింగ్ పొందుతారు, మరియు గుసగుసలాడుట పని, మీరు చేయబడుతుంది మరియు ఈ మీరు కేవలం దృష్టి ఎందుకు కేవలం ఆన్ రైటింగ్ రియాక్ట్. కాబట్టి ప్రాథమికంగా ఒక భవనానికి అనువర్తనం nontrivial ఉంది స్పందించలేదు. ఇది అన్ని కలిసి వైర్డు, కానీ అక్కడ మీరు దానిని చేస్తాను అని సాధనాలు. మీరు అనుకున్న ఉంటే ఒక రియాక్ట్ కాబట్టి అనువర్తనం, ఆ విధంగా చేయడం ప్రయత్నించండి. మీరు కేవలం అవ్వండి కోరుకుంటే, మీరు ఈ CodePen ఉపయోగించి ప్రయత్నించవచ్చు ఈ CodePen ఎందుకంటే అన్ని వైరింగ్ స్పందించలేదు. నేను ఇప్పటికే మీరు కోసం అన్ని పని చేశాను. మీరు ఒక వంటి చేయడానికి కావాలా సో ప్రొడక్షన్ అనువర్తనం రియాక్ట్ విడుదల, ఈ జనరేటర్లు ఒకటి ప్రయత్నించండి. మీరు ఆడటానికి అనుకుంటే చుట్టూ, అది తరచుగా కేవలం ఉపయోగకరమని వంటి ఇక్కడ CodePen చుట్టూ ఆడుతూ ప్రయత్నించవచ్చు. మంచి కదూ? కూల్. కాబట్టి ఆ నేను కలిగి అంతే. మళ్ళీ, అన్ని కోడ్ మరియు ఉదాహరణలు ఇక్కడ ఈ వెబ్ సైట్ మాత్రం. సో, మళ్ళీ, మేము మాట్లాడరు గురించి రియాక్ట్ చాలా వాక్యనిర్మాణం కానీ అన్ని ఆ కనుగొనేందుకు చిన్న వాక్యనిర్మాణ వివరాలు, ఇది అన్ని అందుబాటులో చేస్తాడు ఇక్కడ ఈ వెబ్ సైట్ లో. కాబట్టి నాకు నచ్చింది సిఫార్సు ఇష్టం మొదటి దశకు. మీ CodePen ఉంచారు. దీనితో పని ప్రయత్నించండి ఇది రెండవ దశకు. అక్కడ ఒక నాల్గవ అడుగు, మరియు కేవలం మీరు ఆ నుండి చోటే చూడండి. ఏ మరింత ప్రశ్నలు, తనిఖీ లేదా ఆ పేజీని నాకు ఇమెయిల్. ఆ నా ఇమెయిల్ అదే. కానీ నేను ఏ మీకు సహాయం ఇష్టం మీరు గురించి ఉండవచ్చు ప్రశ్నలు రియాక్ట్. కాబట్టి, YEP, నేను అంతే. చాలా కోసం మీరు అన్ని ధన్యవాదాలు చూడటం లేదా హాజరు. మరియు నేను ఏ ప్రశ్నలు తీసుకొని వెళ్తాము మీరు ఇప్పుడు ఈ తర్వాత కలిగి ఉండవచ్చు. కాబట్టి చూడటం కోసం మీరు అన్ని ధన్యవాదాలు.