React　新規ファイルを作成し、配列の作成する

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にインポートするためにエクスポートした

hoshi-takanori

2021/07/24 10:28

差し支えなければ、「海外のReact学習サイト」の URL を教えてください。また、手順 1 の配列の作り方は React 以前の問題なので、まずは普通に JavaScript を勉強してみては…。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、記載のJavaScriptだと Data が未定義なのに export しようとしているのでエラーになると思います

Data.js

JavaScript
1// このファイルではReactを使わないため import は不要
2// import React from "react";
3
4const Data = [
5  {
6    img: "http://res.cloudinary.com/jkeohan/image/upload/v1535732381/night.svg",
7    conditions: "sunny",
8    time: "day"
9  },
10  {
11    img: "http://res.cloudinary.com/jkeohan/image/upload/v1535732381/night.svg",
12    conditions: "clear",
13    time: "day"
14  },
15  {
16    img: "http://res.cloudinary.com/jkeohan/image/upload/v1535732381/stormy.svg",
17    conditions: "clear",
18    time: "day"
19  },
20  {
21    img: "http://res.cloudinary.com/jkeohan/image/upload/v1535732381/cloudy-day_t7ckxp.svg",
22    conditions: "partly sunny",
23    time: "night"
24  },
25  {
26    img: "http://res.cloudinary.com/jkeohan/image/upload/v1535732381/cloudy-night.svg",
27    conditions: "clear",
28    time: "day"
29  }
30]
31
32export default Data;

上記のように変更した Data.js を App.js で import すればよさそうです。

App.js

Javascript
1// パスはディレクトリ構成にあわせて適宜書き換えてください
2import Data from './Data'
3
4console.log(Data)

投稿2021/07/24 12:05

machine_machine

総合スコア163

hiro_ike

2021/07/24 12:26

なるほどです！書いていただいた説明で理解できました！ご丁寧にありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

React　新規ファイルを作成し、配列の作成する

関連した質問