[react]JSXを使用してHTMLページをパブリッシュする

では、返信を使ってHTMLページを開発する方法を見てみましょう.
そのためには、HTMLではなくJSX構文を使用する必要があります.

JSXとは何ですか。

次の変数宣言を参照してください.

const element = <h1>Hello, world!</h1>;

上の奇妙なタグ構文は文字列でもHTMLでもないJSXです.

JSXはJavaScriptを拡張する構文です.

したがって、

はJavaScriptのすべての機能を含む.

JSXで「要素」が作成されます.

JSXを使用する必要はありませんが、JavaScriptコードでUI関連操作を実行する場合、JSXを使用すると視覚的に役立つと考えている人が多いようです.また、エラーと警告メッセージを表示して、行動を支援することもできます.

2. App.開く

反応項目の設定が完了したApp.jsを開きます.

このファイルはホームページとして使用されます.

App.jsにはdivのHTML部分が複数あります.

不要なHTMLコンテンツをすべて削除し、divを1つだけ残してから開始します.

端末を開き、npm run startと入力するとプレビューウィンドウが開きます.

3.HTMLレイアウトの作成

応答環境でHTMLレイアウトを作成する方法もdivを使用してコードを記述します.

CSSはアプリケーションです.cssファイルに入れればいいです.

HTMLをよく見ると、className=""という奇妙な属性があります.

反応器にclass=""を入れたい場合は、className=""を使用します.

4.JSXでデータをバインドする

データバインディングは、JavaScriptデータをHTMLに挿入する操作です.

最近,フロントエンドWebアプリケーション開発では,データのバインドが必要な作業が多いが,容易に応答できる.

次の例では、dataという変数を作成します.しかし、このdata変数をdivタグに挿入して見せたい場合はどうすればいいのでしょうか.
JavaScript構文を使用する場合は、このように長いドキュメントを作成します.
しかし、反応器はデータを挿入しやすい.

データをバインドする変数名をカッコに含めるだけです.
それではプレビューの時が出力されます.
簡単パ~?
変数名に加えて、関数名またはその他の名前を挿入することもできます.
また、href、id、className、srcなど、さまざまなHTMLプロパティにデータをバインドすることもできます.
++スタイルをHTMLに直接挿入したい場合は
JSXをオブジェクトに置き換えて入れる必要があります.これで間違いない!

<div style={ {color : 'blue', fontSize : '30px'} }> 텍스트 </div>

こう書くべきだ.

{属性名:[属性値]}このように配置すればよい.

属性名には-(スラッシュ)記号を含めることはできません.

すべての単語は大文字ではなく一緒に使用する必要があります.

前の文字を大文字で貼り付けます.

キャメル記号:camelCase