Learning React(1.Reactを起動)

65421 ワード

1.CDNメソッドを初めて使用した応答

01.反応ライブラリとバーベルの作成

headタグ内に

を作成する

<!-- 리액트 라이브러리와 리액트가 DOM에 대한 작업할 때 필요한 다양한 기능을 추가 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 바벨, 자바스크립트 컴파일러의 참조 -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

02.第1画面出力

-1. ReactDOM.render()

レンダリング方法2つのパラメータを受け入れる

画面で出力するHTML(JSX)

DOMに

そのJSXの位置が表示されます.

-2. Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React!</title>
  <!-- 리액트 라이브러리와 리액트가 DOM에 대한 작업할 때 필요한 다양한 기능을 추가 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 바벨, 자바스크립트 컴파일러의 참조 -->
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Minseung Moon</h1>,
      document.body
    );
  </script>
</body>

</html>

03.コンテナ内部へ移動

body内部にcontainer divタグを作成し、コード

を記述する.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React!</title>
  <!-- 리액트 라이브러리와 리액트가 DOM에 대한 작업할 때 필요한 다양한 기능을 추가 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 바벨, 자바스크립트 컴파일러의 참조 -->
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  <style>
    #container {
      padding: 50px;
      background-color: #EEE;
    }

    #container h1 {
      font-size: 144px;
      font-family: sans-serif;
      color: #0080A8;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script type="text/babel">
    const destination = document.querySelector("#container");
    ReactDOM.render(
      <h1>Minseung Moon</h1>,
      destination
    );
  </script>
</body>

</html>

2.反応素子

ユーザーがアプリケーションを使用するときに見る外観とインタラクションを定義する主な方法

は、無駄な繰り返し作業を減らすことができる

余計な繰り返し

単純レイアウト変更

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React!</title>
  <!-- 리액트 라이브러리와 리액트가 DOM에 대한 작업할 때 필요한 다양한 기능을 추가 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 바벨, 자바스크립트 컴파일러의 참조 -->
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  <style>
    #container {
      padding: 50px;
      background-color: #EEE;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script type="text/babel">
    const destination = document.querySelector("#container");
    ReactDOM.render(
      <div>
        <h3><i>Batman</i></h3>
        <h3><i>Iron Man</i></h3>
        <h3><i>Nicolas Cage</i></h3>
        <h3><i>Mega man</i></h3>
      </div>,
      destination
    );
  </script>
</body>

</html>

02. Hello, World! 構成部品の作成

-1.従来方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React!</title>
  <!-- 리액트 라이브러리와 리액트가 DOM에 대한 작업할 때 필요한 다양한 기능을 추가 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 바벨, 자바스크립트 컴파일러의 참조 -->
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  <style>
    #container {
      padding: 50px;
      background-color: #EEE;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script type="text/babel">
    ReactDOM.render(
      <div>
        <p>Hello, World!</p>
      </div>,
      document.querySelector("#container")
    );
  </script>
</body>

</html>

-2.HelloWorld構成部品の作成

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React!</title>
  <!-- 리액트 라이브러리와 리액트가 DOM에 대한 작업할 때 필요한 다양한 기능을 추가 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 바벨, 자바스크립트 컴파일러의 참조 -->
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  <style>
    #container {
      padding: 50px;
      background-color: #EEE;
    }
  </style>
</head>

<body>
  <div id="container"></div>

  <script type="text/babel">
    class HelloWorld extends React.Component {
      render() {
        return <p>Hello, componentized world!</p>
      }
    }
    ReactDOM.render(
      <div>
        <HelloWorld/>
        <HelloWorld/>
        <HelloWorld/>
        <HelloWorld/>
        <HelloWorld/>
      </div>,
      document.querySelector("#container")
    );
  </script>
</body>

</html>

-3プロパティの指定(property)

{}は、内部に属性を作成し、JSXでの式

propsは、要素間でデータを伝達するためのツールであり、属性は複数の

であってもよい.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React!</title>
  <!-- 리액트 라이브러리와 리액트가 DOM에 대한 작업할 때 필요한 다양한 기능을 추가 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 바벨, 자바스크립트 컴파일러의 참조 -->
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  <style>
    #container {
      padding: 50px;
      background-color: #EEE;
    }
  </style>
</head>

<body>
  <div id="container"></div>

  <script type="text/babel">
    class HelloWorld extends React.Component {
      render() {
        return <p>Hello, {this.props.greetTarget}!</p>
      }
    }
    ReactDOM.render(
      <div>
        <HelloWorld greetTarget="Batman" />
        <HelloWorld greetTarget="Iron Man" />
        <HelloWorld greetTarget="Nicolas Cage" />
        <HelloWorld greetTarget="Mega Man" />
        <HelloWorld greetTarget="Catwoman" />
      </div>,
      document.querySelector("#container")
    );
  </script>
</body>

</html>

-4. this.props.children

サブエレメントがテキストである場合、this.props.childrenプロパティは、文字列

を返します.

子供の扶養費が単一の扶養費であれば、this.props.childrenプロパティは、アレイではなく

単一の構成部品を返します.

それ以外にもいろいろな機能があります

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React!</title>
  <!-- 리액트 라이브러리와 리액트가 DOM에 대한 작업할 때 필요한 다양한 기능을 추가 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 바벨, 자바스크립트 컴파일러의 참조 -->
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  <style>
    #container {
      padding: 50px;
      background-color: #EEE;
    }
  </style>
</head>

<body>
  <div id="container"></div>

  <script type="text/babel">
    class Buttonify extends React.Component {
      render() {
        return (
          <div>
              <button type={this.props.behavior}>{this.props.children}</button>
          </div>
        )
      }
    }
    ReactDOM.render(
      <div>
        <Buttonify behavior="submit">Send Data</Buttonify>
      </div>,
      document.querySelector("#container")
    );
  </script>
</body>

</html>

Reference

この問題について(Learning React(1.Reactを起動)), 我々は、より多くの情報をここで見つけました https://velog.io/@ansalstmd/Learning-React1.-React-시작

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

JS関数についての質問

ファーウェイ社2020回博士募集-搭乗試験(2019年9月25日)