joppot

コピペで絶対動く。説明を妥協しない

プログラミング

React開発環境構築コマンドcreate-react-appが便利すぎたのでまとめてみた

投稿日:2017年4月10日 更新日:

Pocket


概要

みなさんこんにちはcandleです。
今回はcreate-react-appコマンドを使ってreactの開発環境の構築とhello worldあたりまでやってみたいと思います。

過去のreact開発はgulpやwebpackを使って自分でnpmからbabelやその他パッケージをインストールして作成していました。
create-react-appを使えばより簡単にreactの開発環境を構築できます。

本当に、あれほど苦労したのが馬鹿らしくなるくらい簡単なので、やっていきましょう。

前提

nodeがインストールされている

SPONSORED LINK


create-react-appコマンドのインストール

create-react-appコマンドはnpmからインストールできます。
これをグローバルで使うので-gフラグ付きでインストールします。

npm install -g create-react-app

reactプロジェクトを作成する

create-react-appでプロジェクトを作ります。

一般に以下の方法で作成します。

create-react-app プロジェクト名

今回は helloworldプロジェクトを作ります。
ディレクトリの場所はどこでもかまいません。

私は説明しやすいようにデスクトップに作ります。

create-react-app helloworld

インストールが終わったらプロジェクトに移動します。

cd helloworld
ls


サーバの起動

プロジェクトに移動したら、npm startでサーバを起動します。

npm start

こんな感じのメッセージがでて

ブラウザが開いて、以下のようなページが出てきたら成功です。

helloworldプログラムを書く

練習ついでに以下のことをやってみましょう。

  1. src/components/Input.jsコンポーネントの作成
  2. src/App.jsの書き換え

src/components/Input.jsコンポーネントの作成

最初にInput.jsコンポーネントを作りましょう。
srcフォルダの中にcomponentsフォルダまだないので作ります。
その後、Input.jsファイルを作成します。

mkdir src/components
touch src/components/Input.js

src/components/Input.jsを開いて以下を記述します。

import React from 'react';

const Input = (props) => <input name={props.name} type={props.type} onChange={props.onChange} />

Input.propTypes = {
  onChange: React.PropTypes.func,
  name: React.PropTypes.string,
  type: React.PropTypes.string
}

Input.defaultProps ={
  name: '',
  type: 'text'
}

module.exports = Input;

保存しましょう。

src/App.jsの書き換え

reactのメインのプログラムファイルはsrc/App.jsです。
これを好きなエディタで開きます。

emacs src/App.js

このコードに書き換えます。

import React from 'react';
import Input from './components/Input'

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      txt: 'hello world'
    }
  }

  update(e){
    this.setState({
      txt: e.target.value
    })
  }

  render(){
    return(
      <div>
        <p>Text: {this.state.txt}</p>
        <Input onChange={this.update.bind(this)} />
      </div>
    )
  }
}

export default App;

保存しましょう。

ブラウザで確認する

ブラウザでhttp://localhost:3000にアクセスして見ると以下のような感じになっていて、
テキストフィールドに好きな文字を書き込むと「hello world」のテキストも上書きされます。


まとめ

今まではReact プログラマーが様々な方法で環境構築をしていましたが、1つまとまったような気がします。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

PEARのDBライブラリのインストールと使い方

概要 みなさんこんにちはcandleです。PEARには複数の便利なライブラリがあります。 その中の1つに実はもう古くなってあまり推奨されていませんが、データベースにつないだり、データベースの値を取得す …

ruby on railsのckeditorの画像のアップロード先をcarrierwaveとfogを使ってS3にする

概要 railsのckeditorはデフォルトでrailsのuploadsフォルダにアップロードしますが、 それだとサーバの容量を取ってしまうので、画像のアップロード先をS3に上げてみたいと思います。 …

Chart.js 2.0でy軸の最大値(scales max)と最小値を設定する

概要 みなさんこんにちはcandleです。今回はChart.js2.0でy軸の最大値、最小値を設定する方法を紹介します。 Chart.js 2.0では特に指定しないと自動的に、y軸の最大値を設定してく …

railsのsimple-captcha gemを使用してform_forを使ったフォームを画像認証する

概要 みなさんこんにちはcandleです。公に開かれたフォームはスパムや総当り攻撃を受けやすいです。 そこで、画像認証を導入して、悪意のあるフォームを拒否してみましょう。 simple-captcha …

正規表現を極めるその2

概要 みなさんこんにちはcandleです。今回は前回に引き続き、正規表現を勉強していきましょう。   前提 unixを使用するので、多少、unixコマンドになれていること   サン …

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