React (JavaScript)로 유파를 구현해보십시오.

12262 단어 자바스크립트재료React유파

소개



원작자 : 자바로 유파를 구현해 보자 ​​- Qiita

이 장대한 빅 웨이브가 아닌 빅 유파를 타고 싶지 않아!

코드



index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>React 湯婆婆</title>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      'use strict';

      const {useState} = React;

      function Yubaba() {
        const [name, setName] = useState('');
        const newName = name.substr(Math.floor(Math.random() * name.length), 1);

        return (
          <div>
            <p>契約書だよ。そこに名前を書きな。</p>
            <input type='text' value={name} onChange={e => setName(e.target.value)}/>
            <p>フン。{name}というのかい。贅沢な名だねぇ。</p>
            <p>今からお前の名前は{newName}だ。いいかい、{newName}だよ。分かったら返事をするんだ、{newName}!!</p>
          </div>
        );
      }

      ReactDOM.render(
        <Yubaba/>,
        document.getElementById('root')
      );

    })();
  </script>
</body>
</html>

여기가 코드가됩니다. 이것을 textfile 라든지 copipe하고 브라우저 기동하면 움직입니다.

코드 해설



유파의 방에 들어갈 준비



React와 babel을 CDN으로 읽습니다.
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone/babel.min.js"></script>

렌더용의 div 요소 (root)를 기술해, 나머지는 JS의 작법을 기술한다.
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      'use strict';

      ...

    })();
  </script>

계약서와 이름을 빼앗는 Yubaba 구성 요소 만들기



Yubaba 구성 요소 만들기!
후크 (useState)도 사용!
      const {useState} = React;

      function Yubaba() {
        const [name, setName] = useState('');
        const newName = name.substr(Math.floor(Math.random() * name.length), 1);

        return (
          <div>
            <p>契約書だよ。そこに名前を書きな。</p>
            <input type='text' value={name} onChange={e => setName(e.target.value)}/>
            <p>フン。{name}というのかい。贅沢な名だねぇ。</p>
            <p>今からお前の名前は{newName}だ。いいかい、{newName}だよ。分かったら返事をするんだ、{newName}!!</p>
          </div>
        );
      }

      ReactDOM.render(
        <Yubaba/>,
        document.getElementById('root')
      );

실행 결과





덤



이름의 입력이 공백이었을 경우의 크래쉬 유파는 입실하지 않았습니다!
SPA이므로 이름을 말하기 전에 유파는 이름을 빼앗기 시작한다고 한다. 이른바와 치리 유파파 강림.

마지막으로



여기까지 읽어 주셔서 감사합니다!
문언/wenyan-lang에서 유파를 구현해보기
C#에서 유파를 실장해 본다(𠮷田씨에게도 대응)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage