2021.08.31/コードキャンプ2日目

1199 ワード
コードセット TIL テキストリンク

人のものを取るとき。


糸の取り付け:必要なモジュールをダウンロード(node modules)

コンポーネントの作成方法

  • class
  • State
    • document.getelementById~などの方法を使うclassとは違います
    stateがJSとHTMLを自動的に接続することで効率化

    関数による機能の実現


    React-Hooks:クラスと同じ機能を関数で実行できます
    ex) useState, useEffect
    ►const[state,setState]=useState(「初期値」)
    ※ユーザ状態はreactからインポートする必要がある
    state:変数名
    setState:存在時に変数に値を割り当てる
    const [email, setEmail] = useState()
    const [password, setPassword] = useState()
    const [emailError, setEmailError] = useState()
    const [passwordError, setPasswordError] = useState()

    function onChangeEmail(event) {
        setEmail(event.target.value)
    }

    function onChangePassword(event) {
        setPassword(event.target.value)
    }

    function check() {

        if(email === "" || !email.includes("@")){
            setEmailError("이메일 주소를 다시 확인해주세요.")
        }

        if(password === "" || password.length < 8) {
            setPasswordError("8~16자의 영문, 숫자, 특수문자만 사용 가능합니다.")
        }

    }

    CSS実施時のTip。

  • から、marging-topを使用してこれらの要素を下に実装することは、現在の開発者がよく使用する方法
    • である.
    値を保存して出力
    TIL 19. DarkMode