フロントエンド初心者でもReactは簡単？Reactの文法を学んでみた～序章～

自社開発企業でWebアプリケーションエンジニア（※名前はいろいろあるので都合よく解釈してください）、Webアプリのうち各サブシステムを開発しているエンジニアです。

今回はReactという最近流行りのモダンなJavaScriptのフレームワークを学んでみたということで、
そもそもJavaScriptもそんなに詳しくないので（多少は書ける）、興味本位でProgateを使って学んでいきます。

※なお著作権等に引っかからないよう、文法的な書き方部分だけ抜粋していく感じ(Re-Write)で行こうと思います。

参考

Hello World

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <h1>Hello React</h1>
    );
  }
}

export default App;

• Reactからreactをimportする
• React.Componentをextendsしたクラスを実装
• renderメソッドのreturnでHello Worldを記述
• export でクラスをexportする

JSX

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
          {/*コメントはこのように書く*/}
          <h1>Hello World</h1>
          <p>一緒にReactを学びましょう！</p>
      </div>
    );
  }
}

export default App;

• returnは1つの要素である必要がある（上の例の場合divタグがないとエラう）
• コメントは{/**/}で書くことができる

imgタグ

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
          <img src="https://XXXX.com/yyyy.png"/>
      </div>
    );
  }
}

export default App;

• 閉じタグがない
• タグの終わりにスラッシュ/を入れる

JSXにJSを埋め込む

import React from 'react';

class App extends React.Component {
  render() {
    //JSX領域の外のコメントはこう書く
    const text = 'Hello World';
    return (
      <div>
          {text}
      </div>
    );
  }
}

export default App;

• 中括弧{ }でくくることでJSX領域にJSをかける
• returnの中がJSX領域

イベント（ボタンをおすとコンソールログを吐く）

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
           <button onClick={()=>{console.log('表示切替')}}>表示切替</button>
      </div>
    );
  }
}

export default App;

-ボタンにイベント名を指定し、そこにアロー関数（ES6）を実装

イベント（画面の表示名称を変える）

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'World'};
  }

  render() {
    return (
        <div>
          <h1>hello {this.state.name}!</h1>
          <button onClick={() => {this.setState({name:'React'})}}>表示切替</button>
        </div>
    );
  }
}

export default App;

• stateをコンストラクタで定義し初期値を代入しておく
• returnの中にはstateのnameが入るようにしておく
• アロー関数ののなかに実行したい処理を書く（今回はWorld→Reactに変える）
• this.state = {name:''React}と書いてはいけない（らしい）のでsetを使う

メソッドに切り出す

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'World'};
  }

  handleClick(name){
    this.setState({name:React});
  }

  render() {
    return (
        <div>
          <h1>hello {this.state.name}!</h1>
          <button onClick={() => {this.handleClick('React')}}>表示切替</button>
        </div>
    );
  }
}

export default App;

• ES6と同様にメソッドを実装する
• onClickでやっている内容をそのまま転記
• 引数を利用して共通化
• 呼び出すときはthisをつける

最後に

現時点では、直感的というか簡単な気がする。
ただES6（＆そもそものJavaScript）を知らないと、ちと苦戦するかもね。
※HTMLは大前提

次回はフロントエンド初心者でもReactは簡単？Reactの文法を学んでみた～２章～