今日は公休日なのでジムが閉まっていて、家で勉強している間に同期の大熙に出会って、喫茶店で勉強していました.
今、反応を始める前に、自分の概念を簡単に整理してみましょう.
もちろん理解できませんが、整理して繰り返し見ると理解できます.

React

reactionはJavascriptライブラリです.ライブラリとは、プログラムを作成する際に必要な機能です.再利用が必要な機能により、コードを必要な場所で呼び出して重複記述を排除できます.制作には厳格なルールは存在せず、制作意図に従って作成すればよい.

JSX

JavaScriptコードの内部にHTML構文を書き込みます!
変数に保存したり、関数のパラメータに渡したりできます.

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>고기</li>,
    animal: <li>cat</li>,
    hobby: <li>programming</li>
};

JSX attribute

タグに属性を指定する場合は、常に二重引用符("")を使用します.

const hi = <input readOnly={true} />;

const myFavorite = {
    food: <li>고기</li>,
    animal: <li>cat</li>,
    hobby: <li className="list-item">programming</li>
}

JSXでは任意のタグにself closting tagを使用できることに注意してください.

ネストJSX(必須)

カッコ

を使用(ネストされた要素は!)

const good = (
<div>
   <p>Hi</p>
</div>    
)

は常に1つのラベルで

を開始する.

const wrong = (
<p>list1</p>
<p>list2</p>
)

const right = (
<div>
    <p>list1</p>
    <p>list2</p>
</div>
)

Rendering

html要素やreact要素などのコードを表示します.
画面でreactDOM要素をレンダリングするには、reactDOMを実行します.render関数を使用します.

ReatDOM.render(
	<h1>Hello, sangyeon</h1>,
    document.querySelector('#root')
)

Component

コンポーネントは再利用可能なUI単位です.

コンポーネントの作成

Reactは、構成部品をclassまたは関数として作成できます.現在、公式ドキュメントでは関数コンポーネントとhookを同時に使用することをお勧めします.
関数構成部品

import React from 'react';

function App() {
  const name = '리액트';
  return <div>{name}</div>;
}

export default App;

クラス構成部品

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = '리액트';
    return <div>{name}</div>;
  }
}

export default App;

両者の違いは,クラス素子に対して状態機能とライフサイクル機能を用いることができ,任意の方法を定義できることである.これに対して、関数構成部品の利点は、クラス構成部品よりも宣言しやすく、メモリリソースが少ないことです.

コンポーネントの操作

定義された構成部品は、関数/クラス名として使用できます.
定義した構成部品を使用する場合は、任意の数の属性を追加できます.次に、Welcome構成部品のプロパティをparameterとして有効にします.これを道具といいます

// 1. Welcome 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 2. App 컴포넌트 정의
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

// 3. 화면에 React 요소 그려주기
ReactDOM.render(
  <App />,
  document.getElementById('root')
);