[React] 1. Intro

学習目標

は、今日多くのreactが使用されていることをどのような流れで説明することができますか.

Reactとは何かを定義できます.

CRAをインストールし、フォルダとファイルがどのように構成されているかを説明できます.

コンポーネントの概念および種類を説明することができる.

JSXを定義し、その基本的な特性を説明できます.

の既存のWestagramをReactに変換して、画面によりよく表示できます.

Mentor's Guide

なぜ反応の長所は何なのか、短所は何なのか.

構成部品を分割する方法.

JSXの特徴をまとめる

以上のことが終わったら、一つの質問として答えましょう.

1-1 Intro

Q.なぜreactを使うのか?
A.Westagramのコメント付加機能は、複数のDOMに直接アクセスするだけで簡単な機能を実現し、市販の複数のアプリケーションのすべての機能を実現するには、DOMオブジェクトにより直接アクセスする必要があり、管理とメンテナンスがより便利になります.
->生産性&大量データ管理とコードメンテナンス
Q.反応を定義する?
A.Facebookが開発・管理するUIを作成するJavaScriptライブラリ.ReactはMVCアーキテクチャとは異なり、ビューのみを管理します.
Q.なぜReactを使うのですか?
A.UI自動更新<-仮想ドームが使用されているため<-仮想ドーム:以前のUIステータスをメモリに保持することで、変更するUIの最小セットを計算する技術

1-2 CRA Settings

Q.CRAをインストールした後、フォルダとファイルはどのように構成されていますか?
A.
Folder.node_modules
構成

CRAのすべてのパケットソースコードを含むフォルダ

Folder.public

index.html

<div id = "root"></div>

images-imageファイル管理(ただし、実行中のJSファイルとは場所が異なる場合があるため、srcフォルダに移動する必要があります)

data-mock dataを管理しますか?->後でskipを勉強します

Folder.src

index.js

応答の開始点

ReactDOM.render( <App /> , document.getElementById('root') )

ReactDOM.render関数には2つのパラメータがあります

の最初のパラメータは、画面に表示する要素

である.

の2番目のパラメータは、画面に表示する素子位置

である.

勝手に名前を修正すると大変なことになります(ハハハを自分で体験したことがありますが、普通に仕事ができるものは何もありません.頭も勝手にぶつかって勉強することはできません)

App.js

現在の画面に表示する初期素子

Westagram稼働時

gitignore
package.json

基本パッケージのほか、他のライブラリ

もインストールされています.

パッケージ情報を記録するファイル/セッションでは、リストに例えられる.

Dependencies(独立性):応答を使用するすべてのパッケージのリスト、検証可能なバージョン/実際のコードがnode modulesフォルダに存在します.これは、チームプロジェクトのタイミングで同じ初期設定が行われているためです.node modulesのような重いファイルをアップロードすると、すべてのチームメンバーが1つのレコードを受け取り、レコードにはバージョンのみがインストールされており、作業が容易になります.
README.md

1-3 Component & JSX

component:リサイクル可能なUI構成ユニット

複数のエレメントを分割できますが、このページから見ると重複するエレメントはarticleのみです.この場合、articleをコンポーネントにして再利用することができます.これは便利です.
特長

回収可能

コードのメンテナンスを容易にする

コードの可読性が良い

2479172要素は他の要素を含むことができます...?

構成部品タイプ

Class Component

import React from 'react'

class Component extends React.Component {
    constructor(){
        super()
    }
    
    render(){
        return(
        	<>
        	</>
        )
    }
}

export default Component

クラス構成部品を宣言する場合は、()を表示して返さなければなりません.

Functional Component

import React from 'react'

class Component = () => {
    render(){
        return(
        	<>
            	<div>흐에!</div>
            </>
        )
    }
}

export default Component

JSX
ジェネリック構成部品には、前述のrender関数が必要であり、ここに表示する必要があるJSXを返さなければなりません.
△どうしてJSXを習うのですか.

定義

:JavaScript Syntax拡張構文

JSXで記述するコードは、バベルでJavaScript形式で記述するコード

に置き換えられる.

の利点

HTMLタグはそのままで、

を熟知している.

HTML+JavaScriptの要件を満たす