React

目標を設定
はんのうきほん

要素ユニットを開発する利点が理解できる.

JSXのように宣言形式を用いた文法の利点が理解できる.

Reactの重要な概念と使い方

関数要素およびクラス要素の作成方法および相違は理解できる.

propsの特徴と規則を理解することができます.

propsとstateの違いは理解できます.

状態変更方法及びその理由は理解できる.

イベントを処理できます.

動作原理は、

ライフサイクルで理解できます.

Reactコンポーネント間のデータストリームとインタラクションの原理を理解します.

etc.

React公式ドキュメントを使用できます.

Create React appを構成するbableとwebpackの目的と必要性を理解する.

構成部品
構成部品...構成部品構成部品は何ですか?
個別ユニットモジュール
モジュール?オブジェクト?そう言ってもいいです.
コンポーネントはreact->jsx構文=javascript+htmlだと思います
そうすると、見える視覚的なものが強くなります.
同時に,素子は2つの強力な特性として理解できる.DOMの角度から
装飾ブロック、divブロックですが、そこに機能的な要素が集まっています.
もう一度考えてみましょう.
内蔵機能のdivブロックをそう考えることができます.
実際に存在するオブジェクトブロックをhtmlで考える.
正確にはなぜ素子を使うのですか?
直感的で、繰り返し使用可能で、解決や処理が必要な部分、ヘンドリンなどが入っているからです.
カプセル化されていると考えられます.
だから.
reactには、構成部品を宣言する2つの方法があります.
class方式function方式->これを見るだけでオブジェクト向けにプログラミングするときとあまり差はありませんか?
宣言コンポーネント
class素子

//class
//참고로 React.Component나 Component를 상속한거나 같다. import해온 방식에따라서 달라지기때문
class app extends React.Component{
  render(){
   	return(
    	<div>Hello world!</div> 
    )
  }
}

関数構成部品
私は関数の方法でたくさん使いました.(最初はそう勉強していたので)

//function
function app(){
 	return (
    	<div>Hello world!</div> 
    )
}

同じ構成部品を上下に作成します.
もっと説明が必要だと思います.
reactは誰かが作成したフレームワークです.
使用方法は既に文書化されている.
どうしてそう書くの?もし疑問があれば.
1+1はなぜ2ですか?同じように
私のを作りたいならタイプして、このように使えばいいので、受け入れましょう.
△原理については、あとで探せばいい.
-バベルという友達がjsxを->jsコードに変換します.
構成部品の規則
componentには重要なルールがあります.
それは.
render()/関数式式ではreturnは内部でrenderを実行します.
内部に戻る
DOMは1つしか表示できません.
すなわち、返されるのは<>ラベルであるべきである.
だから<Fragment></Fragment>に縛られた人がいます
このタグのShorthand式は次のとおりです.<></>と書くことができます.
简単なDIVであるいは部品の設計をします.
レンダリングを使用している場合は、実際にレンダリングするときにこの部分はありません.
ES 6とJSX
JSXってなんですかさっきから
さっきお話ししました.
JavaScriptとhtmlの組み合わせです.
htmlラベルの真ん中に{}を開き、js式を書くことができます.△検索式はjs文法と少し違いますが、代表的だと思うならif文は書けません.なぜですか.探してみてください.
したがって、通常、ブランチ処理には3つの演算子が使用されます.
また、jsxは基本的にES 6によって親密に使用されている.
-分割
-電子オペレータ
-引張りパラメータ
-障害パラメータ
-テンプレート共通
-矢印関数
-for-of-loop
import、export構文
ES 6文法ですが.
後で知ったことを知らないのは私の状況のようです.import 함수 또는 컴포넌트 또는 객체 from '경로'もし本当にvscodeで拡張を触ったら...
一度しっかり打てたら.
importは特に記憶がありません
文法自体が理解しなければならないだけです.
特定のモジュールをロードすると、どこにあるかを感じます.
ノードの中のrequireを考えればもっと理解できる
exportにはもう一つ考えなければならないことがあります.
すなわち
他の場所でそう呼んであげます.このようにあだ名を付けてエクスポートすることができます.
あなた自身に名前があるのではないでしょうか.そう書いてください.

