JavaScriptでReactを使う方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでReactを使う方法について解説しています。JavaScriptフレームワークのひとつReactの特徴と導入方法、基本の使い方について説明します。フレームワーク選びの際の参考にしてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでReactを使う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Reactを使う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

Reactとは

Reactの特徴はなんといってもFecebookが作成していて、オープンソースであるというところでしょう。人気は急上昇していて色々なアンケートで上位に入ってきています。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

Reactを使うメリット

Fecebookが作成しているということもあり、その品質の高さがあります。不具合対応も早いので安心して利用できます。また、UIに強いのも特徴でユーザーフレンドリーなサイト作成も行えます。

 

Reactの使い方

まずは、インストールから説明します。

色々方法はあるのですが、簡単なのは、Node.jsとcreate-react-appを利用する方法です。ポイントはインストール時にnpm(>= 5.6)を利用するところです。

  1. Node.js(>= 8.10)をインストール
    https://nodejs.org/ja/
    でダウンロードしてインストールします。
  2. create-react-appをインストール
     npm install -g create-react-app

    でインストールします。

続いてreactの利用ですが、create-react-appを使いReactベースのアプリを作成できます。

  1. アプリケーションの作成
     create-react-app  [appname]
  2. サービスの起動
     cd [appname]
    
     npm start

ブラウザーでlocalhost:3000にアクセスして「Learn React」の画面が表示されれば成功です。

 

実際に書いてみよう

では、実際にReactを利用してみましょう。

まずは簡単な動きの説明をします。

ブラウザーからアクセスされると、「[newapp]\public\index.html」が読み込まれます。そして、「index.html」内に記載されている”<div id=”root”></div>”の部分に「[newapp]\src\index.js」の”ReactDOM.render{}”の部分が反映されます。さらにこの中で「[newapp]\src\App.js」が実態として呼び出されています。

そこで、今回は「[newapp]\src\App.js」の部分を修正してみたいと思います。まずは、本当に「App.js」を修正して反映されるかを確認してみましょう。

“function App(){return(~)}”の”<header className=”App-header”>~</header>”の中を「Hello World」に書き換えます。

Hello World が表示されたかと思います。

では、Reactの公式ページの中にもある”ToDo”アプリを作成します。

 

【App.js】を下記の通り修正します。

import React from 'react';

import logo from './logo.svg';

import './App.css';

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = { items: [], text: '' };

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

    this.handleSubmit = this.handleSubmit.bind(this);

  }

  render() {

    return React.createElement(

      "div",

      null,

      React.createElement(

        "h3",

        null,

        "TODO"

      ),

      React.createElement(TodoList, { items: this.state.items }),

      React.createElement(

        "form",

        { onSubmit: this.handleSubmit },

        React.createElement(

          "label",

          { htmlFor: "new-todo" },

          "What needs to be done?"

        ),

        React.createElement("input", {

          id: "new-todo",

          onChange: this.handleChange,

          value: this.state.text

        }),

        React.createElement(

          "button",

          null,

          "Add #",

          this.state.items.length + 1

        )

      )

    );

  }

  handleChange(e) {

    this.setState({ text: e.target.value });

  }

  handleSubmit(e) {

    e.preventDefault();

    if (this.state.text.length === 0) {

      return;

    }

    const newItem = {

      text: this.state.text,

      id: Date.now()

    };

    this.setState(state => ({

      items: state.items.concat(newItem),

      text: ''

    }));

  }

}

class TodoList extends React.Component {

  render() {

    return React.createElement(

      "ul",

      null,

      this.props.items.map(item => React.createElement(

        "li",

        { key: item.id },

        item.text

      ))

    );

  }

}

export default App;

【index.js】の”ReactDOM.render()”内を下記の通りに修正します。

ReactDOM.render(

  React.createElement(App, null),

  document.getElementById('root')

);

 

まとめ

今回は簡単な出だしを紹介させて頂きました。細かい内容は、実際にReactの勉強をしてみてください。

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。