React / JavaScript 初心者です。
海外のReact学習サイトからとってきたコードで、作業手順を読み解きながら進めようと思っています。
1-3までは、自分で書いてみた(一番下)のですが、4番にありますconsole.logでインポートされていることの確認とは、
どのように書いたら良いかアドバイス頂けますと幸いです。
初心者のため、手順の解釈違いなどありましたら、ご指摘いただけますと助かります。
[手順]
1)次のプロパティを持つ5つのオブジェクトの配列を含むData.jsという名前の新しいファイルを作成します
:img、conditions、time。
2)HTML内の同じ要素の値に基づいてオブジェクトにデータを入力します
3)App.jsにインポートする
4)console.logでインポートされていることを確認する
サンプルのHTML
HTML
1<head> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 4 <meta name="theme-color" content="#000000"> 5 <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> 6 <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 7 <title>React App</title> 8</head> 9 10<body> 11 <noscript> 12 You need to enable JavaScript to run this app. 13 </noscript> 14 <div id="root"></div> 15 <section> 16 17 <div class="weather"> 18 <img src="http://res.cloudinary.com/jkeohan/image/upload/v1535732381/day.svg" alt=""> 19 <p><span>conditions:</span> sunny</p> 20 <p><span>time:</span> day</p> 21 </div> 22 23 <div class="weather"> 24 <img src="http://res.cloudinary.com/jkeohan/image/upload/v1535732381/night.svg" alt=""> 25 <p><span>conditions:</span> clear</p> 26 <p><span>time:</span> day</p> 27 </div> 28 29 <div class="weather"> 30 <img src="http://res.cloudinary.com/jkeohan/image/upload/v1535732381/stormy.svg" alt=""> 31 <p><span>conditions:</span> clear</p> 32 <p><span>time:</span> day</p> 33 </div> 34 35 <div class="weather"> 36 <img src="http://res.cloudinary.com/jkeohan/image/upload/v1535732381/cloudy-day_t7ckxp.svg" alt=""> 37 <p><span>conditions:</span> partly sunny</p> 38 <p><span>time:</span> night</p> 39 </div> 40 41 <div class="weather"> 42 <img src='http://res.cloudinary.com/jkeohan/image/upload/v1535732381/cloudy-night.svg' alt="" /> 43 <p><span>conditions:</span> clear</p> 44 <p><span>time:</span> day</p> 45 </div> 46 </section> 47</body> 48 49</html>
手順を読んで自分で書いてみた
JavaScript
1import React from "react"; 2 3const weather1 = { 4 img: "http://res.cloudinary.com/jkeohan/image/upload/v1535732381/night.svg", 5 conditions: "sunny", 6 time: "day" 7 }; 8 9const weather2 = { 10 img: "http://res.cloudinary.com/jkeohan/image/upload/v1535732381/night.svg", 11 conditions: "clear", 12 time: "day" 13 }; 14 15const weather3 = { 16 img: "http://res.cloudinary.com/jkeohan/image/upload/v1535732381/stormy.svg", 17 conditions: "clear", 18 time: "day" 19 }; 20 21const weather4 = { 22 img: "http://res.cloudinary.com/jkeohan/image/upload/v1535732381/cloudy-day_t7ckxp.svg", 23 conditions: "partly sunny", 24 time: "night" 25 }; 26 27const weather5 = { 28 img: "http://res.cloudinary.com/jkeohan/image/upload/v1535732381/cloudy-night.svg", 29 conditions: "clear", 30 time: "day" 31 }; 32 33export default Data; 34//App.jsにインポートするためにエクスポートした
回答1件
あなたの回答
tips
プレビュー