joppot

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

プログラミング

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

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



概要

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

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

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

前提

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


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

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

関連記事

railsのaws-sdk gemを使ってs3のファイルを削除する

by martinak15 概要 みなさんこんにちはcandleです。今回はs3にアップロードされている画像ファイルをrailsのaws-sdk gemを使用して削除してみたいと思います。 記事中で開 …

fabricを使ってgit のdiffで指定のバージョンからのファイルをアップロード

概要 皆さんこんにちはcandleです。今回はfabricを使ってgit のpush pullを使わないデプロイを実装します。 一般にgit管理されているプロジェクトのデプロイは下の様な図式でデプロイ …

Hiragino Sansフォントウェイトのcss書き方まとめ

概要 みなさんこんにちはcandleです。今回はHiragino Sansのcssの書き方を紹介します。 Hiragino Sansの特徴はフォントの太さを1から9段階まで変えられることです。 一方で …

javascriptでのJSONの大きさ(サイズ)の取得

概要 みなさんこんにちはcandleです。今回はプログラミングで少し手間取ったJSONサイズ取得の問題について書いていこうと思います。 JSONはjavascirptでわりと多く使われるオブジェクト型 …

wordpressのコメントフォームを編集し、名前とメールのデフォルト値を設定する

概要 みなさんこんにちはcandleです。今回はwordpressのコメントフォームをオーバーライドしてフォームの「名前」「メールアドレス」「url」のデフォルトバリューを設定したいと思います。 コメ …


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