Cacher is the code snippet organizer for pro developers

メモ

• return内にhtml記述（REACTではJSX
• return内は一つの要素のみ（要素が複数ある場合はdivなどで囲む
• コメントは{/* コメント */}
• imgタグには閉じタグが必要（img src="" />
• return内でのjsは{}内に記述（クォーテーションの有無に注意

render() {
  const greeting = 'hello';
  const imgUrl = 'https://aaa.com/aaa.png'
  return(
    <h1>{greeting}</h1>
    <img src={imgUrl} / >
  );
}

• stateはconstructor内に記述
• 値のセットはthis.setState({ プロパティ: 値});
• クラスはclassName="" で要素で指定
• ＜input>は＜input />、＜textarea>＜/textarea>は＜textarea />

<div onClick={ () => {this.myFunc()} } >
<form onSubmit={ () => {this.myFunc()} } >
<input onChange={ (event) => { event.target.value } } />

handleEmailChange(event) {
  const inputValue = event.target.value;
  this.setState({email: inputValue});
}
<input
  value={this.state.email}
  onChange={(event) => {this.handleEmailChange(event)}}
/>

コード

import React from 'react'; // 定型 パッケージの読み込み

class App extends React.Component { // 定型
  constructor(props) { // 定型
    super(props); // 定型
    this.state = { name: '名前' };
    this.count = { count: 0 };
  }
  handleClickName(name) {
    this.setState({name: name});
  }

  render() { // 定型
    return ( // 定型
      <div>
        <button onClick={ ()=> { this.handleClickName('名前2') }>ボタン1</button>
        <h1>hello, {this.state.name}</h1>
        <button onClick={ this.handleClickCount() }>ボタン2</button>
        <p>{ this.state.count }</p>
      </div>
    );
  }
}
export default App; // 定型

フォーム入力

import React from 'react';

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,
      email: '',
      hasEmailError: false,
      content: '',
      hasContentError: false,
    };
  }

  handleEmailChange(event) {
    const inputValue = event.target.value;
    const isEmpty = inputValue === '';
    this.setState({
      email: inputValue,
      hasEmailError: isEmpty,
    });
  }

  handleContentChange(event) {
    const inputValue = event.target.value;
    const isEmpty = inputValue === '';
    this.setState({
      content: inputValue,
      hasContentError: isEmpty,
    });
  }

  handleSubmit() {
    this.setState({isSubmitted: true});
  }

  render() {
    let emailErrorText;
    if (this.state.hasEmailError) {
      emailErrorText = (
        <p className='contact-message-error'>
          メールアドレスを入力してください
        </p>
      );
    }
    
    let contentErrorText;
    if( this.state.hasContentError ) {
      contentErrorText = (
        <p className='contact-message-error'>
          お問い合わせ内容を入力してください
        </p>
      );
    }
    
    let contactForm;
    if (this.state.isSubmitted) {
      contactForm = (
        <div className='contact-submit-message'>
          送信完了
        </div>
      );
    } else {
      contactForm = (
        <form onSubmit={() => {this.handleSubmit()}} >
          <p>メールアドレス（必須）</p>
          <input
            value={this.state.email}
            onChange={(event) => {this.handleEmailChange(event)}}
          />
          {emailErrorText}
          <p>お問い合わせ内容（必須）</p>
          <textarea
            onChange={ (event) => { this.handleContentChange(event) } }
            value={ this.state.content }
          />
          {contentErrorText}
          
          <input
            type='submit'
            value='送信'
          />
        </form>
      );
    }
    
    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;

関連リンク

• progate:npmパッケージを使ってみよう！
• REACT公式:チュートリアル：React の導入