Reactのためのクラックコース、パート1

このチュートリアル シリーズの作業を完全に映画のギャラリーを表示するアプリを構築して反応を使用して右に潜っていくよ。

開発スキルを平準化しながら反応のすべての主要な機能の使用を練習する絶好の機会は、ゼロからアプリケーションを作成する方法を学習します。モダンな反応するアプリを作成するために不可欠である、すべての推奨される方法およびベスト プラクティスが続いています。

Facebookが開発したcreate-react-appツールを使用して、次のReactトピックについて詳細に説明しながら、新しいReactアプリケーションを設定します。

• Components
• JSX
• Props
• state
• アプリを正しく構造化
• ES6 機能を用いたモダンなアプリ開発

我々 が構築することでしょう

反応開発について学習をもっと楽しくするために、我々 でしょうが完全に作業のアプリケーションを構築するよりもむしろ反応の新しい側面が覆われているときにコードの一般的なスニペットを提示します。

一緒に私たちは「Movie Mojo」、良い気分にさせる映画のギャラリーを表示するアプリを構築します。完了したら、アプリ ページの読み込み、いくつかの映画をロードし、よりボタンがクリックされたときにロードされます。 最後に、あなた自身の映画を入力することができますカスタム タイトル フォームを提出、ギャラリーに新しい映画を動的に挿入されます。

前提条件

これは中間レベルのチュートリアル、およびそうするでしょう大いに恩恵を受ける以下のトピックのいくつかの事前の知識があれば。

• ES6 矢印の関数、クラス、モジュールなどの機能。
• どのようなコンポーネント、小道具、および状態がReactしているかを知る
• Node.jsとNPMを使用した経験
• 少なくとも基本的なレベルのJavaScript能力。

これらのほとんどは、詳細については、沿って行く我々 が必要に応じて任意の特定のエリアを磨く私をお勧めします。

セットアップを取得しましょう

私たちはCreate-Reaction-Appツールを使ってReactアプリをセットアップします。 使い方が非常に簡単で、複雑な設定プロセスをナビゲートすることなく、すぐにアプリケーションをコーディングすることに集中できます。

create-react-appを使用するには、Node.jsとnpmをインストールする必要があります。 コマンドラインウィンドウで次のように入力すると、その両方が利用可能かどうかを確認できます。

node -v

それから：

npm -v

両方インストールしている場合は、それぞれの現在のバージョン番号が表示されます。

MacBook-Pro:~ davidgwyer$ node -v
v6.11.1
MacBook-Pro:~ davidgwyer$ npm -v
5.3.0
MacBook-Pro:~ davidgwyer$

Node.jsとnpmをインストールまたは更新する必要がある場合、最も簡単な方法は、公式WebページからNode.jsをダウンロードすることです。 Node.jsはnpmにバンドルされているので、別途インストールする必要はありません。

create-react-appをグローバルにインストールするには、コマンドラインウィンドウに次のように入力します。

npm install -g create-react-app

これで、create-react-appを使って新しいReactアプリケーションを構築することができます。 また、プロジェクトファイルを格納するトップレベルのフォルダも作成されます。 コマンド ライン ウィンドウを開き、あるアプリのフォルダーに移動 (e.g. /Desktop)、し、次を入力。

create-react-app movie-mojo

完了するために 1 分ほどかかりますが、このようなメッセージを参照してくださいする必要があるときに。

Success! Created movie-mojo at /Users/davidgwyer/Desktop/movie-mojo

Inside that directory, you can run several commands:

  yarn start

    Starts the development server.

  yarn build

    Bundles the app into static files for production.

  yarn test

    Starts the test runner.

  yarn eject

    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd movie-mojo
  yarn start

Happy hacking!

新しいmovie-mojoフォルダが次のファイル構造で作成されます。

srcフォルダはプロジェクトファイルを編集する場所です。アプリを配備すると、バンドルされてpublicフォルダに追加され、配布準備が整います。

ブラウザにサンプルアプリケーションを表示するには、create-react-appに付属のミニWebサーバーを利用しましょう。 作成したプロジェクトフォルダの中にいる必要があるので、コマンドラインウィンドウで次のように入力します。

cd movie-mojo

それから：

npm start

このシンプルなコマンドは、3 つの主なものです。次のことを行います。

• サンプル対応アプリをコンパイルします。
• 新しいブラウザー ウィンドウを開き、アプリを表示します。
• プロジェクト ファイルへの変更を監視します。

コンパイルすると、次の出力が表示されます。

Compiled successfully!

You can now view movie-mojo in the browser.

  Local: http://localhost:3000/

  On Your Network: http://192.168.0.15:3000/

