[TIL][React]レスポンス開始と構成部品

反応が始まった。

反応はフェイスブックに作られたライブラリ、フェイスブックやインスタなど.最近のモダンなネットワーク
フロントユーザーが最も多いWebフレームワーク.
これらのありふれた話と基礎内容は正式な文書の中で韓国語で詳しく説明しやすい!
https://ko.reactjs.org//---React公式文書
また見知らぬ概念に満ちていて、以前よく知っていたものが頭から消え始めた.
代表的なのは、クラスと関数を使用して構成部品を作成し、適用することについて理解しています.StateとLifecycleを考慮すると動脈硬化が開始した.

きどうはんのう

反応器はnpmで、起動しやすい.

npx create-react-app my-app
cd my-app
npm start

対応するコマンドを入力するだけでreact開発環境を簡単に設定できます!
この他にもyarnで始まる方法などがありますが、最も一般的な方法で始まります.

React Component

reactionは基本的にバニラjavascriptコードで開発することもできますが、最も大衆化され、広く使われている方法はJSX文法を使うことです!
JSX構文はJSとHTMLを統合した形式を採用しており、最大の利点は、それぞれのコンポーネントをHTMLタグにすることができ、HTMLタグでは{ }を使用してJSコードを使用することである.
ES 6+文法はほとんど使わなければならないので、ES 6+文法を勉強したりマスターしたりするのにもっと時間がかかります.設計図やrestパラメータなど...

// 함수형 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// 또는
let Welcome = () => <h1>Hello, {props.name}</h1>
.
.
.
// ES6 클래스형 컴포넌트 정의
class Welcome extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

構成部品を作成する方法は大体関数型とクラス型の2種類がありますが、私が初めて見たとき、もちろん文法を更新するクラスを使いたいと思っています.しかし,React Hookの出現により,最もポピュラーな方式は関数型である.それでも、蔓延している古いコードのおかげで、すべての方法を知って理解すべきようだ.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
// 또한 다음과 같이 컴포넌트 안에서 컴포넌트를 사용하는 것 또한 가능하며
// 이것이 리액트의 핵심 개념이다.