JSX

反応器で素子の形状を定義するときに使用する構文.
一見htmlっぽく見えますが、実はJavaScript…?
どうしよう.Babelを使用するとxml形式のコードをJavaScriptに変換できます.

Babel

JavaScriptコンパイラです.入力はJavaScriptコード、出力もJavaScriptコードです.ブラウザは最新バージョンのJavaScript構文を理解していないため、babelはブラウザが理解できる構文に変換します.

うん。本当ですか。

信じないなら自分で実習しなさい.次のリンクに進むと、babelがxmlコードをJavaScriptに変換する方法が表示されます.
babel try it out
リンクに入ると下の画像と同じ画面が表示され、分割画面の左側にxmlコードが入力され、右側にJavaScriptに変換された画面が表示されます.

たとえば、xmlコードを作成して「hello react」を出力します.

(
  <div>
    <b>Hello,</b> <span>React</span>
    </div>
)

次のコードが表示されます.

"use strict";

/*#__PURE__*/
React.createElement("div", null,
/*#__PURE__*/React.createElement("b", null, "Hello,"), " ", 
/*#__PURE__*/React.createElement("span", null, "React"));

React.creatElementでコンポーネントを作成すると、作成するたびに使用するのは不便です.しかしbabelは私のためにこの不便なことをしています.しかし、babelには勝手に書くのではなく、書くルールが存在する.

Babelルール

①ラベルは閉じている必要があります。

当たり前のことと言える.タグの宣言を完了するには、タグを完全に閉じる必要がありますが、タグが完了していない場合は変換コンパイルがエラーになります.

②2つ以上のラベルは1つのラベルに包まなければならない。

<div>
      <Hello/>
      <Hello/>
      <Hello/>
 </div>

divというタグの中にHelloというタグが3つありますが、ここでdivを外して運転するとエラーが発生します.

ラベルを保護するためにdivを作成するのは少し汚いと思います.
ラベルは<></>で包むことができます.

 <>
      <Hello/>
      <Hello/>
      <Hello/>
   </>

※returnで下のラベルを括弧で丸めていますが、実はこの括弧は可読性を高めるために存在し、なくてもコードは正常に動作します.

内部でのJAVASCRITT値の使用

では、jsx内部でJavaScript値を使用する方法を見てみましょう.

import React from "react";
import Hello from "./Hello";
function App() {
  const name ='react'
  return (
   
   <>
    {name}
      <Hello/>
      <Hello/>
      <Hello/>
   </>
    
  );
}

export default App;

JavaScriptで変数nameを宣言し、その値をhtmlに表示する場合は、returnの内部に変数の名前を括弧で囲む必要があります.

内部でCSSを使う

import React from "react";
import Hello from "./Hello";
function App() {
  const name ='react'
  const style = {
    backgroundColor: 'black',
    color:'aqua',
    fontSize: 24,
    padding: '1rem'
  }
  return (
   
   <>
    <div style = {style}>{name}</div>
      <Hello/>
      <Hello/>
      <Hello/>
   </>
    
  );
}

export default App;

styleという名前のオブジェクトを作成し、htmlで使用されるclass=""方式ではなく、必要な属性を作成する必要があります.background-colorのように-がある場合、backgroundColorはcamelcaseで記述されるべきである.
自分の希望する属性を作成した後、そのコンポーネントラベルにstyle={style}と書くと、自分の希望するスタイルが適用されていることがわかります.

外部CSSを読み込み使用

App.cssという名前のファイルを作成し、次のコードを作成して保存します.

.gray-box {
  background: gray;
  width: 64px;
  height: 64px;
}

アプリもありますjsファイルにimport './App.css';の構文を記述します.これは、「App.cssの要素を読み込み、使用する」ことを意味します.だから私はApp.cssの中にいますgray-boxを使用するには、必要なラベルにclassName = "gray-box"と記入します.

  return (
   
   <>
    <div style = {style}>{name}</div>
      <Hello/>
      <Hello/>
      <Hello/>
      <div className="gray-box"></div>
   </>
    
  );

コメント

通常は/**/を直接使用しますが、reactの場合はここにカッコを付ける必要があります.追加しないとコメントとして認識されないため、コンテンツは直接画面に出力されます.
ex{/どんな内容/}
タグ内部に注釈を記述する場合、//を使用して注釈を記述することができる.

<Hello 
	//무슨무슨 컴퍼넌트라는 설명
/>

整理する

Babelルール:ラベルは閉じている必要があります.2つ以上のラベルは異なるラベルで包まなければなりません.

内部でJavascriptを使用する:変数を宣言しreturn'内部にカッコを付けて記述します.

CSSの内部使用:styleという名前のオブジェクトを作成し、必要なプロパティを作成し、適用するコンポーネントラベルにstyle={style}を作成します.

外部読み込みCSS使用:cssファイルを作成します.jsファイルにimport './무슨무슨.css';という構文を作成します.
.cssのクラスを使用するには、必要なラベルにclassName = "클래스"と記入します.

注釈の使用:{/*무슨무슨 내용*/}、タグ内に注釈を作成する場合は//