[REACT] What is REACT?

4056 ワード
テキストリンク
今日から反応を学びます!フロントに興味があり、今から楽しみです.反応については、以前、ある公平な人が肩を拭いたように話したことがある.コースに入る前に、彼はすでに複数の種目を行い、多くの面白い成果を創造した.正直、当時は反応の利便性や必要性は感じられませんでした.しかし最近はDOMを利用して複数回ページ操作をした経験があり、ページ管理がもっと便利になればいいなと思いました.よく勉強して、私も自分のプロジェクトを作るつもりです.

👮‍♀️ 反応は何ですか。


PrecosとEchosive CosでHTML、CSS、JavaScriptを学びました.これはウェブページを作るときにその3種類が必要だからです.しかし、この3つだけがホームページを作ることができるわけではありません.今日から、学習の反応も含めて、桜(Angular)、ビュー(Vue)などのフロントエンドライブラリを使用してWebページを作成することもできます.

🚔 Reactが現れた理由


Webページにデータのみを表示する機能があれば、すでに学んだHTML、CSSだけでWebページを実現できます.しかし、最近のページは単にデータを表示するのではなく、ユーザーと多くのやり取りをしています.インタラクティブであればあるほど、多くの「ステータス」が発生し、管理する必要があります.1つや2つのDOMを操作するのは大きな難題ではありませんが、Webページの状態が多ければ多いほど、管理の難しさが大きくなります.そのため、フロントエンドライブラリ、フレーム反応器が現れた.これは,DOMと状態管理を最小限に抑え,機能開発に専念する方法を考慮した結果である.

🚔 コンポーネントに焦点を当てたフロントエンドライブラリ応答


構成部品とは、1つの意味を持つ独立したユニットモジュールを指す.簡単に言えば、私自身のHTMLタグと言えるでしょう.そう聞くと、実は感じられません.しかし、下の画像ファイルを見ればわかります.

同じツイッターウィンドウを作成し、上と下のコードが異なります.HTMLの慣例に従ってコードを書くと、上のコードを書きますが、より意味に集中できるようにtweetというラベルを作ってコードを書き、より直感的に感じます.もちろん、tweetタグは既存のHTMLにはないタグです.でも直感的なので使いやすい感じです.これを素子と言います.反応器は素子単位で開発された.

🚔 反応が始まる前に!


Reactを始める前にもう少し勉強すれば良い内容になりますES 6とJSXです!

🚨 デフォルトではES 6構文のreactが使用されます


ES 6のすべての内容を学ぶ必要はありませんが、次の7点を熟知してから始めればreactをより容易に利用できます.
  • 構造分解割当
  • 展開構文(Spread Operator)
  • 試験パラメータ
  • 障害パラメータ
  • テンプレート文字
  • 矢印関数(Arrow function)
  • サイクル
    • 以上の7つの概念はPrecosからeMuseveへの移行に一度関与したことがある.しかし短い時間もかかり、混乱した状態で、私も知らないうちにいくつかの概念を使いました.今度の機会に整理します.

    🚨 JavaScriptの拡張構文JSX


    JSXの役割は、作成するreactコンポーネントを画面に出力することです.
    reactコンポーネントはJSXに戻る必要があります.JSXを使わずに画面にreactを出力できるコードもありますが、複雑さが増して読みやすさが低下します.しかし、JSXを用いてコードを記述すると、バーベル(Babel)はJSXのコードを変換することができ、タグを非常に簡単に記述し、可読性を向上させることができる.ただし、JSXコードはJavaScriptコードに変換する必要がありますので、使用時にはいくつかのルールを守らなければなりません.
  • バーベル(バーベル)
    入力も出力もJavaScriptコードのコンパイラです.初期のバーベルはES 6コードをES 5コードに変換するコンパイラであった.ラベルを使用して、JSX構文、タイプスクリプトなどの静的タイプ言語、コード圧縮、推奨フェーズの構文を使用できます.
    出典:バーベル-基本的な使い方
    • 1.すべての装飾品を1つの装飾品で包む必要があります.
    左の
  • のように、2つのレイヤーブロックで
    • を記入しないでください.
  • の右側のような領域ブロックに書きます.
    • 2.JavaScriptコードを適用する場合は、{}に記述します.
  • JSX内部には
    • のJavaScriptコードが用意されています
    JSXでnameという変数を使用する場合は、次のように括弧を使用します.
    3.JSX内部でif文は使用できません.
    3つの演算子を使用して
  • の条件付きレンダリングを有効にする
  • 条件演算子
    基本形態:condition?exprIfTrue : exprIfFalse
    JavaScriptでは、if文の略語として使用される3つの被演算子を取ることができる唯一の演算子です.
    conditionがtrueの場合、expr 1の値が返され、逆も同様です.
    • var age = 29;
var canDrinkAlcohol = (age > 19) ? "True, over 19" : "False, under 19";
console.log(canDrinkAlcohol); // "True, over 19"
    4.別名のクラス名を適用する場合は、classではなくclassNameを使用します.
  • ES 6構文にはclassキーワードがあり、重複を避ける
    • Framework7 | Stepper
    Vscodeのデバッグ時にOAuth認証を使用