Reactページの読み込みが終わるまでの間ローディングを表示する

たろ

ReactでWebAPIやちょっぴし重めのページの表示中の間にローディングってどうやって表示するの？

こんな悩みにお答えします。

ページ読み込み中のローディング画面を React の状態管理を使い実装してみました。

実装時に使ったコードと実際のローディング（スピナー）画面も閲覧できるようにしていますので、最後まで読んでくれると嬉しいです。

環境

• React
• spinkit（ローディング表示するときに使うCSSのライブラリ）

React ローディング表示のサンプルコード

// loadingのStateがTrueのときに表示するコンテンツ
function Content() {
  return (
    <h1>Hello World!!</h1>
  )
}

// loadingのStateがFalseのときに表示するコンテンツ
function Spinner() {
  return (
    <div className="sk-plane sk-center"></div>
  )
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }

  componentDidMount() {
    // あえてローディング（スピナー）を表示するため5秒待機
    // 5秒後loadingのStateをTrueに変更
    setTimeout(()=>this.setState({loading: true}), 5000);
  }

  render () {
    return (
      <div>
        {this.state.loading ? (<Content/>) : (<Spinner/>) }
      </div>
    )
  }
}
ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

コードのポイントは下記の部分。

{this.state.loading ? (<Content/>) : (<Spinner/>) }

三項演算子を用い、 this.state.loading が TrueかFalseかで表示するコンテンツを切り替えています。

検証

この記事を読んでここまできていただいた方はすでに「Hello World」が表示されてしまっていると思います。

お手数ですが、ページを再読み込みしていただくとローディング画面が表示され、5秒後に「Hello World」が表示されます。

Reactの勉強は下記の書籍がおすすめです↓

React開発 現場の教科書

マイナビ出版

Amazonの商品レビュー・口コミを見る

Amazon

楽天