Noob Front End Engineer Blog

CONTACT

React Hello World Examples

2020/01/03

概要

Reactの入門として、Reactの基本的な機能群を使用してHello Worldを行ってみました。

・ノーマル Hello World
・関数コンポーネント Hello World
・クラスコンポーネント Hello World

導入

Create React Appを使用して環境構築を行います。
npmのバージョンが 5.2 以上であればnpx
デフォルトで入っているはずなので下記で導入ができます。

npx create-react-app my-app
cd my-app
npm start

Sass & Scss 導入

こちらの記事を参考にnode-sassを導入してsassを使えるようにしました。

① まずはノーマルの Hello world!

/src/index.jsを下記の様に書き換えてください。

/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './sass/index.scss';

const say = 'Hello, World!';

ReactDOM.render(
  <div>
    <h1>{ say }</h1>
  </div>,
  document.getElementById('root')
);

ポイント

  • ReactとReactDomをimportしていないと怒られます。
  • ReactDom.render内で、表示するDOMを定義しています。
  • getElementで取得しているid="root"というDOM内に追加されます。
  • ReactDom.renderで返されるDOMは1つのDOM要素である必要があります。
    今回は1つの<div>要素を返していることになります。
  • 3 行目のimport './sass/index.scss';でscssを読み込んでいます。
    /src/sass/のディレクトリにindex.scssを作成して、背景色等を変更し、
    変更が適用されるか確認してみましょう。
body {
  background: #f2f2f2;
}

表示結果

上記の様に実装すると、このように表示されるはずです😉

出力例

変数sayに入れる文言を変更してみて、表示される内容が変わるか試してみてください!

② 関数コンポーネントで Hello World!

今度は/src/index.jsを下記の様に書き換えてください。

/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './sass/index.scss';

const say = 'Hello, World!';

// 関数コンポーネント
function Hello(props) {
  return <h2>Hello, {props.name}!</h2>;
}

ReactDOM.render(
  <div>
    <h1>{ say }</h1>
    <Hello name="hoge" />
  </div>,
  document.getElementById('root')
);

ポイント

  • 関数コンポーネントとは文字通り、関数によって作られたコンポーネントです。
    render 内で呼び出す際には関数名を呼び出します。
  • 関数コンポーネントは引数としてpropsを受け取ります。
    render 内で呼び出しの際に記述しているname="hoge"がprops.nameで使用できます。
  • render 内で記述されるタグは頭文字が小文字の場合DOM要素、
    頭文字が大文字の場合コンポーネントとして認識されます。

表示結果

上記の様に実装を行うとこのように表示されるはずです。

出力例

Hello コンポーネントを呼び出している箇所で渡す名前を自分の名前に変更してみてください。
挨拶してくれるはずです🙋

③ クラスコンポーネントで Hello World!

今度は/src/index.jsを下記の様に書き換えてください。

/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './sass/index.scss';

const say = 'Hello, World!';

// クラスコンポーネント
class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Bob'
    }
  }

  setName = (e) => {
    this.setState({
      name: e.target.value
    });
  }

  render() {
    return (
      <div>
        <h2>Hello, {this.state.name}!</h2>
        <label for='name'>input your name!</label>
        <input type='text' onChange={this.setName} />
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <h1>{ say }</h1>
    <Hello />
  </div>,
  document.getElementById('root')
);

ポイント

  • クラスコンポーネントは独自のstate(状態)を持つことができます。
  • state を使用する場合にはコンストラクタが必須になり、
    このコンストラクタ内でstateの初期値を設定します。
    また、このコンストラクタでは必ず引数に props を受け取り、super(props)を行う必要があります
  constructor(props) {
    super(props);
    this.state = {
      name: 'Bob'
    }
  }
  • stateは直接変更をしてはいけません。
    今回の場合は<input type='text' onChange={this.setName} />
    this(コンポーネント内の).setNameを呼び出して、その関数内でsetStateを使用して
    stateを変更しています。
  setName = (e) => {
    this.setState({
      name: e.target.value
    });
  }
  • クラスコンポーネント内のrender()で返却する DOM 要素を定義しています。
    ここでも DOM 要素を 1 つで返す必要があるので、<div>で囲っています。
  • コンポーネント内の state を DOM 要素内で取得する場合は{this.state.name}
    というように記述します。
  render() {
    return (
      <div>
        <h2>Hello, {this.state.name}!</h2>
        <label for='name'>input your name!</label>
        <input type='text' onChange={this.setName} />
      </div>
    );
  }

表示結果

上記の様に実装を行うとこのように表示されるはずです。

出力例

名前を入力して変更されるか試してみてください😄


Written by daichi iwamoto