Note that the development build is not optimized.

To create a production build, use yarn build.

ここでは、サンプル アプリケーションには、ブラウザーで実行されています。

あなたのアプリケーションに何らかの変更が加えられると、自動的に再コンパイルされ、ブラウザウィンドウに再ロードされます。 これは、create-react-appの本当にクールな機能で、開発中に多くの時間を節約できます！

また、手動で再コンパイルし、常に最新の変更内容を表示するブラウザ ウィンドウを更新することを気にせず、アプリをコーディングに集中することができます。

おそらく最高のワークフロー、使用可能な画面スペースがある場合はブラウザーと並行してテキスト エディターです。そのように、プロジェクト ファイルのいずれかに変更を加えるたびにほぼ瞬時にブラウザー ウィンドウに表示の変更が表示されます。

私たちのサンプル プロジェクトに変更を加えるを試してみましょう。

Src フォルダーの中には、テキスト エディターで App.js を開きます。行を変更してください。

編集を開始する <code>src/App.js</code> と再読み込み保存します。

宛先：

ようこそ、 「Movie Mojo」リアクションアプリへ

変更を保存すると、反応するアプリを自動的に再コンパイルする、ブラウザー ウィンドウを更新します。としてワークスペースを再配置した場合は、これはどれだけ瞬時表示されます、上記の提案。

我々 のアプリの構築

このチュートリアルの残りの部分のために使用するアプリの構造を設定してみましょう。

Create-Reaction-Appツールは、私たちのアプリを足場にする素晴らしい仕事ですが、私たちのニーズに合わせて調整する柔軟性はまだあります。

まず第一に、我々 はもはや私たちの src フォルダーから必要なファイルを退治しましょう。我々 は、サービスの我々 のアプリの労働者、だから registerServiceWorker.js ファイルを削除を必要はありません。 これは、index.js で参照されて、エディターで開く、これのようにすべての参照を削除します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

次に、logo.svg ファイルを削除し、それへの参照を削除する App.js を編集します。更新したファイルは次のようになります。

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  render() {

    return (
      <div className="App">
        <div className="App-header">
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          Welcome to the 'Movie Mojo' React app!
        </p>
      </div>
    );
  }
}

export default App;

我々 は App.test.js ファイルのことも取り除くことができます。これは src の次のファイルで私たちを残してください。

• index.js
• index.css
• App.js
• App.css

複数のコンポーネントを作成する予定ですので、すべてを格納する専用のフォルダを作成します。srcの中に新しいcomponentsトフォルダを作成し、App.jsファイルを追加します。 私たちのアプリは、いくつかの参考文献を更新するまで、適切にコンパイルされません。

Index.js、更新をインポートするパス、<App />コンポーネント。

import App from './components/App';

で App.js、App.css へのパスを更新します。

import '../App.css';

確認して変更保存アプリは正常に再コンパイルします。

これで「Movie Mojo」アプリのコーディングを開始する準備が整いました。 最初に、アプリのレンダリング方法に慣れてみましょう。

Index.js を見てみましょう。これは、DOM に我々 のアプリを実際にレンダリングするファイルこれは、2 つの引数は、ReactDom.render() メソッドを介して。 最初の引数は、我々 はレンダリングするコンポーネントです。私たちの場合、これは、<App />コンポーネントは、このアプリで最上位の (そして現在唯一の) コンポーネント。

2 番目の引数に反応するアプリをマウントするターゲット要素を指定します。デフォルトでは、' 作成反応 app' この要素を自動的に作成します。 public フォルダ内を検索している場合は、id がrootの<div>要素を含むindex.htmlがあります。

これはあなたが好む何かを変更できますが、このチュートリアルでは、既定のままにするそうです。

index.js ロードで私たち<App />コンポーネント App.js、このデザイン パターンとともに独自のファイルにアプリに含まれる各成分を分離することによって以下のことでしょう私たちと。

App.js になります私たちの最上位のコンポーネントに他のコンポーネントへの参照を含めることができますその他のコンポーネントが含まれます。コンポーネントとして最上位のある HTML タグに類似しているのだと思う<body>1 つまたは複数を含む可能性のある要素<div>変えることができる要素が含まれている、<nav>メニュー要素などなど。

結論

このチュートリアルには、私たちが反応するアプリを設定するために必要なすべての基礎が含まれています。 create-react-appを使用すると、私たちのために処理されたすべての設定で動作するサンプルアプリケーションを構築することが非常に簡単になりました。 次に、特定のニーズに合わせてデフォルト設定を変更しました。

パート2を見て、「Movie Mojo」アプリのコンポーネントを作成し、コンポーネントを動的にするための小道具を追加してみましょう。