本React.js。 クイックスタート」

こんにちは、habrozhiteli！ 以前に、要求の多いJavaScript開発者向けのReactテクノロジーに関する必須の入門書を出版しました。 Facebookの非常に人気のあるツールについて最も興味深い。 この本は、Reactを使用した高性能プログラミングの基本概念、実際のコード例、および利用可能なフローチャートについて説明しています。 それを読んだ後、あなたは学びます：



•ネイティブのReactコンポーネントと汎用DOMコンポーネントを作成して使用します。

•データテーブルのコンポーネントを作成して、テーブルの編集、並べ替え、検索、およびコンテンツのエクスポートを可能にします。

•関数呼び出しの代替として、オプションのJSX構文を使用します。

•時間を節約し、Reactでの作業に集中できる低レベルの柔軟なビルドプロセスを実行します。

•ESLint、Flow、およびJestツールを使用して、アプリケーションの開発時にコードを検証およびテストできます。

•Fluxを使用してコンポーネント間の通信を提供します。

この本は何についてですか

この本は、Web開発者としてReactを学習することに専念しています。 最初の3つの章では、空のHTMLファイルを使用して学習を開始し、それに基づいて残りのコードを構築します。 これにより、新しい構文や追加のツールの使用に気を取られることなく、Reactの学習に集中できます。



第4章では、Reactとともに一般的に使用される別個のアドオンテクノロジーであるJSXの概要を説明します。



次に、実際のアプリケーションを開発し、この問題に役立つ追加ツールを習得する方法の研究に進みます。 これらには、JavaScriptパッケージの作成（Browserify）、単体テスト（Jest）、コードチェック（ESLint）、タイプチェック（Flow）、アプリケーション内のデータフローの整理（Flux）、および不変データの使用（Immutable）が含まれます。 js）。 Reactに焦点を合わせるため、追加の技術ツールの検討は最小限に抑えられています。これらのツールに精通していると、問題を解決するために意識的にツールを選択するのに役立ちます。

本からの抜粋。 必要なツールのインストール

index.htmlをロードしてその動作を確認する前に、次のことを行う必要があります。



•bundle.cssファイルを作成します。 これは、必要なツールの使用を必要としない単純な関連付けです。

•ブラウザでコードを理解しやすくします。 トランスピレーションには、バベルが必要です。

•bundle.jsファイルを作成します。 これを行うには、Browserifyなどのツールを使用します。



Browserifyツールは、スクリプトを組み合わせるためだけでなく、次の場合にも必要になります。

•権限とすべての依存関係の包含。 app.jsファイルのパス名を指定するだけで、すべての依存関係（React、Logo.jsなど）が計算されます。

•require（）呼び出しが機能するようにCommonJS実装を有効にします。 Babelは、すべてのインポートステートメントをrequire（）関数の呼び出しに変換します。



一般的に、BabelとBrowserifyをインストールする必要があります。 これらは、Node.jsソフトウェアプラットフォームに付属のツールであるnpm（Node Package Manager）を使用してインストールされます。

Node.js

Node.jsをインストールするには、 http： //nodejs.orgにアクセスして、オペレーティングシステムに一致するインストーラーを取得します。 インストーラーの指示に従います（タスクの対処に役立ちます）。 これで、npmユーティリティが提供するサービスを使用できます。



確認するには、ターミナルで次のコマンドを入力します。

$ npm --version
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ターミナル（コマンドライン）の経験がない場合は、今がその時です！ Mac OS Xを使用している場合は、Spotlight検索（虫眼鏡アイコンが右上隅にあります）をクリックして、「ターミナル」と入力します。 Windowsを使用している場合は、[スタート]メニュー（画面の左下隅にあるウィンドウアイコンを右クリック）を見つけ、[実行]を選択してpowershellと入力します。

Browserify

Browserifyツールは、ターミナルで次のコマンドを入力してnpmを使用してインストールされます。

 $ npm install --global browserify
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ツールの機能を確認するには、次のコマンドを入力します。

 $ browserify --version
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バベル

Babelコマンドラインインターフェイスをインストールするには、次のコマンドを入力します。

 $ npm install --global babel-cli
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

正常性を確認するには、次のコマンドを入力します。

 $ babel --version
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

わかりましたか？

Reactおよびその他

さらにいくつかのパッケージを利用できます（そしてすべてが準備できます）。



•もちろん反応します。

•react-dom（個別に配布）;

•babel-preset-react（JSXおよびその他の便利なReact関連オプションのBabelサポートを提供）;

•babel-preset-es2015（最新のJavaScript機能のサポートを提供します）。



これらのパッケージをローカルにインストールするには、まずアプリケーションディレクトリに移動します（たとえば、cd〜/ reactbook / reactbook-boilerコマンドを使用します）。

 $ npm install --save-dev react $ npm install --save-dev react-dom $ npm install --save-dev babel-preset-react $ npm install --save-dev babel-preset-es2015
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションには、ローカルパッケージとその依存関係を含むnode_modulesディレクトリがあることに注意してください。 2つのグローバルモジュール（Babel、Browserify）は、オペレーティングシステムによって定義された別の場所にあるnode_modulesディレクトリにあります（たとえば、/ usr / local / lib / node_modulesまたはC：\ Users {your_name} \ AppData \ Roaming \ npm \）。

作りましょう

ビルドプロセスには、CSSマージ、JSトランスピレーション、JSパッケージ作成の3つのステップが含まれます。 3つのチームを運営することはもはや難しくありません。

JavaScriptトランスピレーション

まず、Babelを使用してJavaScriptコードを転置します。

 $ babel --presets react,es2015 js/source -d js/build
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコマンドは、js / sourceディレクトリからすべてのファイルを取得し、ReactおよびES2015の機能を使用してそれらを転置し、結果をjs / buildにコピーする必要があることを意味します。 このコマンドは、次の情報を表示します。

 js/source/app.js -> js/build/app.js js/source/components/Logo.js -> js/build/components/Logo.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JavaScriptパッケージを作成する

次に、パッケージを作成します。

 $ browserify js/build/app.js -o bundle.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Browserifyは、app.jsファイルから開始し、すべての依存関係を検討し、その結果をbundle.jsファイルに書き込むように指示されます。これにより、index.htmlファイルの包含ステートメントが完成します。 ファイルが実際に書き込まれたことを確認するには、less bundle.jsコマンドを入力します。

CSSパッケージの作成

CSSパッケージの作成は（この段階で）実行されるため、特別なツールを使用する必要もなく、すべてのCSSファイルを1つに結合するだけです（catコマンドを使用）。 ただし、ファイルは別の場所に移動されるため、画像へのリンクは機能を失うため、sedコマンドを呼び出して画像を書き換えます。

 cat css/*/* css/*.css | sed 's/..\/..\/images/images/g' > bundle.css
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

著者について

Stoyan StefanovはFacebookのエンジニアです。 以前はYahoo! 彼は、インタラクティブな画像最適化ツールであるsmush.itと、パフォーマンストラブルシューティングツールであるYSlow 2.0の作成者でした。 StoyanはJavaScript Patterns（O'Reilly、2010）およびObject-Oriented JavaScript（Packt Publishing、2008）の著者であり、Everyer Web SitesおよびHigh-Performance JavaScriptの共著者であり、ブロガーやVelocityを含む多くのカンファレンスで頻繁に講演を行っています。 JSConfとFronteers。



»本の詳細については、出版社のウェブサイトをご覧ください

» コンテンツ

» 抜粋



ホーカーの25％割引クーポン-React