Home-theater-designers
ఆస్ట్రో ఫ్రేమ్‌వర్క్‌తో అప్లికేషన్‌ను రూపొందించేటప్పుడు, అప్లికేషన్ స్థితిని ఎలా నిర్వహించాలి లేదా భాగాలు మరియు ఫ్రేమ్‌వర్క్‌ల మధ్య ఎలా భాగస్వామ్యం చేయాలి అని మీరు ఆలోచిస్తూ ఉండవచ్చు. నానో స్టోర్స్ ఆస్ట్రో కోసం అత్యుత్తమ స్టేట్ మేనేజర్‌లలో ఒకటి, ఇది రియాక్ట్, ప్రీయాక్ట్, స్వెల్టే, సాలిడ్, లిట్, యాంగ్యులర్ మరియు వెనిలా JSతో పని చేస్తున్నందుకు ధన్యవాదాలు.
నా వైఫైకి కనెక్ట్ చేయబడిన పరికరాలను ఎలా హ్యాక్ చేయాలిరోజు MUO వీడియో కంటెంట్‌తో కొనసాగడానికి స్క్రోల్ చేయండి
ఆస్ట్రో ప్రాజెక్ట్‌లో రాష్ట్రాన్ని ఎలా నిర్వహించాలో తెలుసుకోండి. స్టేట్ మేనేజ్‌మెంట్ కోసం నానో స్టోర్‌లను ఉపయోగించే ప్రాథమిక నోట్-టేకింగ్ అప్లికేషన్‌ను రూపొందించడానికి సాధారణ దశలను అనుసరించండి మరియు React మరియు Solid.js కాంపోనెంట్ మధ్య దాని స్థితిని పంచుకోండి.
ఆస్ట్రో అంటే ఏమిటి?
ఆస్ట్రో ఫ్రేమ్‌వర్క్ రియాక్ట్, ప్రీయాక్ట్, వ్యూ లేదా స్వెల్టే వంటి ప్రసిద్ధ UI ఫ్రేమ్‌వర్క్‌ల పైన వెబ్ అప్లికేషన్‌లను సృష్టించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఫ్రేమ్‌వర్క్ aని ఉపయోగిస్తుంది భాగం-ఆధారిత నిర్మాణం , కాబట్టి ఆస్ట్రోలోని ప్రతి పేజీ అనేక భాగాలను కలిగి ఉంటుంది.
పేజీ లోడ్ సమయాన్ని వేగవంతం చేయడానికి, ఫ్రేమ్‌వర్క్ క్లయింట్ సైడ్ జావాస్క్రిప్ట్ వినియోగాన్ని తగ్గిస్తుంది మరియు బదులుగా సర్వర్‌లో పేజీలను ప్రీరెండర్ చేస్తుంది.
కంటెంట్-కేంద్రీకృత వెబ్‌సైట్‌లను ప్రచురించడానికి ఆదర్శవంతమైన సాధనంగా ఆస్ట్రో రూపొందించబడింది. బ్లాగులు, ల్యాండింగ్ పేజీలు, వార్తల వెబ్‌సైట్‌లు మరియు ఇంటరాక్టివిటీపై కంటెంట్‌పై దృష్టి సారించే ఇతర పేజీల గురించి ఆలోచించండి. మీరు ఇంటరాక్టివ్‌గా గుర్తించిన భాగాల కోసం, ఫ్రేమ్‌వర్క్ ఆ ఇంటరాక్టివిటీని ప్రారంభించడానికి అవసరమైన కనీస జావాస్క్రిప్ట్‌ను మాత్రమే పంపుతుంది.
ఇన్‌స్టాలేషన్ మరియు సెటప్
మీరు ఇప్పటికే ఆస్ట్రో ప్రాజెక్ట్‌ని కలిగి ఉంటే, ఈ విభాగాన్ని దాటవేయండి.
కానీ మీకు ఆస్ట్రో ప్రాజెక్ట్ లేకపోతే, మీరు ఒకదాన్ని సృష్టించాలి. దీనికి ఉన్న ఏకైక అవసరం Node.js మీ స్థానిక అభివృద్ధి యంత్రంలో ఇన్‌స్టాల్ చేయబడింది.
సరికొత్త ఆస్ట్రో ప్రాజెక్ట్‌ని సృష్టించడానికి, మీ కమాండ్ ప్రాంప్ట్‌ని ప్రారంభించండి, cd డైరెక్టరీలోకి మీరు మీ ప్రాజెక్ట్‌ని సృష్టించాలనుకుంటున్నారు, ఆపై కింది ఆదేశాన్ని అమలు చేయండి:
npm create astro@latest
ఆస్ట్రోను ఇన్‌స్టాల్ చేయడానికి 'y' అని ప్రత్యుత్తరం ఇవ్వండి మరియు మీ ప్రాజెక్ట్ ఫోల్డర్ పేరుకు పేరును అందించండి. మీరు ఆస్ట్రోస్‌ని సూచించవచ్చు అధికారిక సెటప్ ట్యుటోరియల్ మీరు దారిలో ఇరుక్కుపోయి ఉంటే.
మీరు ప్రాజెక్ట్‌ను సృష్టించడం పూర్తయిన తర్వాత, కింది ఆదేశంతో దాన్ని అనుసరించండి (ఇది ప్రాజెక్ట్‌కి ప్రతిచర్యను జోడిస్తుంది):
npx astro add react
చివరగా, కింది ఆదేశాన్ని అమలు చేయడం ద్వారా రియాక్ట్ కోసం నానో స్టోర్‌లను ఇన్‌స్టాల్ చేయండి:
npm i nanostores @nanostores/react
ఇప్పటికీ మీ టెర్మినల్‌లో, ప్రాజెక్ట్ యొక్క రూట్ ఫోల్డర్‌లోకి cdని ఉంచండి మరియు కింది ఆదేశాలలో దేనితోనైనా అప్లికేషన్‌ను ప్రారంభించండి (వాటిలో మీరు దేనిని ఉపయోగిస్తున్నారనే దానిపై ఆధారపడి):
npm run dev
లేదా:
yarn run dev
లేదా:
pnpm run dev
వెళ్ళండి http://localhost:3000 మీ వెబ్‌సైట్ ప్రివ్యూను చూడటానికి మీ వెబ్ బ్రౌజర్‌లో.
మీ ఆస్ట్రో ప్రాజెక్ట్‌ను సెటప్ చేయడంతో, అప్లికేషన్ డేటా కోసం స్టోర్‌ని సృష్టించడం తదుపరి దశ.
గమనిక దుకాణాన్ని సృష్టిస్తోంది
అనే ఫైల్‌ను సృష్టించండి noteStore.js ఫైల్ లోపల /src మీ అప్లికేషన్ యొక్క రూట్‌లోని డైరెక్టరీ. ఈ ఫైల్ లోపల, ఉపయోగించండి అణువు() నుండి ఫంక్షన్ నానోస్టోర్లు గమనికల దుకాణాన్ని సృష్టించడానికి:
import { atom } from "nanostores"
export const notes = atom([])
export function addNote(note) {
notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}
ది గమనిక చేర్చు() ఫంక్షన్ నోట్‌ను దాని వాదనగా తీసుకుంటుంది మరియు నోట్స్ స్టోర్‌లో నిల్వ చేస్తుంది. ఇది డేటా మ్యుటేషన్‌ను నివారించడానికి నోట్‌ను నిల్వ చేసేటప్పుడు స్ప్రెడ్ ఆపరేటర్‌ని ఉపయోగిస్తుంది. స్ప్రెడ్ ఆపరేటర్ a జావాస్క్రిప్ట్ సంక్షిప్తలిపి వస్తువులను కాపీ చేయడం కోసం.
నోట్-టేకింగ్ యాప్ యొక్క UIని సృష్టిస్తోంది
UI కేవలం నోట్‌ని సేకరించడానికి ఇన్‌పుట్‌ను కలిగి ఉంటుంది మరియు క్లిక్ చేసినప్పుడు, స్టోర్‌కి నోట్‌ను జోడించే బటన్‌ను కలిగి ఉంటుంది.
లోపల src/భాగాలు డైరెక్టరీ, పేరుతో కొత్త ఫైల్‌ను సృష్టించండి NoteAddButton.jsx . తరువాత, కింది కోడ్‌ను ఫైల్ లోపల అతికించండి:
import {useState} from "react"
import {addNote, notes} from "../noteStore"
export default function NoteAdder() {
const [userNote, setUserNote] = useState('')
return(
<>
<label htmlFor="note">Add a note: </label>
<input type="text" name="note" id="note"
onChange={(event) => setUserNote(event.target.value)} />
<button onClick={() => addNote(userNote)}>Add</button>
<ul>
{
$notes.map((note, index) => {
<li key={index}>{note}</li>
})
}
</ul>
</>
)
}
మీరు ఇన్‌పుట్‌లో టైప్ చేస్తున్నప్పుడు ఈ కోడ్ కాంపోనెంట్ స్థితికి గమనికను జోడిస్తుంది. ఆపై, మీరు బటన్‌ను క్లిక్ చేసినప్పుడు, అది నోట్‌ను స్టోర్‌లో సేవ్ చేస్తుంది. ఇది స్టోర్ నుండి గమనికలను పట్టుకుని, ఆర్డర్ చేయని జాబితాలో వాటిని ప్రదర్శిస్తుంది. ఈ విధానంతో, గమనికను క్లిక్ చేసిన వెంటనే పేజీలో చూపబడుతుంది సేవ్ చేయండి బటన్.
ఇప్పుడు మీలో pages/index.astro ఫైల్, మీరు దిగుమతి చేసుకోవాలి గమనికAddButton మరియు లోపల దాన్ని ఉపయోగించండి <ప్రధాన> టాగ్లు:
import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
</main>
</Layout>
// Other code
మీరు ఇప్పుడు మీ బ్రౌజర్‌కి తిరిగి వెళితే, పేజీలో రెండర్ చేయబడిన ఇన్‌పుట్ ఎలిమెంట్ మరియు బటన్‌ను మీరు కనుగొంటారు. ఇన్‌పుట్‌లో ఏదైనా టైప్ చేసి, క్లిక్ చేయండి సేవ్ చేయండి బటన్. గమనిక వెంటనే పేజీలో కనిపిస్తుంది మరియు మీరు మీ బ్రౌజర్‌ని రిఫ్రెష్ చేసిన తర్వాత కూడా పేజీలో అలాగే ఉంటుంది.
రెండు ఫ్రేమ్‌వర్క్‌ల మధ్య స్థితిని పంచుకోవడం
మీరు React మరియు Solid.js మధ్య రాష్ట్రాన్ని భాగస్వామ్యం చేయాలనుకుంటున్నారని అనుకుందాం. కింది ఆదేశాన్ని అమలు చేయడం ద్వారా మీరు చేయవలసిన మొదటి విషయం ఏమిటంటే, మీ ప్రాజెక్ట్‌కు సాలిడ్‌ను జోడించడం:
npx astro add solid
తర్వాత, అమలు చేయడం ద్వారా solid.js కోసం నానో స్టోర్‌లను జోడించండి:
npm i nanostores @nanostores/solid
solid.jsలో UIని సృష్టించడానికి, లోపలికి వెళ్లండి src/భాగాలు డైరెక్టరీ మరియు పేరుతో కొత్త ఫైల్‌ను సృష్టించండి Notes.js. ఫైల్‌ను తెరిచి, దాని లోపల గమనికల భాగాన్ని సృష్టించండి:
import {useStore} from "@nanostores/solid"
import {notes} from "../noteStore"
import {For} from "solid-js"
export default function Notes() {
const $notes = useStore(notes)
return(
<>
<h1>My notes</h1>
<ul>
<For each={notes()} />
{(note) => <li>{note}</li>}
</For>
</ul>
</>
)
}
ఈ ఫైల్‌లో, మీరు స్టోర్ నుండి గమనికలను దిగుమతి చేసుకోండి, ప్రతి గమనికను లూప్ చేసి పేజీలో ప్రదర్శించండి.
పైన చూపించడానికి గమనిక Solid.jsతో సృష్టించబడిన భాగం, మీకి వెళ్లండి pages/index.astro ఫైల్, దిగుమతి గమనికAddButton మరియు లోపల దాన్ని ఉపయోగించండి <ప్రధాన> టాగ్లు:
import NodeAddButton from "../components/NoteAddButton.jsx"
import Nodes from "../components/Notes.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
<Notes client:load />
</main>
</Layout>
// Other code
ఇప్పుడు మీ బ్రౌజర్‌కి తిరిగి వెళ్లి, ఇన్‌పుట్‌లో ఏదైనా టైప్ చేసి, క్లిక్ చేయండి సేవ్ చేయండి బటన్. గమనిక పేజీలో చూపబడుతుంది మరియు రెండర్‌ల మధ్య కూడా కొనసాగుతుంది.
ఆస్ట్రో యొక్క ఇతర కొత్త ఫీచర్లు
ఈ సాంకేతికతలను ఉపయోగించి, మీరు మీ ఆస్ట్రో అప్లికేషన్‌లోని స్థితిని నిర్వహించవచ్చు మరియు భాగాలు మరియు ఫ్రేమ్‌వర్క్‌ల మధ్య భాగస్వామ్యం చేయవచ్చు. కానీ ఆస్ట్రో డేటా సేకరణ, HTML మినిఫికేషన్ మరియు సమాంతరంగా రెండరింగ్ వంటి అనేక ఇతర సులభ లక్షణాలను కలిగి ఉంది.