ReactDOM.render () II
Pindah ke kanan sedikit lagi, dan Anda akan melihat ungkapan ini:
document.getElementById ('app')
Anda baru tahu bahwa ReactDOM.render () membuat argumen pertamanya muncul di layar. Tapi di mana di layar seharusnya argumen pertama itu muncul?
Argumen pertama ditambahkan ke elemen apa pun yang dipilih oleh argumen kedua.
Di editor kode, pilih index.html. Lihat apakah Anda dapat menemukan elemen yang akan dipilih oleh document.getElementById ('app').
Elemen itu bertindak sebagai wadah untuk argumen pertama ReactDOM.render ()! Di akhir latihan sebelumnya, ini muncul di layar:
<main id = "app">
<h1> Render saya! </h1>
</main>
Instruksi
1. Di index.html, ganti ini:
<main id = "app"> </main>
dengan rentang ini:
<span id = "container"> </span>
2. Pilih app.js.
Anda ingin <h1> Render saya! </h1> ditambahkan ke <span id = "container"> </span>.
Pada baris 5, wujudkan dengan mengubah string yang diteruskan ke document.getElementById.
Jawab :
File : app.js
import React from 'react';
import ReactDOM from 'react-dom';
// Write code here:
ReactDOM.render(<h1>Render me!</h1>, document.getElementById('container'));
File : Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/styles.css">
<title>Learn ReactJS</title>
</head>
<body>
<span id="container"></span>
<script src="https://s3.amazonaws.com/codecademy-content/courses/React/react-course-bundle.min.js"></script>
<script src="/app.compiled.js"></script>
</body>
</html>
Tidak ada komentar:
Posting Komentar