[SSAC Xエンコーディング入力](2021.10.08)応答入門コース1日目

19531 ワード
React JavaScript SSAC テキストリンク

🎆 反応とは?


  • Reactは、コンポーネントベースのJavaScriptライブラリです。



  • 画面作成用JavaScriptライブラリ



  • JavaScriptライブラリ3章:React,Vue。js, Angular



  • モデル-ビュー-コントローラ(MVC)およびモデル-ビュー-モデル(MVVM)モデルの使用



  • 仮想ドメイン構造の使用
  • Webページを直接変更するのではなく、更新する必要がある最小部分のみを検索します

  • コンポーネントベースで画面を構成します.
    ライブラリガイドとチュートリアルドキュメント

    • 🔨 反応優先パラメータの設定と起動


    1. Node.jsインストール
    https://nodejs.org/ko/download/

  • LTSバージョンへのインストールを推奨

  • 自分のパソコン32 bit、64 bitをチェックしてインストール!

  • インストール後にcmdを開き、node -vバージョンを表示
    • 2.ガーゼツールの取り付け

  • これはnpmよりも完璧なインストールです.

  • cmdウィンドウに次のように入力します.
  • npm install -g yarnコマンドでインストール

  • バージョン番号はyarn --version

  • 次の画面と一緒に出たら成功!

  • ※Macプレイヤーは、まず該当するコマンドを入力する必要があります.(Macユーザーのみ!!)
  • メインブルー取付/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  • 糸取付け$ brew update $ brew install yarn $ yarn config set prefix ~/.yarn $ echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile
    • 3.Reactプロジェクトの作成

  • まず、cdコマンドで必要なフォルダを移動します.

  • 次に、次のコマンドを作成します.yarn create-react-app [프로젝트 이름]

  • Webpack(Web Pack)、Barbel(Barbel):Javascriptコンパイラですが、ここに書く必要はありません


  • cmd端末に以下の画面が表示されると、プロジェクトは正常に出力されます!
    • 4.reactアプリケーションの実行
    -cdコマンドを使用してreact projectに移動します.

  • 次に、reactアプリケーションを実行するには、次のコマンドを使用します.yarn start

  • このような画面が現れるのは正常に動作しています!

    • 📃 JSX(JavaScript XML)構文


  • XMLドキュメントとHTMLドキュメントのタイプが違います!!!でも差は多くない

  • ここで説明するReactの利点:

  • 一般的なJavaScriptよりもシンプルで読みやすさが良い

  • htmlとコードが似ているので、htmlを知っていればjsxを書くのは問題ありません

  • ドキュメントを書くときはreactを上にずっとインポートします!もちろん!
    •      import React from 'react';

  • 🏁 JSXシンボル規則

  • 親ラベルを使用して保護する必要があります.
    • 	
import React from 'react';
 
function App() {
 return (
  <div>
   <h1>SSAC</h1>
   <h2>안녕 안녕</h2>
  </div>
 );
}
 
export default App;
  • fragnentは、簡略化された親ラベルをインポートすることで親ラベルを保護できます!
    • 	
import React, { Component, Fragment } from 'react';
 
function App() {
 return (
  <>
   <h1>SSAC</h1>
   <h2>안녕 안녕</h2>
  </>
 );
}
 
export default App;
  • Camel符号
  • 3つの演算子を使用
    •   function App() {
    return (
      <>
        { 3 + 5 == 8 ? (<h1>정답입니다.</h1>) : (<h1>오답입니다.</h1>) }
      </>
    );
  }

  export default App;
  • JS式時括弧
    •   function App() {
    const name = "로이";
    const animal = "강아지";

    return (
      <>
        <h2>제 반려 동물의 이름은 <u>{name}</u>입니다.</h2>
        <h2><u>{name}</u>는 <u>{animal}</u>입니다.</h2>
      </>
    );
  }

  export default App;
  • &演算子
    •   function App() {
    const a = 10;
    const b = 15;

    return (
      <>
        { a > b && (<h1>a가 b보다 큽니다.</h1>) }
      </>
    );
  } 

  export default App;

    📢 構成部品


  • 関数構成部品

  • クラス構成部品:メモリを節約します.
  • CDN : Content Delivery Network

    • 🔽 Props:構成部品の属性設定要素

  • Props値は、構成部品をロードおよび使用する親構成部品(App構成部品)に設定できます.
    •   import React from 'react';
  import MyComponent from './MyComponent';

  const App = () => {
    return <MyComponent name="React" ></MyComponent>;
  };

  export default App;
  • defaultProps:Props値が指定されていない場合に
    • を表示するためにデフォルト値を設定します.
      import React from 'react';

  const MyComponent = props => {
      return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
  };

  MyComponent.defaultProps = {
      name: '기본 이름'
  };

  export default MyComponent;
  • 要素にサブpropsを使用
    •   import React from 'react';

  const MyComponent = ({ name, children }) => {
      return (
          <div>
              안녕하세요, 제 이름은 {name}입니다. <br />
              children 값은 {children}
              입니다.
          </div>
      );
  };

  MyComponent.defaultProps = {
      name: '기본 이름'
  };

  export default MyComponent;
  • クラス構成部品props使用
    •   import React, { Component } from "react";
  import PropTypes from "prop-types";

  class MyComponent extends Component {
    render() {
      const { name, favoriteNumber, children } = this.props;

      return (
        <div>
          안녕하세요, 제 이름은 {name}입니다. <br />
          children 값은 {children}
          입니다.
          <br />
          제가 좋아하는 숫자는 {favoriteNumber}입니다.
        </div>
      );
    }
  }

    stateの使用


  • 関数構成部品:usState

  • クラス構成部品:setState

    • 緊急事態が発生!

  • coding on pageの受講回数が切れてしまったので、もう復習できません…!代表を見たら受講回数を増やしてください…!!
    • Sqlserverはデータベースファイルをバックアップする.bakリストア時にエラーメッセージを実行:データベースに問題があるため、独占アクセス権を取得できません.
    Javaストリーム