まえがき

まず、自己紹介をしてください。私の名前はEdikで 、私はFull Stack Web Developerです。 Laravel＆React.js、Vue.jsの主な指示。 GoLangとSwiftの学習。

既に他にも多くの情報源がありますが、本は最も一般的なものの1つですが、本にはたくさんの水があり、私は別の松葉杖を考えず、ただメモを取ることにしました。

データを構造化するために、 情報は章に分割された一連の記事として表示されます 。

私は自分でこれらのメモを書き、全世界と共有することにしました。 厳しくしないでください。 それでは、行きましょう！

第1章Reactへようこそ

Reactは、 ユーザーインターフェイスの作成に使用される一般的なライブラリです。 大規模なサイトに関連する多くの問題を解決するためにFacebookで作成されました。

ライブラリとして反応する

ライブラリはサイズが大きくなく、作業全体の一部にのみ使用されることに注意してください。 使用するエコシステムツールに関する主な決定は、開発者が行います。 Reactは、「MVC」の世界で唯一の「V」です 。

新しいECMAScript構文

Reactは新しいECMAScript機能を利用します 。 最新の仕様に精通していない場合、Reactコードを表示すると不安が生じる可能性があります。

機能的に人気のあるJavaScript

JavaScriptは関数型言語ではありませんが、関数型メソッドをコードで使用できます。 Reactは、オブジェクト指向プログラミングよりも関数型プログラミングの優先順位を強調しています 。 この考え方の変化は、テストや生産性の向上などの分野で大きな利点につながります。

Reactを使い始める前に、関数型プログラミングパラダイムの基本を理解することをお勧めします。

面倒なjavascript

Reactを使用するには、Webpackの基本を学ぶ必要があります 。 Webpackを使用すると、コードをテストしたり、モジュールに分割したり、本番用に圧縮したりできます。

Reactライブラリの未来

ライブラリの次のバージョンには、ファイバーツールが含まれます。これは、コアReactアルゴリズムの新しい実装であり、その目標は画面への画像出力の速度を上げることです。 多くの変更は、ターゲットデバイスに関連しています。 ReactがReact Nativeでまだ使用されていることを忘れないでください。

ファイルを操作する

React Developer Tools

拡張機能または追加のブラウザモジュールとしてインストールできるいくつかのツールがありますが、それらは私たちにとって興味深いものです。

react-detectorは、 どのサイトがReactを使用しているかを知らせる Chromeブラウザー拡張機能です。

show-me-the-reactは、別のReact検出ツールです 。

React Developer Toolsは、 ブラウザーツールの機能を拡張するアドオンモジュールです 。 開発者のツールに新しいタブを作成し、 React要素を詳細に表示できます 。

React Developer Toolsは、デバッグ時に多くの時間を節約できる優れたツールです。 Reactでプロフェッショナルに書きたい場合、このモジュールは非常に役立ちます。

Node.jsをインストールする

Node.js-ブラウザーなしのJavaScript言語 （サーバー側JS）。 これは、 クライアントおよびサーバー側でJavaScriptアプリケーションを作成するために使用されるランタイム環境です。 Windows、MacOS、Linux、その他のプラットフォームにインストールできます。

Node.jsの公式Webサイトでインストールの詳細を確認できます。

Reactを使用するには、Nodeは必要ありません。 ただし、Reactを使用する場合は、 NPM というパッケージマネージャーを使用して依存関係をインストールする必要があります 。 Nodeとともに自動的にインストールされます。

Nodeが端末にインストールされているかどうかを確認するには、 node -v



と入力しnode -v



。 ノードのバージョンを確認する必要があります。

 $ node -v v.10.13.0
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

NPMの代替

NPMの追加の代替手段はYarnです。 このツールは、Exponent、Google、およびTildeと共同でFacebookによってリリースされました。 アプリケーションの依存関係をより確実に管理するのに役立ちます 。 Yarnを使用すると、NPMよりも高速であることがわかります。

Yarnのインストールは非常に簡単です。 Nodeのインストール後、次を入力します。

 $ npm install -g yarn
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Yarnの公式Webサイトでインストールの詳細を確認できます。

その後、パッケージをインストールする準備がすべて整います。 packege.jsonから依存関係をインストールするとき、 npm install



代わりにyarnを実行できます。

Yarnを使用したパッケージの追加：

 $ yarn add [_]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Yarnを使用したパッケージの削除：

 $ yarn remove [_]