React

12335 ワード
React はんのう テキストリンク
応答:UIのJavaScriptライブラリの作成

デバイスの開発

  • クラス->関数遷移期間

    • レスポンス環境の構成

    `npx create-react-app`
`npm start`
`npm run build`
    npx serve -s build
    CRAベースの優先パラメータ
    Webpackベースの構築環境を直接構成しない.

    カスタムラベル(構成部品)

    function Header(){
  return <header></header> 
}

function App(){
  return (
    <div>
      <Header></Header>
    </div>
    );
}

export default App;

    prop(プロパティ)

    function Header(props){
  return <header>{props.title}</header> 
}

function App(){
  return (
    <div>
      <Header title="REACT"></Header>
    </div>
    );
}

export default App;
    自動生成されたマーカーについて、
  • 反応は、一意のキー値を付与すべきである.
    • lis.map((e)=>`<li key={e.id}></li>`).join('')

    ≪イベント｜Events｜ldap≫


  • html内のイベント
    <input type="button" onclick="alert('hi')">

  • 反応素子内のイベント
    function Header(props){
  return <header>
    <h1><a href="/" onClick={event=>{
      event.preventDefault();
      props.onChanceMode();
    }}>{props.title}</a></h1>
   </header> 
}

function App(){
  return (
    <div>
      <Header title="REACT" onChangeMode={()=>{
        alert('Header');
      }}></Header>
    </div>
    );
}

    • prop vs state->新しいリターン


  • 構成部品関数を再実行するデータ

  • prop:構成部品を使用する外部ユーザのデータ

  • state:構成部品の内部ユーザを作成するためのデータ
    -イベントが発生すると、データがリフレッシュされて表示されます!
    -ステータス管理:React hooks API(usState)->classなしで関数化!
    ref) Hooks API公式ドキュメント 
         import {useState} from "react"; 

     function App(){
        const [mode,setMode]=useState("WELCOME") //초기값
       //배열을 리턴, 0번째 인덱스: 상태값, 1번째 인덱스: 상태값을 변경하는 함수
       //[읽기, 쓰기 인터페이스] = useState(초기값)
     }

    • 元の値と参照値


    同じデータは再レンダリングされないため、オブジェクトはコピーを作成して値を変更します.
    const [value,setValue] = useState(Object); //object, array

// 원본과 복제본이 다르면(상태값이 변경되면) 함수호출 
newValue={...value} 
newValue=[...value]
setValue(newValue)

    onChange

    <textarea onChange={event=>{
  setTitle(event.target.value)
}}>
</textarea>

    空のラベル

    //여러개 태그를 grouping하는 빈 태그
<></>
  • 生活コード反応講座を見て整理した文章です.
    https://www.youtube.com/watch?v=AoMv0SIjZL8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=1
    • JUNIT 4テスト
    同状態暗号化ライブラリHEAAN効率テスト(2)