React Basic : JSX

前回の記事で複雑な要素を作成するために書かれたコードを覚えていますか?JSXを使ってめちゃくちゃなコードを書くと、仕事がよりきれいになります.

コンパイルとBabel

JavaScriptコードを真剣に作成します.ライブラリを書いたり、私たちが掘っているReactのようなフレームワークを書いたり、新しい文法を書いたり...
要するに,このように記述されたコードは実際にはブラウザに直接送信されない.実際には、ブラウザごとに異なるバージョンのJavaScriptを使用できます.
悪名高いIEはJavaScriptの発展に伴う様々な新技術を全くサポートしていない.前回のレッスンで使用した矢印関数IEも聞き取れませんでした.

この時私たちはBabyを使っていましたBabelはJavaScript用の変換コンパイラで、最新バージョンのJSコードを以前のバージョンと互換性のあるコードに変換するツールです.
冒頭でBabelに言及したのは、JSXコードもBabelによってコンパイルされ、実際に実行可能なコードに変換されているからである.
したがって、JSX構文を作成しながら練習するには、Babelを使用するためにドキュメントにデフォルト設定を設定する必要があります.

デフォルトのBabel設定

https://babeljs.io/setup#installation
これらのリンクでは、Babyのインストールと使用方法について詳しく説明しています.
Reactと同様に、直接インストールして使用することもできますが、CDN形式を使ってみます.

// Babel CDN Link
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
// 사용자 지정 script
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>

次のscriptラベルに示すように、CDNセクションをhtmlに含め、type=「text/babel」をbabelにコンパイルするスクリプトラベルに含めてください.
この手順が完了したら、JSXを使用する準備ができています.

JSXの作成

今日の主人公JSXの文法は何ですか?JSXはJavaScript傾向の略で、コンポーネント構成を簡略化するために作成された構文です.
前回の時間に感じたかな?createElementだけで重複するタグを作成したい場合は、どのくらい複雑ですか.
したがって、JSXは基本的に以下の形式を有する.

function App(){
	return (
    	<div>
          Hello <b>react</b>
        </div>
    );
}

直感的に見ると、HTMLのタグ形式は変わらない.
これにより、作成したコードの長さが減少し、構造も理解しやすくなり、コードの可読性も大幅に向上します.
前回記事で作成したコードもJSXに変更しましょう

function App(){
	return (
    	<section>
      	  <div>
      	    <h1>Hello</h1>
            <ul>
      	      <li>React1</li>
              <li>React2</li>
            </ul>
          </div>
        </section>
    );
}

非常に簡潔で、ドキュメントの構造も理解しやすいです.今は書く意味が感じられる
JSXは、これらの可読性の問題に加えて、Babelでコンパイルすると構文エラーが発見されやすいため、多くの点で役立ちます.

JSX構文

JSXが私たちにとって非常に役に立つツールになることを確認したばかりです.次に、実際のプロジェクトでJSXを使用するときに注意しなければならない文法規則について説明します.

ラベルを閉じる
JSXはクローズマークに非常に敏感です.HTMLではたまにラベルエラーが発生しますが、JSXはそうではありません.
特に、サブエレメントがある場合は閉じたタグを付ける必要があります.サブエレメントがない場合は、開いて閉じる必要があります.

<p>Blah Blah</p>
<br />

一番上の要素は一つしかありません!
JSXに変換した例では、トップレベルの要素がsectionであることがわかります.このセクションと同じレベルで1つ以上の要素を作成する場合、JSXはこれらの要素を厳密に指定します.
言い換えれば、要素内の複数の要素は、1つの要素のみによって囲まれなければならない.これは仮想DOMにおいて素子変化を有効に検出するためである.
また、トップレベルの要素を返す場合は、()で包む必要があります.

JavaScript式
JSXでは{}JavaScript式を作成できます.次のコードブロックを参照してください.

function App() {
	const name = 'Park'
    return(
    	<div>
      	  <h1>Hi! {name}</h1>
        </div>
    )
}

if文の使用を禁止
JSXではif文は使用できません.条件文を使用する場合は、JSX構文以外のコードを記述するか、{}で3つの演算子を使用する必要があります.

classではなくclassNameを使用
HTMLタグにclassを入れるのに慣れていますよね?JSXでは、classではなくclassNameに入れる必要があります.N大文字です!

終了時..。

本日、React開発で頻繁に使用されるJSXについて知りました.実际の反応开発に近づいてきた気がして有意义
今日はJSXについて概念的に議論しましたが、深く議論すれば、JSXを使用するコンポーネントに触れることが多くなるかもしれません.
次に、Reactのpropsについて詳しく説明します.