JSX?

reactには空のシェルhtmlが1つしかありませんが、srcフォルダのappです.jsファイルを表示する場合は、関数appなどの関数で返されるhtmlラベルのような子供を使ってビューを飾ることができます.
この方式はHTML in JSと呼ばれています.
それから私たちはJSXと呼んで、reactで使う文法を指します.

SPA (Single Page Aplication)

reactを作成するときに空殻htmlがあります.
さまざまな関数型コンポーネントを作成し、空白のhtmlにアップロードしてページを整理します.これはスパです.

JSX

reactにはhtmlファイルが1つしか存在しません.(パブリックフォルダの下のindex.html)
ではRECTではどのように風景を描きますか?
JSX構文を使用してreact要素を作成し、DOMで描画をレンダリングします.
例を挙げる

<div>
	<h1>안녕하세요!</h1>
    	<p>저는 이제 막 프로그래밍을 공부하기 시작했습니다.<P>
</div>

上記htmlは.jsファイルには書けません.
だから出てきたのはJSX.
JavaScriptにhtmlタグなどの寸法を追加して、ビュー(UI)操作を容易にすることができます.

JSXルール

1.ラベルは必ず閉じてください。

htmlで、終了フラグのないinput、spanなどを使用する場合は、フラグも閉じなければなりません.
閉じる必要がない場合は、タグの最後に/を追加してみます.
では、閉じたタグがなくても、JSX構文に違反することはありません.<input />

2.アクセサリーを1つ返却しなければなりません。

クラスコンポーネントはrender関数で返されます.
関数型要素はapp関数のreturnを介してセグメントを返さなければなりません.

return (
      <div className="App">
        
      </div>
)

3.reactでJavaScriptの値、map、3つの演算子などのJavaScript構文をJSXに書き込む場合は{}でインポートできます。

<MyList list={this.state.list} />
혹은
<p>{number > 10? number + '은 10보다 크다' : number + '은 10보다 작다'}</p>

4.HTMLがclassを使用する場合、JSXはclassNameを使用してcssを提供します。

<div className='App'>

5.内線で造形するとき。

html

<p style="color: orange; font-size: 20px;">orage</p>

JSX

<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

あるいは変数として入れることもできます.

function App() {
	const styles = { color: 'orange', fontSize: '20px'
};
	return (
		<div className="App">
			<p style={styles}>orange</p> 
        </div>
); }