고릴라어를 쓸 줄 알아요.

메리 크리스마스!!🎄

Phone Appli Developers Advent Calendar 2019의 25일째.
왜 마지막이야?눈치챘을 때는 이미 25일이었다.(흰눈)
한마디로 참가를 표명하는 것은 매우 중요하다.
결국 회사에 얘기했어?

이것은 무슨 보도입니까?

했어요이런 물건.

갑작스럽지만.

여러분 갑자기 고릴라가 되고 싶은 거 없어요?
아니요.

다시 일어서다

평소에 서버 쪽 사람이에요.
구부릴 때도 맛있게 만들었어요.👶말하기 전에
무거운 허리를 들어 반드시 만져야 한다고 생각하는 React를 만져보세요.
이것은 이번 취지다.

왜 React?

그게 가장 유행이니까 안 할 방법이 없겠죠.
github의 스타 수는 오래전부터 vue추월당했다가 된 줄 알았다.낸트코테

그래, 못 본 걸로 하자.

어쨌든

한번 가동해 봅시다.
이번에는 그냥 만지고 싶어서 주변 개발 환경은 생각 안 해.
어쨌든 필요한 것은 CDN으로 읽어라.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache">
    <title>title</title>
    <!-- 本体 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <!-- DOMをよしなにしてくれるすごいやつ -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!-- コンパイラ、こいつで生のjsにコンパイルするらしい -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- みんな大嫌いJSX -->
    <script type="text/babel" src="gorilla.jsx" defer></script>
    <script type="text/babel" src="main.jsx" defer></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

그러나 원 보도에도 쓰여 있다
이 글의 내용은 현실적인 제품에 직접 적용될 수 없다.읽기에만 집중할 수 있지만 그 대가로 현실적인 개발 방법도 빠졌다.어플리케이션을 열심히 만들려면 결국 Node.js를 넣고 babel을 넣으세요.
그렇긴 하지만 그 자체를 모르면 대화를 할 수 없다.
뇌장애는 동시에 이해할 수 있는 능력이 몇 개 없다.

JSX가 제일 싫어요.

모두들 너무 심하게 말한다.
역시 처음엔 징그러웠어.왜냐하면 js랑 html은 같이 썼어요.

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

textarea

먼저 화면에 텍스트 상자를 표시합니다.대략 정부 의 지시 대로
1 구성 요소는 클래스에서 표시할 수 있을 것 같습니다.
종류친해지기 쉬워요.

// main.jsx
class App extends React.Component {
  //コンポーネントの状態がここで初期化される
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };

    this.handleChange = this.handleChange.bind(this);
  }

  //文字を入力するごとに呼ばれ、stateを更新する
  handleChange(event) {
    this.setState({value: event.target.value});
  }

　//このコンポーネントのHTML
  render() {
    return (
        <label>
          <textarea value={this.state.value} onChange={this.handleChange} rows='5' cols='30' />
        </label>
    );
  }
}

//index.htmlのappにレンダリングされる
ReactDOM.render(
  <App />,
  document.getElementById('app')
);

화면에 뜨면 이런 느낌이에요.

텍스트를 입력할 수 있으니까.

입력해서 고릴라어로 출력하면 재밌지 않을까요?
...그렇지 않나요?글쎄, 그렇게 말하지 마라
너는 기능에 라벨을 쓸 수 있다

function yourTag(props){
  return<div>なにか</div>
}

　
　
이렇게 하면 돼, 텍스트를 고릴라 라벨로 써.

// gorilla.jsx
function Gorilla(props){
    //真面目に翻訳することも考えたのですが、
    //時間がなかったので単純に入力されたテキストをこの文字で置換します
    const gorilla = ['うほ', 'ウホ', 'ｳﾎ', 'ゥホ', 'uho']

    const uho = Array.from(Array(props.tweet.length))
        .map(()=>gorilla[Math.floor(Math.random()*gorilla.length)])
        .join('')

    return <div>{uho}</div>
}

　
그런 다음 주 어셈블리에 만든 레이블을 추가합니다.

//main.jsx
render() {
    return (
        <div>
            <Gorilla tweet={this.state.value}/>
            <label>
                <textarea value={this.state.value} onChange={this.handleChange} rows='5' cols='30' />
            </label>
        </div>
    );
  }

바로 보여주세요.

처음에는 아까랑 똑같았어요.

텍스트를 입력하면 고릴라어로 표시됩니다.
너무 좋아요!이렇게 하면 맑아진다, 고릴라어 현지인!

그런데 문제는

현재의 실현에서 매번 텍스트를 입력할 때마다 전체 텍스트가 전달된다gorilla()매번 입력한 디스플레이 결과가 달라서 정말 큰일났다...

다음에 이 근처에서 방법을 생각해 볼게요.

하지만 시간이 없어서 여기까지입니다.
왠지 헬로, 월드 수준이 된 것 같아.

끝내다

그래서 불완전 연소감이 느껴지는 물건여기
이것 괜찮아요?
그럼 새해 복 많이 받으세요!

Reference

이 문제에 관하여(고릴라어를 쓸 줄 알아요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/teino_ponytail/items/44f44f659f54b1a328d4

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)