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

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

関連記事

正規表現を極めるその1

概要 みなさんこんにちはcandleです。今回から正規表現を1から100まで極めようと思います。 正規表現って、使えると便利ですが、それを勉強して使いこなせている人って少ないと思います。この機会にぜひ …

railsのscaffoldでremote formを使ってフォームの送信をajax化する

概要 みなさんこんにちはcandleです。 今回はrailsのformをremoteを使ってajaxしたいとおもいます。 正直、解説するまでもなく簡単です。 前提 適当なrailsプロジェクトが存在す …

wysiwygエディタのSquire editorのサンプルを作成する

概要 みなさんこんにちはcandleです。 今回オープンソースのsquireエディタをhtmlに手動で導入したいと思います。 squireはオープンソースの便利なwysiwygエディタです。 カスタマ …

ruby on railsのckeditorでcarrierwaveを使って画像をアップロードする

概要 みなさんこんにちはcandleです。今回はckeditorの画像のアップロードを行ってみたいと思います。 ckeditorの画像のアップロードは公式githubにも記載されているのですが、まあや …

railsのscaffoldでremote formで送信後jsonを取得する

概要 みなさんこんにちはcandleです。 今回はrailsのformをremoteを使ってajaxした時に、 サーバに送った値をjavascript側で受け取る方法を紹介します。 ちなみに、私は下の …

  • English
  • 日本語

プロフィール


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

twitter

スポンサードリンク

アーカイブ