Boot. React Day1

1.応答フォルダ構造

reactionの初期フォルダ構造はボイラプレートである.
-ボイラーボード:基本フォルダ、ファイル設定完了

2.輸出入

import:必要なファイルを別のファイルに読み込み

export:ファイルをエクスポートしてロード

待って
importは必要に応じて行うだけですが、exportは最後に行う必要があります.

3.JSX構文

JSXはJavaScriptを拡張した構文です

REACTのHTML.

JSX承諾
1.ラベルを閉じる必要があります.

javaスクリプトをインポートするときにブロックを使用します.

ブロックは{}を表す.

classはclassNameを使用します.

は、要素を返す必要があります.(非2個、非0個)

待って

ブラウザはhtml、css、javascriptしか読めないということではないでしょうか.
->ブラウザに表示されると、JavaScriptに変換されます.

待って
より正確には,これまで真のドキュメントオブジェクトモデル(DOM)に触れてきたが,反応器は仮想DOM(仮想ドーム)を用いた.したがって,反応器はJSX構文を用いてhtmlを用いる.

4. CSS-IN-JS(emotion)

以前の項目はタグにクラス名を付けることでcssを付けた.ただし、変数を宣言してstyleを変数に入れ、直接変数名をタグに入れることができます.

使用例を次に示します.

//태그를 한번에 여닫는 방법은 아래와 같습니다.
<input placeholder = "여기에 입력하세요"/>
//위의 태그에 css속성을 줘보도록 하겠습니다.
<Write placeholder = "여기에 입력하세요"/>
-------css를 담는 변수 부분
const Wirte = styled.input`
width : 200px;
height: 100px;
`

以前はクラスにcssを入力していましたが、emotionは変数にcssを付けてラベルに付けます.

待って
感情には国法がある.
style変数名は大文字です.
変数名を小文字で書くとたまに食べないこともあります
変数名だけでなく、大文字でファイル名を命名する約束があります.