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

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

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1377閲覧

React用いてブラウザにHello Woldが表示できない

chay

総合スコア3

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

2グッド

0クリップ

投稿2022/11/01 17:30

前提

※かなり初心者です…。
Reactのチュートリアルを始めようと思いHello Wold!を出力するということにチャレンジしてます。
https://ja.reactjs.org/docs/hello-world.html

ローカルPC上にあるhtmlファイルやJSファイルにコピーペーストしてブラウザで開くと構文エラーが出てしまいます。

test.jsの2行目でエラーになってるのですが、web開発自体初めて過ぎて何が正解かさっぱりわからないです。
宜しくお願い致します。

発生している問題・エラーメッセージ

Uncaught SyntaxError: Unexpected token '<' (at test.js:2:13)

該当のソースコード

html

1<div id="root"></div> 2 3<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> 4<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> 5 6<script src="test.js"></script>

javascript(test.js)

1const root = ReactDOM.createRoot(document.getElementById("root")); 2root.render(<h1>Hello, world!</h1>);

補足情報

ブラウザ:google chrome
React ver18

Cocode, holly👏を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

公式のチュートリアルが不親切すぎるんです…。

不具合の理由

  • 普通のJavaScriptって、root.render(<h1>Hello, world!</h1>);みたいに、直接HTMLタグをかいたらエラー起こりますよね?だからいつもは文字列としてタグを書いてますよね。
    • '<h1>いつもの</h1>'
  • test.jsはただのJavaScriptファイルなので、通常通りエラーになります。

対策

  • その書き方ができるのはJSXというファイル形式です。
    • test.jstest.jsxと、拡張子を変更しましょう。
  • そうするとブラウザがJSXを理解できずエラーになってしまいます。
    • ReactのCDNの下に、JSXを→JSに変換してくれるBabelのCDNを読み込みましょう。
    • そしてscriptタグでJSXファイルを読み込む際はtype="text/babel"にします。

html

1<div id="root"></div> 2 3<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> 4<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> 5<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> 6 7<script src="test.jsx" type="text/babel"></script>

投稿2022/11/01 19:03

編集2022/11/01 19:05
Cocode

総合スコア2314

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chay

2022/11/02 04:53

全ての点と点が繋がった気がしました。感動です。 jsxもふんわりとした言葉でしか説明がなく、babelも「新しいコードを古いコードに変換するもの」などの説明しかなく結局なんのための物かを把握できないままでした。 要はjavascript側(JSX側)でHTML要素を扱えるJSXという技術?を使い、そのままではブラウザが読み込めない(新しい書き方だから)からBabelで古い書き方に変換するというのが今の書き方だったりするんですね! チュートリアルにあるcodePenではBabelで変換しなくても読めるから動くし、jsで作られている物をJSXとしても認識できるが為に沢山省略してるんですね。 開発環境のところで躓いていると思ってましたが解決できて良かったのと、ちゃんとした理解が得られた気がして嬉しいです。 ありがとうございます!
chay

2022/11/10 09:15 編集

その後Babelとはコンパイル(厳密にはトランスパイル)するためのコンパイラであることや、JSXの書き方に対応できてるブラウザが少ない事などを知り、React(JSX)を使うならBabelの環境構築から始めないといけないのかと思い込んでいました。 最終的な着地地点としては、BabelやNode.jsのインストールをしない方向で考えていましたので、「オンラインBabelコンパイラ」なるものを使って、都度都度コンパイルして動作確認、開発作業を行っていこうと思います! ※自分と同じ初学者がいるかもしれないので、不要な情報かもですが一応自分の開発していく環境をMEMOしておきます。(異論はあるかもしれませんが何でもかんでもインストールしたくない自分用のやり方です) 基本のファイル構成は以下の3つ index.html test.jsx test.js ・test.jsxファイルにjsx形式の記述をしていきます。 ・Babelオンラインコンパイラを使ってコンパイルする https://babeljs.io/repl ・test.jsにコピー&ペーストする ・test.jsを読み込んでいるhtml側でちゃんと反映されてるか確認する 基本の流れはこんな感じでやっていこうと思います。 自分のような趣味の範囲でするレベルならこれで問題ないと思いますが、業務レベルでReact、JSXを触っていくならBabelのインストールは必須な気がしました。(現場からは以上です)
Cocode

2022/11/02 10:43

丁寧なお礼メッセージをありがとうございます。 励みになります。 ご自身で工夫されて楽しんで学習されているさまが感じられてなんだか嬉しい気持ちになります。 私もまだまだ勉強中の身ですので同じく精進していきたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問