# ⚪️React を基礎から理解する
# 🔶 React API とは
React API とは、React が提供する機能のことです。React API は、React のコンポーネントを作成するために必要な機能を提供します。
# 🔶 React API の種類
React API には、以下の種類があります。
React.createElement()
React.createElement(type, [props], [...children])- 用来创建 React 元素
- React の要素は、一度作成すると変更することができず、新しい要素を作成してレンダリングすることしかできない。
ReactDOM.createRoot()
createRoot(container[, options])- 用来创建 React 的根容器，容器用来放置 React 元素
ReactDOM.render()
root.render(element)- 用来将 React 元素渲染到根元素中
- 根元素中所有的内容都会被删除，被 React 元素所替换
- 当重复调用 render()时，React 会将两次的渲染结果进行比较，
- 它会确保只修改那些发生变化的元素，对 DOM 做最少的修改
# ▫️ React.createElement
React 要素を作成するためのメソッドで、DOM 要素ではなく React 要素を生成します。
DOM 要素は最終的にページに表示される要素であり、React 要素は実際に操作する要素です。
両者は仮想 DOM を介して操作され、相互に関連しています。
原則として、React 要素を操作する際には、原生の DOM 要素を直接操作せず、React の仮想 DOM 構造を壊さないように心がけるべきです。
React.createElement関数の戻り値は React 要素であり、React 内の仮想 DOM 構造において操作されます。React でのイベントはキャメルケースで表記されるべきであり、例えば、onClick、onMouseOver、onMouseOut などがあります。
React要素は、type、props、children の 3 つのプロパティを持つオブジェクトである。- type: string | function
- props: object
- children: ReactElement | string | number
- return: ReactElement
要素の命名規則：
- 要素の名前: HTML タグは小文字である必要があり、React では大文字はコンポーネントとして解釈されます。
- 要素のプロパティ: オブジェクトで、キーがプロパティの名前、値がプロパティの値です。
- 要素の子要素: 1 つ以上の子要素で、テキスト、または要素、または要素の配列が可能です。
注意：React において、イベントの設定と属性の設定は異なります。イベントの設定時には、属性名をキャメルケースに変更する必要があります。例えば、
onClickはonclickではなくonClickとなります。これは、ネイティブイベントと React イベントを区別するためであり、そのため React イベントの属性名はキャメルケースである必要があります。React において、
onClickはコードを受け取るのではなく、関数を受け取ります。これは、onClickがトリガーされたときに関数が実行されることを意味します。onClick={() => alert("click me")}のように書くと、レンダリング時に即座に実行されず、クリック時にのみ実行されます。onClick={() => alert("click me")}のように直接書くと、onClickにはalert("click me")の戻り値が代入され、レンダリング時に実行されてしまいます。これを避け、クリック時に実行されるようにするためには、アロー関数を使用することが適切です。const div = React.createElement('div', {}, button)可以在子元素裡直接放 button 進去
<div id="root"></div>;
.....
//create a react element
const button = react.createElement("button", {
id: "btn",
type:'button',
className:'btn',
onClick=()=>{alert('clicked')}
}, "Click me");
//get the root element, 就是把dom元素轉換成react裏的根元素， 這樣才能render, 這裏的rootElement就是一個dom元素
const rootElement = document.getElementById("root");
//render the react element into the root element
ReactDOM.render(button, rootElement);
# ▫️ReactDOM.createRoot
ReactDOM.createRoot関数は、React の根要素を作成するための関数です。
# ▫️ReactDOM.render
ReactDOM.render関数は、React 要素をレンダリングするための関数です。