TIL31.Component

4209 ワード
React TIL テキストリンク
既存のhtml構文とjsx構文の違いに注意してください.

部品の形状

  • コンポーネントには、classコンポーネントとfunctionコンポーネントの2種類があります.初期は클래스 컴포넌트に集中した.
  • 反応器はjsx문법を用いた.
    -classの名前は대문자と書かれています.ex) Class App extends Component
    「構成部品を作成するときは、최상위 태그を作成する必要があります.」[分割](Split)を使用すると、DOMに追加ノードを追加することなくサブリストをグループ化できます.これにより、不要なdivタグの生成を防止することができる.
    -htmlのclassはreactでclassNameと書くべきです.
    • //기존의 태그를 사용해서 요소를 감싸준 경우.
<div>
	<p> Hello world</p>
    <p> Hi, Mong</p>
<div>

//Fragment를 사용해서 요소를 감싸준 경우.
<Fragment>
	 <p> Hello world</p>
     <p> Hi, Mong</p>
</Fragment>
    class App extends Component {
  render() { 
    return ( 
     <div className="App">
       <P>Hello, React!</p>
       <img src="www.react.com" />	//<img />의 형태로 작성.
     </div> 
     );
  }
}
    クラスコンポーネントというプログラムを作成し、pタスクとimgラベルを返します.このクラスには、Webブラウザで作成したいコンテンツを表すrenderという方法があります.

    import from/export default

    import React from 'react';react.これは、jsからreactコードを取得することを意味します.export default TOC;変数、関数、オブジェクト、クラスなどのコマンドを出力できます.
    2 D配列と演算(17140)
    白駿17281草