ブログの内容は次のとおりです.
Programming with Mosh React Tutorial for Beginners [React js]
勉強の過程で書いたものです.

n/a.ターゲット

上記のカートをカリキュラムに従って作成します.

Your First React Componetnt

import React, { Component} from 'react'

以上のコードは反応をインポートします.反応を小悪魔反応に変えるcreatelElement()が使用可能で、jsxが使用可能です.Componentは将来使用するスーパー親です.(React.component)

import ReactDOM from 'react-dom'

render()はこのようにインポートして使用できます.RealtDomは、反応をWebサイトに出力するのに役立つモデルです.

ReactDOM.render(element, documnet.getElmentById('root'))

最初の仕様パラメータを使用して、DOM要素に書き込まれた2番目のパラメータを画面に表示します.プリファレンスを表示する場合は、エンティティをHTMLにリンクして画面を作成できます.
render()は、ステータスを変更するたびに、仮想ドメインが古いドメインの領域と比較され、変更が理解され、すぐに反映されることを示します.

React.createElement()

createElement()は、パラメータとしてのタイプに基づいてcreactセグメントを作成し、返します.jsx構文で記述されたコードはreateElement()を自動的に呼び出すので、あまり気にする必要はありません.これはjsxを使用する利点です.
しかし、私たちは注意しなければならないところがあります.

React.createElement(
  type,
  [props],
  [...children]
)

createElement()の基礎文法.typeは、文字列や素子などの様々なパラメータであってもよいが、1つのパラメータしか受け入れられない.だから通常divやfragmentを使って解決します.

 <React.Fragment>
                <h1>Hello World</h1>
                <button>Increment</button>
 </React.Fragment>

import React, { Component, Fragment } from 'react';

Fragmentのインポート

<Fragment></Fragment>

形式として使用できます.

Embedding Expressions

return()を見てください

return //

return(
//)

反応器ではretrun形状が長くなり、通常は下図に示す形状となる.既定では、()に囲まれています.
jsx式はjavascriptをすべて反応器の{}に囲む.
jsx式はJavaScriptでオブジェクトとして認識され、パラメータとして関数に渡すこともjsx式として返すこともできます.

styles = {
fontSize: 10,
fontWeight: "bold"
};

jsxはpxを「10 px」と貼り付けるので省略できます

Rendering Lists

Reactで、キーを使用して、各要素が変更、追加、または削除されたかどうかを確認します.したがって、リスト内の各要素をユニークに区別し、割り当てられたキー値を一定に保つ必要があります.

state = {
        count : 1,  
        tags: ["tag1", "tag2", "tag3"]     
    };

stateにtagsを追加しましょう.最良の方法は、リスト内のアイテムのIDをキーとして使用することです.

<ul>{this.state.tags.map(tag => <li>{tag}</li>)}</ul>

前述したように、鍵がないので警告を出す.だからケイをずっと使うんだ

<ul>{this.state.tags.map(tag => <li key={tag} >{tag}</li>)}</ul>

リスト内の項目にIDがない場合は、リスト内の位置(index)をキーワードとして使用できます.キーワードとしてインデックスを使用することは、リストの追加や削除時にリストの順序を変更しない方法です.上ではtags自体が唯一の値であり、keyを追加しても問題はありません.
参考資料
https://ko.reactjs.org/docs/getting-started.html
https://www.youtube.com/watch?v=Ke90Tje7VS0&t=916s