なぜReactを使うのか、文法

反応の良い方法と簡単な文法を書く

learn 1:

反応器で使用されるjsx構文はタグを減らすことができる.

learn 2:

つまり、データバインドは簡単です!document.getElementById.innerHTML(‘’)のように複雑にオブジェクトにアクセスする必要はありません.{ 변수명 }と{ function() }と呼ぶことができます.
つまり、{ 변수명, 함수 등 }で表すことができます.

learn 3:

jsx構文では、src、id、hrefのプロパティに{ 변수명, 함수 등 }を入れることができます.
たとえば、画像をインポートしようとすると、

import logo from ‘./logo.svg’
<img src = { logo } />

learn 4:

JSXにstyle属性を挿入する場合は、object形式で括弧に入れる必要があります.
style={objectデータ型}
たとえば< div style={{ color : ‘blue’, fontSize : ’30px’ }}>여기는 텍스트</div>=>camelCaseとして使用します.

learn 5:

Learn 2が変数(データストレージ)としてデータバインディングを使用する場合
今回はstateで保管しましょう.
反応器にデータを格納する2つの方法.
1.変数に入れる
2.state(destructuring)を入れる

オーダー

App.jsの上部に次のコードを追加します.import React, { useState } from ‘react'; useState(‘강남 마카롱 맛집’); [a, b]実行時に2つのデータが残っています.

let [a,b] = useState(’강남 마카롱 맛집’);
var [a, b] = [10, 100];

array、オブジェクトの資料を簡単に変数に入れたい場合は

let [subject, changeSubject] = useState('예쁜 루프탑 카페 추천')

このように宣言し、{ subject }のように実行すればよい.
国
1.変数の代わりに書き込まれるデータ記憶領域
2.usState()を使用して作成する必要があります.
3.文字、数字、配列、オブジェクトの保存が可能

et [subject, changeSubject] = useState('예쁜 루프탑 카페 추천’, ’선릉 점심 추천 장소’)
{ subject[0] }
//'예쁜 루프탑 카페 추천'

stateにデータを保存する理由は、次のとおりです.
Webをappのように動かしたいです.
subjectのようなデータは変更時に変更される可能性があり、craは自動的に再レンダリングされます.変数を変更しても自動的に再レンダリングされませんが、stateの最大の特徴はリフレッシュしなくても自動的にレンダリングされることです.
=>つまり、スムーズなサイトが使えるということです.
あとはすべてをstateにして保存すればいい!🙆‍♀️
頻繁に変えない(めったに変えない)ものはハードコーディングしても大丈夫ですが、頻繁に変えて、重要なデータは変数ではなく、状態で格納します.