Elementtien Renderöinti Reactissa
Edellisissä luvuissa opimme luomaan JSX-elementtejä käyttöliittymien rakentamiseen. Nyt on aika tuoda nämä elementit näytölle renderöimällä ne React-sovelluksessamme.
react-dom/client-paketti
React-elementin renderöimiseksi DOM-puuhun käytämme react-dom/client-pakettia, joka tarjoaa kaksi keskeistä metodia:
- createRoot(container): Tämä metodi luo React-juuren viittaamalla olemassa olevaan DOM-elementtiin. Useimmissa React-sovelluksissa tämä elementti on
div, jolla on tunnisteroot, ja se määritellään yleensäindex.html-tiedostossa. Tämä juuri toimii säiliönä, johon koko React-sovellus renderöidään; - render(element): Render-metodi odottaa viitettä React-elementtiin tai -komponenttiin ja määrittää, mitä juurisäiliöön renderöidään.
Alla on perusrakenne, joka havainnollistaa tätä prosessia:
// Import the necessary method from the `react-dom` package.
import { createRoot } from "react-dom/client";
// Obtain a reference to the DOM container with the `"root"` id.
const root = createRoot(document.getElementById("root"));
// Define the React element you want to render.
const elementToRender = <YourReactElement />;
// Use the `render()` method to place the element in the `root` container.
root.render(elementToRender);
Käytännön esimerkki
Toteutetaan tämä teoria käytännössä. Tarkastellaan seuraavaa esimerkkiä, jossa luodaan React-elementti ja renderöidään se DOM:iin:
Huomio
Kaikki esimerkit ja tehtävät esitetään CodeSandboxeissa, jotta voit työskennellä koodin parissa ilman ympäristön asettamiseen liittyviä keskeytyksiä.
Oletuksena näet sivun live-esikatselun. Vedä CodeSandboxin vasemmalla puolella olevaa liukusäädintä tarkastellaksesi koodia.
Tässä esimerkissä luodaan React-elementti nimeltä article ja renderöidään se määriteltyyn juurikontaineriin.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain what the `createRoot` function does in more detail?
What is the difference between `createRoot` and the old `ReactDOM.render` method?
Can you show another example of rendering a different React element?
Awesome!
Completion rate improved to 2.17Elementtien Renderöinti Reactissa
Pyyhkäise näyttääksesi valikon
Edellisissä luvuissa opimme luomaan JSX-elementtejä käyttöliittymien rakentamiseen. Nyt on aika tuoda nämä elementit näytölle renderöimällä ne React-sovelluksessamme.
react-dom/client-paketti
React-elementin renderöimiseksi DOM-puuhun käytämme react-dom/client-pakettia, joka tarjoaa kaksi keskeistä metodia:
- createRoot(container): Tämä metodi luo React-juuren viittaamalla olemassa olevaan DOM-elementtiin. Useimmissa React-sovelluksissa tämä elementti on
div, jolla on tunnisteroot, ja se määritellään yleensäindex.html-tiedostossa. Tämä juuri toimii säiliönä, johon koko React-sovellus renderöidään; - render(element): Render-metodi odottaa viitettä React-elementtiin tai -komponenttiin ja määrittää, mitä juurisäiliöön renderöidään.
Alla on perusrakenne, joka havainnollistaa tätä prosessia:
// Import the necessary method from the `react-dom` package.
import { createRoot } from "react-dom/client";
// Obtain a reference to the DOM container with the `"root"` id.
const root = createRoot(document.getElementById("root"));
// Define the React element you want to render.
const elementToRender = <YourReactElement />;
// Use the `render()` method to place the element in the `root` container.
root.render(elementToRender);
Käytännön esimerkki
Toteutetaan tämä teoria käytännössä. Tarkastellaan seuraavaa esimerkkiä, jossa luodaan React-elementti ja renderöidään se DOM:iin:
Huomio
Kaikki esimerkit ja tehtävät esitetään CodeSandboxeissa, jotta voit työskennellä koodin parissa ilman ympäristön asettamiseen liittyviä keskeytyksiä.
Oletuksena näet sivun live-esikatselun. Vedä CodeSandboxin vasemmalla puolella olevaa liukusäädintä tarkastellaksesi koodia.
Tässä esimerkissä luodaan React-elementti nimeltä article ja renderöidään se määriteltyyn juurikontaineriin.
Kiitos palautteestasi!
