TIL.1) React?_React

🚨 Caution 🚨

これらはwecodeで勉強してまとめたものです.
筆者が理解した部分に基づいて書いた文章で、実際の内容とは少し違うかもしれません.
この点に注意してください
コンテンツへのフィードバックに感謝します.

💡 だから反応は何ですか?

最初のWeb配信時を現在のWebと比較すると
話にならない変化が見られる.
ユーザの観点から,急速な変化と多様な機能を含むWebを用いる.
気持ち良くて面白かったですが、制作の観点から見ると、命がけに違いありません.
開発者が変わりすぎたので
この変化に従うしかない.
データとコードのメンテナンスを簡素化するために、
生まれたのはReactReactは、ユーザインタフェース(UI)を作成するためのJavaScriptライブラリである.
仮想ドームでUIをすばやく更新します.

🖥 作業環境設定パラメータ

Node.js

JSブラウザ外で動作する環境

Node.jsをインストールするとnpmも自動的にインストールされます.

npm (node package manager)

各種パッケージのインストールおよび管理に使用できるバージョン

CRA (Create-React-App)

反応プロジェクトを開始するために必要な開発環境のツール

💡 React code basic

▪️ JSX

JSXは、レスポンスで使用されるJS拡張構文です.
HTMLのように見えますし、JSの文法のようにも見えます.
いくつかの例を見て、それらの特徴を見てみましょう.

const hi = <p>Hello, world!</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li className = "list-item">programming</li>
};

タグに属性を指定する場合は、HTMLのコード作成方法に従います.
二重引用符("")は使用できますが、HTMLの属性名とは異なる場合があります.
この部分はReact公式文書を参照することが望ましい.

const list = (
<div>
    <p>list1</p>
    <p>list2</p>
</div>
);

ネスト要素を作成する場合は、カッコ()を使用してラップする必要があります.
最初の要素をサブ要素から開始しないでください.含まれるタグが必要です.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('hello')
);

HTMLドキュメントへのアクセスにより、ReactDOM.renderという名前の関数を使用する必要があります.
最初のパラメータ表示
2番目のパラメータについて、1番目のパラメータが表示される親要素を選択します.

▪️ Component

-プロパティ

Componentは、リサイクル可能なUIの構成単位であるcomponentを使用すると、コードのメンテナンスに役立ちます.
これらのページがどのように整理されているかを確認できます.

-宣言

宣言方式には2つの方式がある.(クラス/関数型)

級

import React from 'react'

class Component extends React.Component {
  render() {
    return (
	<div>
	  <h1>This is Class Component!</h1>
	</div>
    )
  }
}

export default Component

機能型

import React from 'react'

const Component = () => {
  return (
	<div>
	  <h1>This is Functional Component!</h1>
	</div>
	)
};

export default Component

現在、ほとんどの構成部品は関数として作成されています.
反応を初めて学習する段階で,これをクラス素子と書く.
まずいろいろな概念を勉強してから、関数型を勉強したほうがいいです.