function Box(){
	return(
    	<div>박스입니다.</div>
    )
}


export default Box;

import Box from "./Box.js" ;//이런식이 된다.
//...

export const firebaseInstance = firebase;
export const authService = firebase.auth();
export const dbService = firebase.firestore();

私は以前firebaseを書いたときにコードを削除しました.私はこのように特定のモジュールブロックを受け取り、私が使うものを分けて名前をつけました.
それを送ればいいです.
全部私が書いたので、インスタンスを明確に作成して使います.
認証サービスとは独立しています.
dbサービスセクションの分離
Props
フロプスって何?
反応は下に流れていると言われています.
明確なツリー構造を備えています.
根元から.
内部は、コンポーネントがサブアイテムを保持し続ける構造で構成されています.
では
データの転送方法
子供に伝える最も簡単な方法を道具にすればいい.
あいつのデータ転送.これが問題です.
1段2段でまあまあです.
propsにも限界がある.
50個の構成部品のうち...もしあったら.
道具をずっと置くのが常識ですか?
5回超えてもそうじゃないと思う
実はこの部分はちょっと難しいですが、道具は1、2本の足に適しています.
社説が長くなった.
すなわち、サブコンポーネントにデータを渡すことができる.
class素子とfunction素子.
class素子のprops

//class
class Box extends React.Component{
  constructor(props){ //여기에 프롭스를 인자로 받는다.
    super(props) // react.component에서 상속받기때문에 props를 한번 명시적으로 써주는게좋다.
    // 물론 리액트가 똑똑해서 잘 해주긴하지만. 확실하게하는게 좋다.
  }
  render(){
    return (
      <div>
      	<Item item="아이템">이것은Children</Item>
      </div>
    )
  }
}
class Item extends React.Component{
  constructor(props){
    super(props) // 위와 마찬가지
  }
  render(){
    return(
      <>
      	<div>{this.props.item}</div>
        <div>{this.props.children}</div>
      </>
    )
  }
}

冗長に書く.
結果は.

<div>
  	<div>아이템</div>
  	<div>이것은Children</div>
</div>

<></>セグメントはありません.本当にドラゴンですね.テーブルによく使われているようですが...
functionから見ると
function素子のprops

//function
function Box(){
    return (
      <div>
      	<Item item="아이템">이것은Children</Item>
      </div>
    )
}
function Item(props){
    return(
      <>
      	<div>{props.item}</div>
        <div>{props.children}</div>
      </>
    )
}

結果は同じです.
しかし、もっと短くて直感的に見えます.
State
Stateって何?
簡単に考えて、素子で使える変数!
しかし、この変数は少し特別です.
変化を検出
もう一度render()を注文!
これは反応器の最も興奮させる機能です
データの変化を検出しますか?
DOMマルチサブノードを削除するたびに.
データを持ってクリエートを繰り返して….あら.
こんな反応でよかった.
だからどう書きますか?
2種類あります.
まだHookについての情報がないので、後で説明します.

系素子stateを用いる方法

関数素子にstateを用いる方法

class構成部品のstate

//class
class Box extends React.Component{
  constructor(props){ // 프롭스없는데 왜 이거써요? 명시적으로 써주는게 좋다. 
    super(props)
    this.state = {count:1};
  }
  render(){
  	return(
    	<div>
        {this.state.count}
      	</div>
    )
  }
}

国を変える方法を使うべきだ.this.setState({count:2})関数構成部品のstate

function Box(){
  let [count,setCount] = useState(1);  //초기값을 준다.
  // hook인데 쉽게생각하면 카운터에는 값 , 셋카운터에는 그걸 변경하는 함수를 준다
  	return(
    	<div>
        	{state.count}
      	</div>
    )
}

setCount(2)ここでsetCount(2)はcountを2に変更します.
さらに完了
cssクラスを付与するように、jsxはclass->es 6構文にclassを重畳できない理由
したがってclassNameという名前のcamel caseを使用してcssクラスを付与できます.
あとで
onClick={ハンドラ}
onChange={Handler}
Handlerの最初のパラメータはeventパラメータです.
event.target.覚えてろよ
終わります.